mirror of
https://github.com/DataTables/DataTables.git
synced 2025-02-07 05:54:15 +01:00
Dev: Support for a "private" examples directory where the examples are
compiled but not included in the ToC Dev: longer line wrapping!
This commit is contained in:
Allan Jardine
parent
24b2d11460
commit
1ac1ea6752
@ -1 +1 @@
|
|||||||
255be943427a9eef51879a387ff49b78a723a671
|
0f7083c09363d54d9afd7ba3ad885bbe3dc23398
|
||||||
|
|||||||
@ -46,18 +46,14 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Column rendering</span></h1>
|
<h1>DataTables example <span>Column rendering</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Each column has an optional rendering control called <a href=
|
<p>Each column has an optional rendering control called <a href="//datatables.net/reference/option/columns.render"><code class="option" title=
|
||||||
"//datatables.net/reference/option/columns.render"><code class="option" title=
|
"DataTables initialisation option">columns.render<span>DT</span></code></a> which can be used to process the content of each cell before the data is used. <a href=
|
||||||
"DataTables initialisation option">columns.render<span>DT</span></code></a> which can be used to
|
"//datatables.net/reference/option/columns.render"><code class="option" title="DataTables initialisation option">columns.render<span>DT</span></code></a> has a
|
||||||
process the content of each cell before the data is used. <a href=
|
wide array of options available to it for rendering different types of data orthogonally (ordering, searching, display etc), but it can be used very simply to
|
||||||
"//datatables.net/reference/option/columns.render"><code class="option" title=
|
manipulate the content of a cell, as shown here.</p>
|
||||||
"DataTables initialisation option">columns.render<span>DT</span></code></a> has a wide array of options
|
|
||||||
available to it for rendering different types of data orthogonally (ordering, searching, display etc),
|
|
||||||
but it can be used very simply to manipulate the content of a cell, as shown here.</p>
|
|
||||||
|
|
||||||
<p>This example shows the person's age combined with their name in the first column, hiding the age
|
<p>This example shows the person's age combined with their name in the first column, hiding the age column. This technique can be useful for adding links,
|
||||||
column. This technique can be useful for adding links, assigning colours based on content rules and any
|
assigning colours based on content rules and any other form of text manipulation you require.</p>
|
||||||
other form of text manipulation you require.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -553,8 +549,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"columnDefs": [
|
"columnDefs": [
|
||||||
{
|
{
|
||||||
@ -571,8 +566,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -581,36 +575,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -633,8 +622,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -642,8 +630,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -702,14 +689,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -746,8 +730,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -755,10 +738,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -766,14 +747,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -38,23 +38,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Complex headers (rowspan / colspan)</span></h1>
|
<h1>DataTables example <span>Complex headers (rowspan / colspan)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Complex headers (using colspan / rowspan) can be used to group columns of similar information in
|
<p>Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.</p>
|
||||||
DataTables, creating a very powerful visual effect.</p>
|
|
||||||
|
|
||||||
<p>In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when
|
<p>In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan
|
||||||
working with hidden columns. The colspan and rowspan attributes for each cell are automatically
|
attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href=
|
||||||
calculated and rendered on the page for you. This allows the <a href=
|
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible<span>DT</span></code></a> option
|
||||||
"//datatables.net/reference/option/columns.visible"><code class="option" title=
|
and <a href="//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()<span>DT</span></code></a> method
|
||||||
"DataTables initialisation option">columns.visible<span>DT</span></code></a> option and <a href=
|
to take into account rowspan / colspan cells, drawing the header correctly.</p>
|
||||||
"//datatables.net/reference/api/column().visible()"><code class="api" title=
|
|
||||||
"DataTables API method">column().visible()<span>DT</span></code></a> method to take into account
|
|
||||||
rowspan / colspan cells, drawing the header correctly.</p>
|
|
||||||
|
|
||||||
<p>Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables
|
<p>Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply
|
||||||
can use that cell to detect the column and use it to apply ordering.</p>
|
ordering.</p>
|
||||||
|
|
||||||
<p>The example below shows a header spanning multiple cells over the contact information, with one of
|
<p>The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.</p>
|
||||||
the columns that the span covers being hidden.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -554,8 +549,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"columnDefs": [ {
|
"columnDefs": [ {
|
||||||
"visible": false,
|
"visible": false,
|
||||||
@ -564,8 +558,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -574,36 +567,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -626,8 +614,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -635,8 +622,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -650,8 +636,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./column_render.html">Column rendering</a></li>
|
<li><a href="./column_render.html">Column rendering</a></li>
|
||||||
<li><a href="./length_menu.html">Page length options</a></li>
|
<li><a href="./length_menu.html">Page length options</a></li>
|
||||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
<li class="active"><a href="./complex_header.html">Complex headers (rowspan /
|
<li class="active"><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="./language_file.html">Language file</a></li>
|
<li><a href="./language_file.html">Language file</a></li>
|
||||||
@ -696,14 +681,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -740,8 +722,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -749,10 +730,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -760,14 +739,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -39,16 +39,12 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Setting defaults</span></h1>
|
<h1>DataTables example <span>Setting defaults</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When working with DataTables over multiple pages it is often useful to set the initialisation
|
<p>When working with DataTables over multiple pages it is often useful to set the initialisation defaults to common values (for example you might want to set
|
||||||
defaults to common values (for example you might want to set <a href=
|
<a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom<span>DT</span></code></a> to a common value so
|
||||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
all tables get the same layout). This can be done using the <code>$.fn.dataTable.defaults</code> object. This object will take all of the same parameters as the
|
||||||
"DataTables initialisation option">dom<span>DT</span></code></a> to a common value so all tables get
|
DataTables initialisation object, but in this case you are setting the default for all future initialisations of DataTables.</p>
|
||||||
the same layout). This can be done using the <code>$.fn.dataTable.defaults</code> object. This object
|
|
||||||
will take all of the same parameters as the DataTables initialisation object, but in this case you are
|
|
||||||
setting the default for all future initialisations of DataTables.</p>
|
|
||||||
|
|
||||||
<p>This example shows the searching and ordering features of DataTables being disabled by default,
|
<p>This example shows the searching and ordering features of DataTables being disabled by default, which is reflected in the table when it is initialised.</p>
|
||||||
which is reflected in the table when it is initialised.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -544,8 +540,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.extend( $.fn.dataTable.defaults, {
|
||||||
example:</p><code class="multiline language-js">$.extend( $.fn.dataTable.defaults, {
|
|
||||||
"searching": false,
|
"searching": false,
|
||||||
"ordering": false
|
"ordering": false
|
||||||
} );
|
} );
|
||||||
@ -555,8 +550,7 @@ $(document).ready(function() {
|
|||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -565,36 +559,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -617,8 +606,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -626,8 +614,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -686,14 +673,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -730,8 +714,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -739,10 +722,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -750,14 +731,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,18 +43,14 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Multiple table control elements</span></h1>
|
<h1>DataTables example <span>Multiple table control elements</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>As is described by the basic DOM positioning example you can use the <a href=
|
<p>As is described by the basic DOM positioning example you can use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
"DataTables initialisation option">dom<span>DT</span></code></a> initialisation parameter to move DataTables features around the table to where you want them. In
|
||||||
"DataTables initialisation option">dom<span>DT</span></code></a> initialisation parameter to move
|
addition to this, you can also use <a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||||
DataTables features around the table to where you want them. In addition to this, you can also use
|
"DataTables initialisation option">dom<span>DT</span></code></a> to create multiple instances of these table controls. Simply include the feature's identification
|
||||||
<a href="//datatables.net/reference/option/dom"><code class="option" title=
|
letter where you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table ('t') should be included only
|
||||||
"DataTables initialisation option">dom<span>DT</span></code></a> to create multiple instances of these
|
once).</p>
|
||||||
table controls. Simply include the feature's identification letter where you want it to appear, as many
|
|
||||||
times as you wish, and the controls will all sync up (note that obviously the table ('t') should be
|
|
||||||
included only once).</p>
|
|
||||||
|
|
||||||
<p>This is shown in the demo below where for four key build-in features are duplicated above and below
|
<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
|
||||||
the table.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -550,15 +546,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
|
"dom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>'
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -567,15 +561,13 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_length {
|
||||||
below:</p><code class="multiline language-css">div.dataTables_length {
|
|
||||||
padding-left: 2em;
|
padding-left: 2em;
|
||||||
}
|
}
|
||||||
div.dataTables_length,
|
div.dataTables_length,
|
||||||
@ -584,25 +576,22 @@ $(document).ready(function() {
|
|||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -625,8 +614,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -634,8 +622,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -648,8 +635,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./dt_events.html">DataTables events</a></li>
|
<li><a href="./dt_events.html">DataTables events</a></li>
|
||||||
<li><a href="./column_render.html">Column rendering</a></li>
|
<li><a href="./column_render.html">Column rendering</a></li>
|
||||||
<li><a href="./length_menu.html">Page length options</a></li>
|
<li><a href="./length_menu.html">Page length options</a></li>
|
||||||
<li class="active"><a href="./dom_multiple_elements.html">Multiple table control
|
<li class="active"><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
|
||||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
@ -695,14 +681,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -739,8 +722,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -748,10 +730,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -759,14 +739,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,24 +43,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Custom toolbar elements</span></h1>
|
<h1>DataTables example <span>Custom toolbar elements</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make
|
<p>DataTables inserts DOM elements around the table to control DataTables features, and you can make use of this mechanism as well to insert your own custom
|
||||||
use of this mechanism as well to insert your own custom elements. In this example a <code class="tag"
|
elements. In this example a <code class="tag" title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
|
||||||
title="HTML tag">div</code> with a class of 'toolbar' is created using <a href=
|
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom<span>DT</span></code></a>, with which HTML is inserted to
|
||||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
create the toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.</p>
|
||||||
"DataTables initialisation option">dom<span>DT</span></code></a>, with which HTML is inserted to create
|
|
||||||
the toolbar. You could put whatever HTML you want into the toolbar and add event handlers etc.</p>
|
|
||||||
|
|
||||||
<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in
|
<p>For more complex features, or for creating reusable plug-ins, DataTables also has a feature plug-in API available, which can be used to create plug-ins which
|
||||||
API available, which can be used to create plug-ins which are used in a table by a single character
|
are used in a table by a single character reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||||
reference in the <a href="//datatables.net/reference/option/dom"><code class="option" title=
|
"DataTables initialisation option">dom<span>DT</span></code></a> option (like the built in option of <code class="string" title="String">f</code> refers to
|
||||||
"DataTables initialisation option">dom<span>DT</span></code></a> option (like the built in option of
|
'filtering input', you could have an <code class="string" title="String">F</code> option which creates your own filtering input control, custom to your app).</p>
|
||||||
<code class="string" title="String">f</code> refers to 'filtering input', you could have an
|
|
||||||
<code class="string" title="String">F</code> option which creates your own filtering input control,
|
|
||||||
custom to your app).</p>
|
|
||||||
|
|
||||||
<p><a href="https://datatables.net/extras/tabletools">TableTools</a> is a feature plug-in for
|
<p><a href="https://datatables.net/extras/tabletools">TableTools</a> is a feature plug-in for DataTables which adds buttons into a toolbar for a table, which
|
||||||
DataTables which adds buttons into a toolbar for a table, which controls such as copy to clipboard,
|
controls such as copy to clipboard, export and custom buttons.</p>
|
||||||
export and custom buttons.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -556,8 +550,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"dom": '<"toolbar">frtip'
|
"dom": '<"toolbar">frtip'
|
||||||
} );
|
} );
|
||||||
@ -565,8 +558,7 @@ $(document).ready(function() {
|
|||||||
$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
|
$("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -575,38 +567,33 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">.toolbar {
|
||||||
below:</p><code class="multiline language-css">.toolbar {
|
|
||||||
float: left;
|
float: left;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -629,8 +616,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -638,8 +624,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -698,14 +683,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -742,8 +724,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -751,10 +732,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -762,14 +741,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,23 +43,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>DataTables events</span></h1>
|
<h1>DataTables example <span>DataTables events</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables fires a number of custom events which you can bind to in the standard jQuery fashion
|
<p>DataTables fires a number of custom events which you can bind to in the standard jQuery fashion (although note that the namespace <code>dt</code> <em>must</em>
|
||||||
(although note that the namespace <code>dt</code> <em>must</em> be used), allowing your code to perform
|
be used), allowing your code to perform custom actions when these events occur.</p>
|
||||||
custom actions when these events occur.</p>
|
|
||||||
|
|
||||||
<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to
|
<p>All custom events fired by DataTables are fired with the namespace <code>dt</code> in order to prevent conflicts arising with other jQuery plug-ins which also
|
||||||
prevent conflicts arising with other jQuery plug-ins which also fire events. The DataTables <a href=
|
fire events. The DataTables <a href="//datatables.net/reference/api/on()"><code class="api" title="DataTables API method">on()<span>DT</span></code></a> method can
|
||||||
"//datatables.net/reference/api/on()"><code class="api" title=
|
be used like the jQuery <code>on()</code> method, but will automatically append the <code>dt</code> namespace if required.</p>
|
||||||
"DataTables API method">on()<span>DT</span></code></a> method can be used like the jQuery
|
|
||||||
<code>on()</code> method, but will automatically append the <code>dt</code> namespace if required.</p>
|
|
||||||
|
|
||||||
<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class=
|
<p>This example shows the use of the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order<span>DT</span></code></a>,
|
||||||
"event" title="DataTables event">order<span>DT</span></code></a>, <a href=
|
<a href="//datatables.net/reference/event/search"><code class="event" title="DataTables event">search<span>DT</span></code></a> and <a href=
|
||||||
"//datatables.net/reference/event/search"><code class="event" title=
|
"//datatables.net/reference/event/page"><code class="event" title="DataTables event">page<span>DT</span></code></a> events by adding a notification that the event
|
||||||
"DataTables event">search<span>DT</span></code></a> and <a href=
|
fired to an element on the page to show that they have indeed fired.</p>
|
||||||
"//datatables.net/reference/event/page"><code class="event" title=
|
|
||||||
"DataTables event">page<span>DT</span></code></a> events by adding a notification that the event fired
|
|
||||||
to an element on the page to show that they have indeed fired.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="demo_info" class="box"></div>
|
<div id="demo_info" class="box"></div>
|
||||||
@ -557,8 +551,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var eventFired = function ( type ) {
|
var eventFired = function ( type ) {
|
||||||
var n = $('#demo_info')[0];
|
var n = $('#demo_info')[0];
|
||||||
n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>';
|
n.innerHTML += '<div>'+type+' event - '+new Date().getTime()+'</div>';
|
||||||
@ -572,8 +565,7 @@ $(document).ready(function() {
|
|||||||
.dataTable();
|
.dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -582,36 +574,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -634,8 +621,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -643,8 +629,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -703,14 +688,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -747,8 +729,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -756,10 +737,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -767,14 +746,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -38,13 +38,11 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>DOM / jQuery events</span></h1>
|
<h1>DataTables example <span>DOM / jQuery events</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Events assigned to the table can be exceptionally useful for user interaction, however you must be
|
<p>Events assigned to the table can be exceptionally useful for user interaction, however you must be aware that DataTables will add and remove rows from the DOM
|
||||||
aware that DataTables will add and remove rows from the DOM as they are needed (i.e. when paging only
|
as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with
|
||||||
the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when
|
events.</p>
|
||||||
working with events.</p>
|
|
||||||
|
|
||||||
<p>One of the best ways of dealing with this is through the use of delegated events with jQuery's
|
<p>One of the best ways of dealing with this is through the use of delegated events with jQuery's <code>on</code> method, as shown in this example.</p>
|
||||||
<code>on</code> method, as shown in this example.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -540,8 +538,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
|
|
||||||
$('#example tbody').on('click', 'tr', function () {
|
$('#example tbody').on('click', 'tr', function () {
|
||||||
@ -550,8 +547,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -560,36 +556,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -612,8 +603,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -621,8 +611,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -681,14 +670,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -725,8 +711,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -734,10 +719,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -745,14 +728,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -68,20 +68,15 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Footer callback</span></h1>
|
<h1>DataTables example <span>Footer callback</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Through the use of the header and footer callback manipulation functions provided by DataTables
|
<p>Through the use of the header and footer callback manipulation functions provided by DataTables (<a href=
|
||||||
(<a href="//datatables.net/reference/option/headerCallback"><code class="option" title=
|
"//datatables.net/reference/option/headerCallback"><code class="option" title="DataTables initialisation option">headerCallback<span>DT</span></code></a> and
|
||||||
"DataTables initialisation option">headerCallback<span>DT</span></code></a> and <a href=
|
<a href="//datatables.net/reference/option/footerCallback"><code class="option" title="DataTables initialisation option">footerCallback<span>DT</span></code></a>),
|
||||||
"//datatables.net/reference/option/footerCallback"><code class="option" title=
|
it is possible to perform some powerful and useful data manipulation functions, such as summarising data in the table.</p>
|
||||||
"DataTables initialisation option">footerCallback<span>DT</span></code></a>), it is possible to perform
|
|
||||||
some powerful and useful data manipulation functions, such as summarising data in the table.</p>
|
|
||||||
|
|
||||||
<p>The example below shows a footer callback being used to total the data for a column (both the
|
<p>The example below shows a footer callback being used to total the data for a column (both the visible and the hidden data) using the <a href=
|
||||||
visible and the hidden data) using the <a href=
|
"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()<span>DT</span></code></a> API method and <a href=
|
||||||
"//datatables.net/reference/api/column().data()"><code class="api" title=
|
"//datatables.net/reference/api/column().footer()"><code class="api" title="DataTables API method">column().footer()<span>DT</span></code></a> for writing the
|
||||||
"DataTables API method">column().data()<span>DT</span></code></a> API method and <a href=
|
value into the footer.</p>
|
||||||
"//datatables.net/reference/api/column().footer()"><code class="api" title=
|
|
||||||
"DataTables API method">column().footer()<span>DT</span></code></a> for writing the value into the
|
|
||||||
footer.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -515,8 +510,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"footerCallback": function ( row, data, start, end, display ) {
|
"footerCallback": function ( row, data, start, end, display ) {
|
||||||
var api = this.api(), data;
|
var api = this.api(), data;
|
||||||
@ -553,8 +547,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -563,36 +556,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">th { white-space: nowrap; }</code>
|
||||||
below:</p><code class="multiline language-css">th { white-space: nowrap; }</code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -615,8 +603,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -624,8 +611,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -684,14 +670,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -728,8 +711,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -737,10 +719,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -748,14 +728,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,30 +33,24 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>HTML5 data-* attributes</span></h1>
|
<h1>DataTables example <span>HTML5 data-* attributes</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables can use different data for different actions (display, ordering and searching) which can
|
<p>DataTables can use different data for different actions (display, ordering and searching) which can be immensely powerful for transforming data in the display
|
||||||
be immensely powerful for transforming data in the display to be intuitive for the end user, while
|
to be intuitive for the end user, while using different, or more complex data, for other actions. For example, if a table contains a formatted telephone number in
|
||||||
using different, or more complex data, for other actions. For example, if a table contains a formatted
|
the format <code>xxx-xxxx</code>, intuitively a user might search for the number but without a dash. Using orthogonal data for searching allows both forms of the
|
||||||
telephone number in the format <code>xxx-xxxx</code>, intuitively a user might search for the number
|
telephone number to be used, while only the nicely formatted number is displayed in the table.</p>
|
||||||
but without a dash. Using orthogonal data for searching allows both forms of the telephone number to be
|
|
||||||
used, while only the nicely formatted number is displayed in the table.</p>
|
|
||||||
|
|
||||||
<p>One method in which DataTables can obtain this orthogonal data for its different actions is through
|
<p>One method in which DataTables can obtain this orthogonal data for its different actions is through <a href=
|
||||||
<a href=
|
"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">custom HTML5 data attributes</a>. DataTables
|
||||||
"http://www.w3.org/html/wg/drafts/html/master/dom.html#embedding-custom-non-visible-data-with-the-data-*-attributes">
|
will automatically detect four different attributes on the HTML elements:</p>
|
||||||
custom HTML5 data attributes</a>. DataTables will automatically detect four different attributes on the
|
|
||||||
HTML elements:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
|
<li><code>data-sort</code> or <code>data-order</code> - for ordering data</li>
|
||||||
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
|
<li><code>data-filter</code> or <code>data-search</code> - for search data</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In
|
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In this case the first column has been formatted so the first name
|
||||||
this case the first column has been formatted so the first name has abbreviated, but the full name is
|
has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it
|
||||||
still searchable (search for "Bruno" for example). Additionally, although the last column contains
|
(<code>/y</code>) the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain
|
||||||
non-numeric data in it (<code>/y</code>) the column will correctly order numerically as the
|
numeric data.</p>
|
||||||
<code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric
|
|
||||||
data.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -552,13 +546,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -567,36 +559,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -619,8 +606,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -628,8 +614,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -688,14 +673,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -732,8 +714,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -741,10 +722,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -752,14 +731,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,13 +19,12 @@
|
|||||||
<h1>DataTables example <span>Advanced initialisation</span></h1>
|
<h1>DataTables example <span>Advanced initialisation</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The configuration options offered by DataTables extend much further than the options shown in the
|
<p>The configuration options offered by DataTables extend much further than the options shown in the basic initialisation of this documentation. Through
|
||||||
basic initialisation of this documentation. Through combinations of the options available and the use
|
combinations of the options available and the use of callbacks, DataTables is completely customisable and will fit into exactly what you need for your table
|
||||||
of callbacks, DataTables is completely customisable and will fit into exactly what you need for your
|
display.</p>
|
||||||
table display.</p>
|
|
||||||
|
|
||||||
<p>This section shows some more advanced initialisation options. Keep in mind also that each example
|
<p>This section shows some more advanced initialisation options. Keep in mind also that each example can be combined with the other examples to get what you
|
||||||
can be combined with the other examples to get what you want!</p>
|
want!</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -59,14 +58,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -37,11 +37,9 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Language file</span></h1>
|
<h1>DataTables example <span>Language file</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>As well as being able to pass language information to DataTables through the <a href=
|
<p>As well as being able to pass language information to DataTables through the <a href="//datatables.net/reference/option/language"><code class="option" title=
|
||||||
"//datatables.net/reference/option/language"><code class="option" title=
|
"DataTables initialisation option">language<span>DT</span></code></a> initialisation option, you can also store the language information in a file, which
|
||||||
"DataTables initialisation option">language<span>DT</span></code></a> initialisation option, you can
|
DataTables can load by Ajax using the <a href="//datatables.net/reference/option/language.url"><code class="option" title=
|
||||||
also store the language information in a file, which DataTables can load by Ajax using the <a href=
|
|
||||||
"//datatables.net/reference/option/language.url"><code class="option" title=
|
|
||||||
"DataTables initialisation option">language.url<span>DT</span></code></a> option.</p>
|
"DataTables initialisation option">language.url<span>DT</span></code></a> option.</p>
|
||||||
|
|
||||||
<p>The following example shows DataTables reading a German language file.</p>
|
<p>The following example shows DataTables reading a German language file.</p>
|
||||||
@ -540,8 +538,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"language": {
|
"language": {
|
||||||
"url": "../resources/de_DE.txt"
|
"url": "../resources/de_DE.txt"
|
||||||
@ -549,8 +546,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -559,36 +555,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -611,8 +602,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -620,8 +610,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -680,14 +669,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -724,8 +710,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -733,10 +718,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -744,14 +727,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,17 +35,16 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Page length options</span></h1>
|
<h1>DataTables example <span>Page length options</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>It is possible to easily customise the options shown in the length menu (by default at the top left
|
<p>It is possible to easily customise the options shown in the length menu (by default at the top left of the table) using the <a href=
|
||||||
of the table) using the <a href="//datatables.net/reference/option/lengthMenu"><code class="option"
|
"//datatables.net/reference/option/lengthMenu"><code class="option" title="DataTables initialisation option">lengthMenu<span>DT</span></code></a> initialisation
|
||||||
title="DataTables initialisation option">lengthMenu<span>DT</span></code></a> initialisation
|
|
||||||
option.</p>
|
option.</p>
|
||||||
|
|
||||||
<p>This parameter can take one of two forms:</p>
|
<p>This parameter can take one of two forms:</p>
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li>A 1D array of options which will be used for both the displayed option and the value, or</li>
|
<li>A 1D array of options which will be used for both the displayed option and the value, or</li>
|
||||||
<li>A 2D array in which the first array is used to define the value options and the second array
|
<li>A 2D array in which the first array is used to define the value options and the second array the displayed options (useful for language strings such as
|
||||||
the displayed options (useful for language strings such as 'All').</li>
|
'All').</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>The example below shows a 2D array being used to include a "Show all" records option.</p>
|
<p>The example below shows a 2D array being used to include a "Show all" records option.</p>
|
||||||
@ -544,15 +543,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
|
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]]
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -561,36 +558,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -613,8 +605,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -622,8 +613,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -682,14 +672,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -726,8 +713,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -735,10 +721,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -746,14 +730,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -42,25 +42,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Read HTML to data objects</span></h1>
|
<h1>DataTables example <span>Read HTML to data objects</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data
|
<p>When DataTables reads the table content from an HTML table (rather than an Ajax or Javascript data source), by default it will read the information in the table
|
||||||
source), by default it will read the information in the table into an array that DataTables stores
|
into an array that DataTables stores internally. Each array element represents a column.</p>
|
||||||
internally. Each array element represents a column.</p>
|
|
||||||
|
|
||||||
<p>It can be very useful to have DataTables read the information into an object rather than an array,
|
<p>It can be very useful to have DataTables read the information into an object rather than an array, an option that can be triggered using the <a href=
|
||||||
an option that can be triggered using the <a href=
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a>
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
initialisation option to define how you want the data to be stored. Typically <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> initialisation option to
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> is used with <a href="../ajax/objects.html">Ajax sourced data</a> to tell DataTables
|
||||||
define how you want the data to be stored. Typically <a href=
|
where to read data from, but as can be seen here it also tells DataTables where to write the data to.</p>
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> is used with <a href=
|
|
||||||
"../ajax/objects.html">Ajax sourced data</a> to tell DataTables where to read data from, but as can be
|
|
||||||
seen here it also tells DataTables where to write the data to.</p>
|
|
||||||
|
|
||||||
<p>This ability to store data into an object can be very useful when working with the DataTables API
|
<p>This ability to store data into an object can be very useful when working with the DataTables API after the table has been initialised.</p>
|
||||||
after the table has been initialised.</p>
|
|
||||||
|
|
||||||
<p>In the example shown here, the data read from each row in the table is read into a Javascript object
|
<p>In the example shown here, the data read from each row in the table is read into a Javascript object with the structure:</p>
|
||||||
with the structure:</p>
|
|
||||||
<pre>
|
<pre>
|
||||||
<code class="multiline language-js">{
|
<code class="multiline language-js">{
|
||||||
"name": "...",
|
"name": "...",
|
||||||
@ -569,8 +562,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').DataTable({
|
$('#example').DataTable({
|
||||||
"columns": [
|
"columns": [
|
||||||
{ "data": "name" },
|
{ "data": "name" },
|
||||||
@ -583,8 +575,7 @@ $(document).ready(function() {
|
|||||||
});
|
});
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -593,36 +584,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -645,8 +631,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -654,8 +639,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -714,14 +698,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -758,8 +739,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -767,10 +747,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -778,14 +756,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -44,17 +44,13 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Row created callback</span></h1>
|
<h1>DataTables example <span>Row created callback</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The following example shows how a callback function can be used to format a particular row at draw
|
<p>The following example shows how a callback function can be used to format a particular row at draw time. For each row that is generated for display, the
|
||||||
time. For each row that is generated for display, the <a href=
|
<a href="//datatables.net/reference/option/createdRow"><code class="option" title="DataTables initialisation option">createdRow<span>DT</span></code></a> function
|
||||||
"//datatables.net/reference/option/createdRow"><code class="option" title=
|
is called once and once only. It is passed the create row node which can then be modified.</p>
|
||||||
"DataTables initialisation option">createdRow<span>DT</span></code></a> function is called once and
|
|
||||||
once only. It is passed the create row node which can then be modified.</p>
|
|
||||||
|
|
||||||
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to
|
<p>In this case a trivial example of making the 'salary' column blue and bold by adding a CSS class to the container cell if the salary is greater than $4,000.
|
||||||
the container cell if the salary is greater than $4,000. Note that <a href=
|
Note that <a href="//datatables.net/reference/option/columns.createdCell"><code class="option" title=
|
||||||
"//datatables.net/reference/option/columns.createdCell"><code class="option" title=
|
"DataTables initialisation option">columns.createdCell<span>DT</span></code></a> could also be used to create exactly the same effect.</p>
|
||||||
"DataTables initialisation option">columns.createdCell<span>DT</span></code></a> could also be used to
|
|
||||||
create exactly the same effect.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -550,8 +546,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"createdRow": function ( row, data, index ) {
|
"createdRow": function ( row, data, index ) {
|
||||||
if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
|
if ( data[5].replace(/[\$,]/g, '') * 1 > 4000 ) {
|
||||||
@ -561,8 +556,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -571,39 +565,34 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">td.highlight {
|
||||||
below:</p><code class="multiline language-css">td.highlight {
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: blue;
|
color: blue;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -626,8 +615,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -635,8 +623,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -695,14 +682,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -739,8 +723,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -748,10 +731,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -759,14 +740,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -70,17 +70,14 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Row grouping</span></h1>
|
<h1>DataTables example <span>Row grouping</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Although DataTables doesn't have row grouping built-in (picking one of the many methods available
|
<p>Although DataTables doesn't have row grouping built-in (picking one of the many methods available would overly limit the DataTables core), it is most certainly
|
||||||
would overly limit the DataTables core), it is most certainly possible to give the look and feel of row
|
possible to give the look and feel of row grouping.</p>
|
||||||
grouping.</p>
|
|
||||||
|
|
||||||
<p>In the example below the 'group' is the office location, which is based on the information in the
|
<p>In the example below the 'group' is the office location, which is based on the information in the third column (which is set to hidden). The grouping indicator
|
||||||
third column (which is set to hidden). The grouping indicator is added by the <a href=
|
is added by the <a href="//datatables.net/reference/option/drawCallback"><code class="option" title=
|
||||||
"//datatables.net/reference/option/drawCallback"><code class="option" title=
|
"DataTables initialisation option">drawCallback<span>DT</span></code></a> function, which will parse through the rows which are displayed, and enter a grouping TR
|
||||||
"DataTables initialisation option">drawCallback<span>DT</span></code></a> function, which will parse
|
element where a new group is found. A <code>click</code> event handler is added for the grouping rows to allow the grouping order to be restored as well as
|
||||||
through the rows which are displayed, and enter a grouping TR element where a new group is found. A
|
ordering by any other column.</p>
|
||||||
<code>click</code> event handler is added for the grouping rows to allow the grouping order to be
|
|
||||||
restored as well as ordering by any other column.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -576,8 +573,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var table = $('#example').DataTable({
|
var table = $('#example').DataTable({
|
||||||
"columnDefs": [
|
"columnDefs": [
|
||||||
{ "visible": false, "targets": 2 }
|
{ "visible": false, "targets": 2 }
|
||||||
@ -613,8 +609,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -623,39 +618,34 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">tr.group,
|
||||||
below:</p><code class="multiline language-css">tr.group,
|
|
||||||
tr.group:hover {
|
tr.group:hover {
|
||||||
background-color: #ddd !important;
|
background-color: #ddd !important;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -678,8 +668,7 @@ tr.group:hover {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -687,8 +676,7 @@ tr.group:hover {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -747,14 +735,11 @@ tr.group:hover {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -791,8 +776,7 @@ tr.group:hover {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -800,10 +784,8 @@ tr.group:hover {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -811,14 +793,11 @@ tr.group:hover {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -42,12 +42,10 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Order direction sequence control</span></h1>
|
<h1>DataTables example <span>Order direction sequence control</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>At times you may wish to change the default ordering direction sequence for columns (some or all of
|
<p>At times you may wish to change the default ordering direction sequence for columns (some or all of them) to be 'descending' rather than DataTables' default
|
||||||
them) to be 'descending' rather than DataTables' default ascending. This can be done through the use of
|
ascending. This can be done through the use of the <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
|
||||||
the <a href="//datatables.net/reference/option/columns.orderSequence"><code class="option" title=
|
"DataTables initialisation option">columns.orderSequence<span>DT</span></code></a> initialisation parameter. This parameter also allows you to limit the ordering
|
||||||
"DataTables initialisation option">columns.orderSequence<span>DT</span></code></a> initialisation
|
to a single direction, or you could add complex behaviour to the ordering interaction.</p>
|
||||||
parameter. This parameter also allows you to limit the ordering to a single direction, or you could add
|
|
||||||
complex behaviour to the ordering interaction.</p>
|
|
||||||
|
|
||||||
<p>The example below shows:</p>
|
<p>The example below shows:</p>
|
||||||
|
|
||||||
@ -60,9 +58,8 @@ $(document).ready(function() {
|
|||||||
<li>Column 6 - default ordering</li>
|
<li>Column 6 - default ordering</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex
|
<p>It's worth noting that I don't have a good use case for when you might what to mix such complex ordering behaviour into a single table, but the example shows
|
||||||
ordering behaviour into a single table, but the example shows how these options can be use and
|
how these options can be use and therefore applied across all columns.</p>
|
||||||
therefore applied across all columns.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -558,8 +555,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"aoColumns": [
|
"aoColumns": [
|
||||||
null,
|
null,
|
||||||
@ -572,8 +568,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -582,36 +577,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -634,8 +624,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -643,8 +632,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -667,8 +655,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./row_grouping.html">Row grouping</a></li>
|
<li><a href="./row_grouping.html">Row grouping</a></li>
|
||||||
<li><a href="./footer_callback.html">Footer callback</a></li>
|
<li><a href="./footer_callback.html">Footer callback</a></li>
|
||||||
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
|
<li><a href="./dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li class="active"><a href="./sort_direction_control.html">Order direction sequence
|
<li class="active"><a href="./sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -704,14 +691,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -748,8 +732,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -757,10 +740,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -768,14 +749,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -44,30 +44,23 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Flat array data source</span></h1>
|
<h1>DataTables example <span>Flat array data source</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the
|
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
|
||||||
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
|
<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
|
||||||
be change by using the <code>dataSrc</code> option of the <a href=
|
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
|
|
||||||
|
|
||||||
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||||
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
|
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which it can be used:</p>
|
||||||
it can be used:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
|
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
|
||||||
the source object.</li>
|
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
|
||||||
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
|
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
|
||||||
array.</li>
|
you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
|
||||||
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to
|
|
||||||
transform the data from one source format to another (for example you could convert from XML to a
|
|
||||||
Javascript object). The value returned from the function is used as the data for the table.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
|
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||||
"option" title="DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> being used as
|
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> being used as an empty string. This tells DataTables that the JSON loaded is a plain
|
||||||
an empty string. This tells DataTables that the JSON loaded is a plain array, not an object with an
|
array, not an object with an array inside it as is the default.</p>
|
||||||
array inside it as is the default.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -104,8 +97,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"ajax": {
|
"ajax": {
|
||||||
"url": "data/objects_root_array.txt",
|
"url": "data/objects_root_array.txt",
|
||||||
@ -122,8 +114,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -132,36 +123,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -184,8 +170,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -193,8 +178,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -207,10 +191,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -219,8 +201,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -256,14 +237,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -300,8 +278,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -309,10 +286,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -320,14 +295,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -36,31 +36,23 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Custom data source property</span></h1>
|
<h1>DataTables example <span>Custom data source property</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the
|
<p>When loading data from an Ajax source, by default, DataTables will look for the data to use in the <code>data</code> parameter of a returned object (e.g.
|
||||||
<code>data</code> parameter of a returned object (e.g. <code>{ "data": [...] }</code>). This can easily
|
<code>{ "data": [...] }</code>). This can easily be change by using the <code>dataSrc</code> option of the <a href=
|
||||||
be change by using the <code>dataSrc</code> option of the <a href=
|
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> initiation option.</p>
|
|
||||||
|
|
||||||
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
<p>The <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||||
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which
|
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> has a number of ways in which it can be used:</p>
|
||||||
it can be used:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in
|
<li>As a string (e.g. <code>dataSrc: 'myData'</code>) - obtain data from a different property in the source object.</li>
|
||||||
the source object.</li>
|
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an array.</li>
|
||||||
<li>As an empty string (e.g. <code>dataSrc: ''</code>) - the data source is not an object but an
|
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to transform the data from one source format to another (for example
|
||||||
array.</li>
|
you could convert from XML to a Javascript object). The value returned from the function is used as the data for the table.</li>
|
||||||
<li>As a function (e.g. <code>dataSrc: function(json) {}</code>) - a function can be used to
|
|
||||||
transform the data from one source format to another (for example you could convert from XML to a
|
|
||||||
Javascript object). The value returned from the function is used as the data for the table.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class=
|
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||||
"option" title="DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> being used as
|
"DataTables initialisation option">ajax.dataSrc<span>DT</span></code></a> being used as a string to get the data from a different source property, in this case
|
||||||
a string to get the data from a different source property, in this case <code class="string" title=
|
<code class="string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
|
||||||
"String">demo</code> but it could be any value, included a nested property by using standard dotted
|
|
||||||
Javascript object notation.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -97,8 +89,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"ajax": {
|
"ajax": {
|
||||||
"url": "data/arrays_custom_prop.txt",
|
"url": "data/arrays_custom_prop.txt",
|
||||||
@ -107,8 +98,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -117,36 +107,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -169,8 +154,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -178,8 +162,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -192,10 +175,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -204,8 +185,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -241,14 +221,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -267,8 +244,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
|
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
|
||||||
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
|
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
|
||||||
<li><a href="./null_data_source.html">Generated content for a column</a></li>
|
<li><a href="./null_data_source.html">Generated content for a column</a></li>
|
||||||
<li class="active"><a href="./custom_data_property.html">Custom data source
|
<li class="active"><a href="./custom_data_property.html">Custom data source property</a></li>
|
||||||
property</a></li>
|
|
||||||
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
|
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
|
||||||
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
|
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -286,8 +262,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -295,10 +270,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -306,14 +279,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -42,22 +42,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Nested object data (objects)</span></h1>
|
<h1>DataTables example <span>Nested object data (objects)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables has the ability to use data from almost data JSON data source through the use of the
|
<p>DataTables has the ability to use data from almost data JSON data source through the use of the <a href=
|
||||||
<a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option. In
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option. In its simplest case,
|
its simplest case, it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of nested objects / arrays through the use of
|
||||||
it can be used to read arbitrary object properties, but can also be extended to <em>n</em> levels of
|
standard Javascript dotted object notation. Each dot (<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
nested objects / arrays through the use of standard Javascript dotted object notation. Each dot
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> option represents another object level.</p>
|
||||||
(<code>.</code>) in the <a href="//datatables.net/reference/option/columns.data"><code class="option"
|
|
||||||
title="DataTables initialisation option">columns.data<span>DT</span></code></a> option represents
|
|
||||||
another object level.</p>
|
|
||||||
|
|
||||||
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the
|
<p>In this example <code>hr.position</code> refers to the <code>position</code> property of the <code>hr</code> object in the row's data source object, while
|
||||||
<code>hr</code> object in the row's data source object, while <code>contact.0</code> refers to the
|
<code>contact.0</code> refers to the first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested data.</p>
|
||||||
first element of the <code>contact</code> array. Any number of dots can be used to obtain deeply nested
|
|
||||||
data.</p>
|
|
||||||
|
|
||||||
<p>The example below shows DataTables reading information for the columns from nested objects and
|
<p>The example below shows DataTables reading information for the columns from nested objects and arrays, where the structure of the row's data source in this
|
||||||
arrays, where the structure of the row's data source in this example is:</p>
|
example is:</p>
|
||||||
<pre>
|
<pre>
|
||||||
<code class="multiline">{
|
<code class="multiline">{
|
||||||
"name": "Tiger Nixon",
|
"name": "Tiger Nixon",
|
||||||
@ -109,8 +104,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"ajax": "data/objects_deep.txt",
|
"ajax": "data/objects_deep.txt",
|
||||||
@ -125,8 +119,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -135,36 +128,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -187,8 +175,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -196,8 +183,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -210,10 +196,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -222,8 +206,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -259,14 +242,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -303,8 +283,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -312,10 +291,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -323,14 +300,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -34,21 +34,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Deferred rendering for speed</span></h1>
|
<h1>DataTables example <span>Deferred rendering for speed</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs.
|
<p>When working with large data sources, you might seek to improve the speed at which DataTables runs. One method to do this is to make use of the built-in
|
||||||
One method to do this is to make use of the built-in deferred rendering option in DataTables with the
|
deferred rendering option in DataTables with the <a href="//datatables.net/reference/option/deferRender"><code class="option" title=
|
||||||
<a href="//datatables.net/reference/option/deferRender"><code class="option" title=
|
|
||||||
"DataTables initialisation option">deferRender<span>DT</span></code></a> option.</p>
|
"DataTables initialisation option">deferRender<span>DT</span></code></a> option.</p>
|
||||||
|
|
||||||
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag"
|
<p>When deferred rendering is enabled, rather than having DataTables create all <code class="tag" title="HTML tag">TR</code> and <code class="tag" title=
|
||||||
title="HTML tag">TR</code> and <code class="tag" title="HTML tag">TD</code> nodes required for the
|
"HTML tag">TD</code> nodes required for the table when the data is loaded, DataTables will only create the nodes required for each individual row at the time of
|
||||||
table when the data is loaded, DataTables will only create the nodes required for each individual row
|
that row being drawn on the page (these nodes are then retained in case they are needed again so they aren't created multiple times). This can give a significant
|
||||||
at the time of that row being drawn on the page (these nodes are then retained in case they are needed
|
performance increase, since a lot less work is done at initialisation time.</p>
|
||||||
again so they aren't created multiple times). This can give a significant performance increase, since a
|
|
||||||
lot less work is done at initialisation time.</p>
|
|
||||||
|
|
||||||
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll
|
<p>The example below shows DataTables with deferred rendering enabled. For this small example you'll likely notice no difference, but larger tables can benefit
|
||||||
likely notice no difference, but larger tables can benefit significantly from simply enabling this
|
significantly from simply enabling this parameter.</p>
|
||||||
parameter.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -85,16 +81,14 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"ajax": "data/arrays.txt",
|
"ajax": "data/arrays.txt",
|
||||||
"deferRender": true
|
"deferRender": true
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -103,36 +97,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -155,8 +144,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -164,8 +152,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -178,10 +165,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -190,8 +175,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -227,14 +211,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -271,8 +252,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -280,10 +260,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -291,14 +269,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,14 +19,11 @@
|
|||||||
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging
|
<p>DataTables can read data from a server via Ajax, while still performing searching, ordering, paging etc on the client-side. This is done through use of the
|
||||||
etc on the client-side. This is done through use of the <a href=
|
<a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option, which has a
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
number of options to customise how the data is retrieved from the server.</p>
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option, which has a number of options
|
|
||||||
to customise how the data is retrieved from the server.</p>
|
|
||||||
|
|
||||||
<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with
|
<p>The examples in this section demonstrate the use of Ajax loading data in DataTables, with client-side processing.</p>
|
||||||
client-side processing.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -54,14 +51,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,32 +43,24 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Generated content for a column</span></h1>
|
<h1>DataTables example <span>Generated content for a column</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>In some tables you might wish to have some content generated automatically. This can be done in a
|
<p>In some tables you might wish to have some content generated automatically. This can be done in a number of ways:</p>
|
||||||
number of ways:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
|
<li><a href="//datatables.net/reference/option/columns.render"><code class="option" title=
|
||||||
"DataTables initialisation option">columns.render<span>DT</span></code></a> for content that is
|
"DataTables initialisation option">columns.render<span>DT</span></code></a> for content that is dynamic (i.e. based upon the row's data)</li>
|
||||||
dynamic (i.e. based upon the row's data)</li>
|
|
||||||
<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
<li><a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
||||||
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> for static
|
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> for static content (i.e. simple strings)</li>
|
||||||
content (i.e. simple strings)</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>This examples shows the use of <a href=
|
<p>This examples shows the use of <a href="//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
||||||
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> to create a <em>button</em> element in the last column of the table. A simple
|
||||||
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a> to create a
|
jQuery <code>click</code> event listener is used to watch for clicks on the row, and when activated uses the <a href=
|
||||||
<em>button</em> element in the last column of the table. A simple jQuery <code>click</code> event
|
"//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()<span>DT</span></code></a> method to get the data for the
|
||||||
listener is used to watch for clicks on the row, and when activated uses the <a href=
|
row and show a bit of information about it in an <code>alert</code> box. This is a simple use case, but it can be built up to be arbitrarily complex.</p>
|
||||||
"//datatables.net/reference/api/row().data()"><code class="api" title=
|
|
||||||
"DataTables API method">row().data()<span>DT</span></code></a> method to get the data for the row and
|
|
||||||
show a bit of information about it in an <code>alert</code> box. This is a simple use case, but it can
|
|
||||||
be built up to be arbitrarily complex.</p>
|
|
||||||
|
|
||||||
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option"
|
<p>Note also that the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
title="DataTables initialisation option">columns.data<span>DT</span></code></a> option for the column
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> option for the column has been set to <code>null</code> to indicate that the column has
|
||||||
has been set to <code>null</code> to indicate that the column has no information that should be
|
no information that should be obtained data source object.</p>
|
||||||
obtained data source object.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -105,8 +97,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var table = $('#example').DataTable( {
|
var table = $('#example').DataTable( {
|
||||||
"ajax": "data/arrays.txt",
|
"ajax": "data/arrays.txt",
|
||||||
"columnDefs": [ {
|
"columnDefs": [ {
|
||||||
@ -122,8 +113,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -132,36 +122,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -184,8 +169,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -193,8 +177,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -207,10 +190,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -219,8 +200,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -256,14 +236,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -281,8 +258,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./deep.html">Nested object data (objects)</a></li>
|
<li><a href="./deep.html">Nested object data (objects)</a></li>
|
||||||
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
|
<li><a href="./objects_subarrays.html">Nested object data (arrays)</a></li>
|
||||||
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
|
<li><a href="./orthogonal-data.html">Orthogonal data</a></li>
|
||||||
<li class="active"><a href="./null_data_source.html">Generated content for a
|
<li class="active"><a href="./null_data_source.html">Generated content for a column</a></li>
|
||||||
column</a></li>
|
|
||||||
<li><a href="./custom_data_property.html">Custom data source property</a></li>
|
<li><a href="./custom_data_property.html">Custom data source property</a></li>
|
||||||
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
|
<li><a href="./custom_data_flat.html">Flat array data source</a></li>
|
||||||
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
|
<li><a href="./defer_render.html">Deferred rendering for speed</a></li>
|
||||||
@ -301,8 +277,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -310,10 +285,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -321,14 +294,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -41,19 +41,16 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Ajax data source (objects)</span></h1>
|
<h1>DataTables example <span>Ajax data source (objects)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for
|
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you
|
||||||
rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects
|
may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data
|
||||||
as the data source for each row (i.e. each row has its data described by an object) as this can make
|
much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
|
||||||
working with the data much more understandable, particularly if you are using the API and you don't
|
|
||||||
need to keep track of array indexes.</p>
|
|
||||||
|
|
||||||
<p>This can be done quite simply by using the <a href=
|
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell DataTables which property to use from the data source object
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell
|
for each column.</p>
|
||||||
DataTables which property to use from the data source object for each column.</p>
|
|
||||||
|
|
||||||
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the
|
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example
|
||||||
table. The structure of the row's data source in this example is:</p>
|
is:</p>
|
||||||
<pre>
|
<pre>
|
||||||
<code class="multiline">{
|
<code class="multiline">{
|
||||||
"name": "Tiger Nixon",
|
"name": "Tiger Nixon",
|
||||||
@ -101,8 +98,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"ajax": "data/objects.txt",
|
"ajax": "data/objects.txt",
|
||||||
"columns": [
|
"columns": [
|
||||||
@ -116,8 +112,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -126,36 +121,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -178,8 +168,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -187,8 +176,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -201,10 +189,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -213,8 +199,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -250,14 +235,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -294,8 +276,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -303,10 +284,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -314,14 +293,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -41,34 +41,27 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Nested object data (arrays)</span></h1>
|
<h1>DataTables example <span>Nested object data (arrays)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by
|
<p>The information read from an Ajax data source can be arbitrarily complex, but still be displayed by DataTables through the <a href=
|
||||||
DataTables through the <a href="//datatables.net/reference/option/columns.data"><code class="option"
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option, which
|
||||||
title="DataTables initialisation option">columns.data<span>DT</span></code></a> option, which is
|
is particularly useful for working with JSON feeds in an already defined format.</p>
|
||||||
particularly useful for working with JSON feeds in an already defined format.</p>
|
|
||||||
|
|
||||||
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
<p>The <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option has the ability to
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> option has the ability to read information not only from objects, but also from arrays
|
||||||
read information not only from objects, but also from arrays using the same dotted object syntax as for
|
using the same dotted object syntax as for objects. In addition to this, when working with an array data source <a href=
|
||||||
objects. In addition to this, when working with an array data source <a href=
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> can process
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
the data to combine and display the data in simple forms (more complex forms can be defined by using <a href=
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> can process the data to
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> as a
|
||||||
combine and display the data in simple forms (more complex forms can be defined by using <a href=
|
function).</p>
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> as a function).</p>
|
|
||||||
|
|
||||||
<p>This example shows two different aspects of using <a href=
|
<p>This example shows two different aspects of using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> to read arrays:</p>
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> to read arrays:</p>
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which
|
<li>The <em>Name</em> column is sourced from an array of two elements (first and last name), which are automatically concatenated together. This is done by
|
||||||
are automatically concatenated together. This is done by using array bracket syntax, with the
|
using array bracket syntax, with the characters between the brackets being used as the glue between elements (e.g. <code>name[, ]</code>).</li>
|
||||||
characters between the brackets being used as the glue between elements (e.g. <code>name[,
|
<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from array elements using dotted object notation (e.g.
|
||||||
]</code>).</li>
|
<code>hr.0</code>). Note that the order in which the data can be used in the columns does not have to match the order in which it is defined in the data
|
||||||
<li>The <em>Position</em>, <em>Start date</em> and <em>Salary</em> columns are read directly from
|
source. The structure of the row's data source in this example is:</li>
|
||||||
array elements using dotted object notation (e.g. <code>hr.0</code>). Note that the order in which
|
|
||||||
the data can be used in the columns does not have to match the order in which it is defined in the
|
|
||||||
data source. The structure of the row's data source in this example is:</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
<pre>
|
<pre>
|
||||||
<code class="multiline">{
|
<code class="multiline">{
|
||||||
@ -122,8 +115,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"ajax": "data/objects_subarrays.txt",
|
"ajax": "data/objects_subarrays.txt",
|
||||||
"columns": [
|
"columns": [
|
||||||
@ -137,8 +129,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -147,36 +138,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -199,8 +185,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -208,8 +193,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -222,10 +206,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -234,8 +216,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -271,14 +252,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -315,8 +293,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -324,10 +301,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -335,14 +310,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -44,19 +44,16 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Orthogonal data</span></h1>
|
<h1>DataTables example <span>Orthogonal data</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for
|
<p>To try and make life easy, by default, DataTables expects arrays to be used as the data source for rows in the table. However, this isn't always useful, and you
|
||||||
rows in the table. However, this isn't always useful, and you may wish to have DataTables use objects
|
may wish to have DataTables use objects as the data source for each row (i.e. each row has its data described by an object) as this can make working with the data
|
||||||
as the data source for each row (i.e. each row has its data described by an object) as this can make
|
much more understandable, particularly if you are using the API and you don't need to keep track of array indexes.</p>
|
||||||
working with the data much more understandable, particularly if you are using the API and you don't
|
|
||||||
need to keep track of array indexes.</p>
|
|
||||||
|
|
||||||
<p>This can be done quite simply by using the <a href=
|
<p>This can be done quite simply by using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell DataTables which property to use from the data source object
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option which you use to tell
|
for each column.</p>
|
||||||
DataTables which property to use from the data source object for each column.</p>
|
|
||||||
|
|
||||||
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the
|
<p>In this example the Ajax source returns an array of objects, which DataTables uses to display the table. The structure of the row's data source in this example
|
||||||
table. The structure of the row's data source in this example is:</p>
|
is:</p>
|
||||||
<pre>
|
<pre>
|
||||||
<code class="multiline">{
|
<code class="multiline">{
|
||||||
"name": "Tiger Nixon",
|
"name": "Tiger Nixon",
|
||||||
@ -107,8 +104,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
ajax: "data/orthogonal.txt",
|
ajax: "data/orthogonal.txt",
|
||||||
columns: [
|
columns: [
|
||||||
@ -125,8 +121,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -135,36 +130,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -187,8 +177,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -196,8 +185,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -210,10 +198,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -222,8 +208,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -259,14 +244,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -303,8 +285,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -312,10 +293,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -323,14 +302,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,28 +33,20 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
|
<h1>DataTables example <span>Ajax data source (arrays)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by
|
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
|
||||||
Ajax. This can be done, in its most simple form, by setting the <a href=
|
the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option to the
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
address of the JSON data source.</p>
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option to the address of the JSON
|
|
||||||
data source.</p>
|
|
||||||
|
|
||||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option also
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option also allows for more advanced
|
allows for more advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option"
|
||||||
configuration such as altering how the Ajax request is made. See the <a href=
|
title="DataTables initialisation option">ajax<span>DT</span></code></a> documentation or the other Ajax examples for DataTables for further information.</p>
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> documentation or the other Ajax
|
|
||||||
examples for DataTables for further information.</p>
|
|
||||||
|
|
||||||
<p>By default DataTables will assume that an array data source is to be used and will read the
|
<p>By default DataTables will assume that an array data source is to be used and will read the information to be displayed in each column from the row's array
|
||||||
information to be displayed in each column from the row's array using the column index, making working
|
using the column index, making working with arrays very simple (note that this can be changed, or objects used may using the <a href=
|
||||||
with arrays very simple (note that this can be changed, or objects used may using the <a href=
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option, shown
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
in other examples).</p>
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option, shown in other
|
|
||||||
examples).</p>
|
|
||||||
|
|
||||||
<p>The example below shows DataTables loading data for a table from arrays as the data source, where
|
<p>The example below shows DataTables loading data for a table from arrays as the data source, where the structure of the row's data source in this example is:</p>
|
||||||
the structure of the row's data source in this example is:</p>
|
|
||||||
<pre>
|
<pre>
|
||||||
<code class="multiline">[
|
<code class="multiline">[
|
||||||
"Tiger Nixon",
|
"Tiger Nixon",
|
||||||
@ -102,15 +94,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"ajax": "data/arrays.txt"
|
"ajax": "data/arrays.txt"
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -119,36 +109,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -171,8 +156,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -180,8 +164,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -194,10 +177,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -206,8 +187,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -243,14 +223,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -287,8 +264,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -296,10 +272,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -307,14 +281,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -49,17 +49,13 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Add rows</span></h1>
|
<h1>DataTables example <span>Add rows</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>New rows can be added to a DataTable very easily using the <a href=
|
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/row.add()"><code class="api" title=
|
"DataTables API method">row.add()<span>DT</span></code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an
|
||||||
"DataTables API method">row.add()<span>DT</span></code></a> API method. Simply call the API function
|
array or object). Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title=
|
||||||
with the data that is to be used for the new row (be it an array or object). Multiple rows can be added
|
|
||||||
using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title=
|
|
||||||
"DataTables API method">rows.add()<span>DT</span></code></a> method (note the plural).</p>
|
"DataTables API method">rows.add()<span>DT</span></code></a> method (note the plural).</p>
|
||||||
|
|
||||||
<p>Note that in order to see the new row in the table you must call the <a href=
|
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/draw()"><code class="api" title=
|
"DataTables API method">draw()<span>DT</span></code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
|
||||||
"DataTables API method">draw()<span>DT</span></code></a> method, which is easily done through the
|
|
||||||
chaining that the DataTables API makes use of.</p>
|
|
||||||
|
|
||||||
<p>This example shows a single row being added each time the button below is clicked upon.</p>
|
<p>This example shows a single row being added each time the button below is clicked upon.</p>
|
||||||
</div><button id="addRow">Add new row</button>
|
</div><button id="addRow">Add new row</button>
|
||||||
@ -96,8 +92,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var t = $('#example').DataTable();
|
var t = $('#example').DataTable();
|
||||||
var counter = 1;
|
var counter = 1;
|
||||||
|
|
||||||
@ -117,8 +112,7 @@ $(document).ready(function() {
|
|||||||
$('#addRow').click();
|
$('#addRow').click();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -127,36 +121,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -179,8 +168,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -188,8 +176,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -202,10 +189,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -214,8 +199,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -251,8 +235,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li class="active"><a href="./add_row.html">Add rows</a></li>
|
<li class="active"><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -293,8 +276,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -302,10 +284,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -313,14 +293,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -40,26 +40,20 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Using API in callbacks</span></h1>
|
<h1>DataTables example <span>Using API in callbacks</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>There are times when you may wish to call API functions inside the DataTables callback functions
|
<p>There are times when you may wish to call API functions inside the DataTables callback functions (for example <a href=
|
||||||
(for example <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
|
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete<span>DT</span></code></a>, <a href=
|
||||||
"DataTables initialisation option">initComplete<span>DT</span></code></a>, <a href=
|
"//datatables.net/reference/option/rowCallback"><code class="option" title="DataTables initialisation option">rowCallback<span>DT</span></code></a> etc). The
|
||||||
"//datatables.net/reference/option/rowCallback"><code class="option" title=
|
complicating issue with this is that the object hasn't fully initialised, so you can't assign the result to a variable and then use that variable in the callback.
|
||||||
"DataTables initialisation option">rowCallback<span>DT</span></code></a> etc). The complicating issue
|
However, all of DataTables' callback functions are executed in the scope of the DataTable instance, so you can use the Javascript special variable
|
||||||
with this is that the object hasn't fully initialised, so you can't assign the result to a variable and
|
<code>this</code> to access the API (<code>this.api()</code> will give an API instance) as <code>this</code> is the <code class="tag" title="HTML tag">table</code>
|
||||||
then use that variable in the callback. However, all of DataTables' callback functions are executed in
|
node.</p>
|
||||||
the scope of the DataTable instance, so you can use the Javascript special variable <code>this</code>
|
|
||||||
to access the API (<code>this.api()</code> will give an API instance) as <code>this</code> is the
|
|
||||||
<code class="tag" title="HTML tag">table</code> node.</p>
|
|
||||||
|
|
||||||
<p>In this example you will be able to see that the <a href=
|
<p>In this example you will be able to see that the <a href="//datatables.net/reference/api/%24()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/%24()"><code class="api" title=
|
"DataTables API method">$()<span>DT</span></code></a> method is used to get all cell nodes in the table's body and then act on them (in this case adding a click
|
||||||
"DataTables API method">$()<span>DT</span></code></a> method is used to get all cell nodes in the
|
event). The action here is to apply a filter to the table with the value of what is in each cell.</p>
|
||||||
table's body and then act on them (in this case adding a click event). The action here is to apply a
|
|
||||||
filter to the table with the value of what is in each cell.</p>
|
|
||||||
|
|
||||||
<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event
|
<p>It is also worth noting that this same effect could be achieved by attaching a delegated click event after the table has been initialised - but the example
|
||||||
after the table has been initialised - but the example shows the use of the API inside the
|
shows the use of the API inside the callbacks!</p>
|
||||||
callbacks!</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -555,8 +549,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"initComplete": function () {
|
"initComplete": function () {
|
||||||
var api = this.api();
|
var api = this.api();
|
||||||
@ -567,8 +560,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -577,36 +569,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -629,8 +616,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -638,8 +624,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -652,10 +637,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -664,8 +647,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -701,8 +683,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -743,8 +724,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -752,10 +732,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -763,14 +741,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -46,23 +46,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Index column</span></h1>
|
<h1>DataTables example <span>Index column</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>A fairly common requirement for highly interactive tables which are displayed on the web is to have
|
<p>A fairly common requirement for highly interactive tables which are displayed on the web is to have a column which with a 'counter' for the row number. This
|
||||||
a column which with a 'counter' for the row number. This column should not be sortable, and will change
|
column should not be sortable, and will change dynamically as the ordering and searching applied to the table is altered by the end user.</p>
|
||||||
dynamically as the ordering and searching applied to the table is altered by the end user.</p>
|
|
||||||
|
|
||||||
<p>This example shows how this can be achieved with DataTables, where the first column is the counter
|
<p>This example shows how this can be achieved with DataTables, where the first column is the counter column, and is updated when ordering or searching occurs.
|
||||||
column, and is updated when ordering or searching occurs. This is done by listening for the <a href=
|
This is done by listening for the <a href="//datatables.net/reference/event/order"><code class="event" title="DataTables event">order<span>DT</span></code></a> and
|
||||||
"//datatables.net/reference/event/order"><code class="event" title=
|
<a href="//datatables.net/reference/event/search"><code class="event" title="DataTables event">search<span>DT</span></code></a> events emitted by the table. When
|
||||||
"DataTables event">order<span>DT</span></code></a> and <a href=
|
these events are detected the <a href="//datatables.net/reference/api/column().nodes()"><code class="api" title=
|
||||||
"//datatables.net/reference/event/search"><code class="event" title=
|
"DataTables API method">column().nodes()<span>DT</span></code></a> method is used to get the TD/TH nodes for the target column and the <code>each()</code> helper
|
||||||
"DataTables event">search<span>DT</span></code></a> events emitted by the table. When these events are
|
function used to iterate over each, which have their contents updated as needed. Note that the <code>filter</code> and <code>order</code> options are using in the
|
||||||
detected the <a href="//datatables.net/reference/api/column().nodes()"><code class="api" title=
|
<a href="//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()<span>DT</span></code></a> method to get the nodes in the
|
||||||
"DataTables API method">column().nodes()<span>DT</span></code></a> method is used to get the TD/TH
|
current order and with the currently applied filter.</p>
|
||||||
nodes for the target column and the <code>each()</code> helper function used to iterate over each,
|
|
||||||
which have their contents updated as needed. Note that the <code>filter</code> and <code>order</code>
|
|
||||||
options are using in the <a href="//datatables.net/reference/api/column()"><code class="api" title=
|
|
||||||
"DataTables API method">column()<span>DT</span></code></a> method to get the nodes in the current order
|
|
||||||
and with the currently applied filter.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -558,8 +552,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var t = $('#example').DataTable( {
|
var t = $('#example').DataTable( {
|
||||||
"columnDefs": [ {
|
"columnDefs": [ {
|
||||||
"searchable": false,
|
"searchable": false,
|
||||||
@ -576,8 +569,7 @@ $(document).ready(function() {
|
|||||||
} ).draw();
|
} ).draw();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -586,36 +578,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -638,8 +625,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -647,8 +633,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -661,10 +646,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -673,8 +656,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -710,8 +692,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -752,8 +733,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -761,10 +741,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -772,14 +750,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -42,21 +42,16 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Form inputs</span></h1>
|
<h1>DataTables example <span>Form inputs</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the
|
<p>In order to perform paging, ordering, searching etc, DataTables can remove rows and cells from the document (i.e. those rows / cells which are not needed are
|
||||||
document (i.e. those rows / cells which are not needed are not inserted into the document). This
|
not inserted into the document). This increases performance and compatibility, however, it means that submitting forms which span multiple pages requires a little
|
||||||
increases performance and compatibility, however, it means that submitting forms which span multiple
|
bit of additional work to get the information that is not in the document any longer.</p>
|
||||||
pages requires a little bit of additional work to get the information that is not in the document any
|
|
||||||
longer.</p>
|
|
||||||
|
|
||||||
<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title=
|
<p>The <a href="//datatables.net/reference/api/%24()"><code class="api" title="DataTables API method">$()<span>DT</span></code></a> method can be used to get nodes
|
||||||
"DataTables API method">$()<span>DT</span></code></a> method can be used to get nodes from the document
|
from the document regardless of paging, ordering etc. This example shows <a href="//datatables.net/reference/api/%24()"><code class="api" title=
|
||||||
regardless of paging, ordering etc. This example shows <a href=
|
"DataTables API method">$()<span>DT</span></code></a> being used to get all <code class="tag" title="HTML tag">input</code> elements from the table.</p>
|
||||||
"//datatables.net/reference/api/%24()"><code class="api" title=
|
|
||||||
"DataTables API method">$()<span>DT</span></code></a> being used to get all <code class="tag" title=
|
|
||||||
"HTML tag">input</code> elements from the table.</p>
|
|
||||||
|
|
||||||
<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an
|
<p>In the example a simple <code>alert()</code> is used to show the information from the form, but an Ajax call to the server with the form data could easily be
|
||||||
Ajax call to the server with the form data could easily be performed.</p>
|
performed.</p>
|
||||||
</div><button type="submit">Submit form</button>
|
</div><button type="submit">Submit form</button>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -134,8 +129,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Ashton Cox</td>
|
<td>Ashton Cox</td>
|
||||||
<td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
|
<td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
|
||||||
<td><input type="text" id="row-3-position" name="row-3-position" value=
|
<td><input type="text" id="row-3-position" name="row-3-position" value="Junior Technical Author"></td>
|
||||||
"Junior Technical Author"></td>
|
|
||||||
<td><select size="1" id="row-3-office" name="row-3-office">
|
<td><select size="1" id="row-3-office" name="row-3-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -161,8 +155,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Cedric Kelly</td>
|
<td>Cedric Kelly</td>
|
||||||
<td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
|
<td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
|
||||||
<td><input type="text" id="row-4-position" name="row-4-position" value=
|
<td><input type="text" id="row-4-position" name="row-4-position" value="Senior Javascript Developer"></td>
|
||||||
"Senior Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-4-office" name="row-4-office">
|
<td><select size="1" id="row-4-office" name="row-4-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -214,8 +207,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Brielle Williamson</td>
|
<td>Brielle Williamson</td>
|
||||||
<td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
|
<td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
|
||||||
<td><input type="text" id="row-6-position" name="row-6-position" value=
|
<td><input type="text" id="row-6-position" name="row-6-position" value="Integration Specialist"></td>
|
||||||
"Integration Specialist"></td>
|
|
||||||
<td><select size="1" id="row-6-office" name="row-6-office">
|
<td><select size="1" id="row-6-office" name="row-6-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -267,8 +259,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Rhona Davidson</td>
|
<td>Rhona Davidson</td>
|
||||||
<td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
|
<td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
|
||||||
<td><input type="text" id="row-8-position" name="row-8-position" value=
|
<td><input type="text" id="row-8-position" name="row-8-position" value="Integration Specialist"></td>
|
||||||
"Integration Specialist"></td>
|
|
||||||
<td><select size="1" id="row-8-office" name="row-8-office">
|
<td><select size="1" id="row-8-office" name="row-8-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -294,8 +285,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Colleen Hurst</td>
|
<td>Colleen Hurst</td>
|
||||||
<td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
|
<td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
|
||||||
<td><input type="text" id="row-9-position" name="row-9-position" value=
|
<td><input type="text" id="row-9-position" name="row-9-position" value="Javascript Developer"></td>
|
||||||
"Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-9-office" name="row-9-office">
|
<td><select size="1" id="row-9-office" name="row-9-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -321,8 +311,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Sonya Frost</td>
|
<td>Sonya Frost</td>
|
||||||
<td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
|
<td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
|
||||||
<td><input type="text" id="row-10-position" name="row-10-position" value=
|
<td><input type="text" id="row-10-position" name="row-10-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-10-office" name="row-10-office">
|
<td><select size="1" id="row-10-office" name="row-10-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -400,8 +389,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Charde Marshall</td>
|
<td>Charde Marshall</td>
|
||||||
<td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
|
<td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
|
||||||
<td><input type="text" id="row-13-position" name="row-13-position" value=
|
<td><input type="text" id="row-13-position" name="row-13-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-13-office" name="row-13-office">
|
<td><select size="1" id="row-13-office" name="row-13-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -427,8 +415,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Haley Kennedy</td>
|
<td>Haley Kennedy</td>
|
||||||
<td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
|
<td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
|
||||||
<td><input type="text" id="row-14-position" name="row-14-position" value=
|
<td><input type="text" id="row-14-position" name="row-14-position" value="Senior Marketing Designer"></td>
|
||||||
"Senior Marketing Designer"></td>
|
|
||||||
<td><select size="1" id="row-14-office" name="row-14-office">
|
<td><select size="1" id="row-14-office" name="row-14-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -454,8 +441,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Tatyana Fitzpatrick</td>
|
<td>Tatyana Fitzpatrick</td>
|
||||||
<td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
|
<td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
|
||||||
<td><input type="text" id="row-15-position" name="row-15-position" value=
|
<td><input type="text" id="row-15-position" name="row-15-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-15-office" name="row-15-office">
|
<td><select size="1" id="row-15-office" name="row-15-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -481,8 +467,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Michael Silva</td>
|
<td>Michael Silva</td>
|
||||||
<td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
|
<td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
|
||||||
<td><input type="text" id="row-16-position" name="row-16-position" value=
|
<td><input type="text" id="row-16-position" name="row-16-position" value="Marketing Designer"></td>
|
||||||
"Marketing Designer"></td>
|
|
||||||
<td><select size="1" id="row-16-office" name="row-16-office">
|
<td><select size="1" id="row-16-office" name="row-16-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -508,8 +493,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Paul Byrd</td>
|
<td>Paul Byrd</td>
|
||||||
<td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
|
<td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
|
||||||
<td><input type="text" id="row-17-position" name="row-17-position" value=
|
<td><input type="text" id="row-17-position" name="row-17-position" value="Chief Financial Officer (CFO)"></td>
|
||||||
"Chief Financial Officer (CFO)"></td>
|
|
||||||
<td><select size="1" id="row-17-office" name="row-17-office">
|
<td><select size="1" id="row-17-office" name="row-17-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -535,8 +519,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Gloria Little</td>
|
<td>Gloria Little</td>
|
||||||
<td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
|
<td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
|
||||||
<td><input type="text" id="row-18-position" name="row-18-position" value=
|
<td><input type="text" id="row-18-position" name="row-18-position" value="Systems Administrator"></td>
|
||||||
"Systems Administrator"></td>
|
|
||||||
<td><select size="1" id="row-18-office" name="row-18-office">
|
<td><select size="1" id="row-18-office" name="row-18-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -562,8 +545,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Bradley Greer</td>
|
<td>Bradley Greer</td>
|
||||||
<td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
|
<td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
|
||||||
<td><input type="text" id="row-19-position" name="row-19-position" value=
|
<td><input type="text" id="row-19-position" name="row-19-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-19-office" name="row-19-office">
|
<td><select size="1" id="row-19-office" name="row-19-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -615,8 +597,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Jenette Caldwell</td>
|
<td>Jenette Caldwell</td>
|
||||||
<td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
|
<td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
|
||||||
<td><input type="text" id="row-21-position" name="row-21-position" value=
|
<td><input type="text" id="row-21-position" name="row-21-position" value="Development Lead"></td>
|
||||||
"Development Lead"></td>
|
|
||||||
<td><select size="1" id="row-21-office" name="row-21-office">
|
<td><select size="1" id="row-21-office" name="row-21-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -642,8 +623,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Yuri Berry</td>
|
<td>Yuri Berry</td>
|
||||||
<td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
|
<td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
|
||||||
<td><input type="text" id="row-22-position" name="row-22-position" value=
|
<td><input type="text" id="row-22-position" name="row-22-position" value="Chief Marketing Officer (CMO)"></td>
|
||||||
"Chief Marketing Officer (CMO)"></td>
|
|
||||||
<td><select size="1" id="row-22-office" name="row-22-office">
|
<td><select size="1" id="row-22-office" name="row-22-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -669,8 +649,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Caesar Vance</td>
|
<td>Caesar Vance</td>
|
||||||
<td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
|
<td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
|
||||||
<td><input type="text" id="row-23-position" name="row-23-position" value=
|
<td><input type="text" id="row-23-position" name="row-23-position" value="Pre-Sales Support"></td>
|
||||||
"Pre-Sales Support"></td>
|
|
||||||
<td><select size="1" id="row-23-office" name="row-23-office">
|
<td><select size="1" id="row-23-office" name="row-23-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -696,8 +675,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Doris Wilder</td>
|
<td>Doris Wilder</td>
|
||||||
<td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
|
<td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
|
||||||
<td><input type="text" id="row-24-position" name="row-24-position" value=
|
<td><input type="text" id="row-24-position" name="row-24-position" value="Sales Assistant"></td>
|
||||||
"Sales Assistant"></td>
|
|
||||||
<td><select size="1" id="row-24-office" name="row-24-office">
|
<td><select size="1" id="row-24-office" name="row-24-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -723,8 +701,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Angelica Ramos</td>
|
<td>Angelica Ramos</td>
|
||||||
<td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
|
<td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
|
||||||
<td><input type="text" id="row-25-position" name="row-25-position" value=
|
<td><input type="text" id="row-25-position" name="row-25-position" value="Chief Executive Officer (CEO)"></td>
|
||||||
"Chief Executive Officer (CEO)"></td>
|
|
||||||
<td><select size="1" id="row-25-office" name="row-25-office">
|
<td><select size="1" id="row-25-office" name="row-25-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -776,8 +753,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Jennifer Chang</td>
|
<td>Jennifer Chang</td>
|
||||||
<td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
|
<td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
|
||||||
<td><input type="text" id="row-27-position" name="row-27-position" value=
|
<td><input type="text" id="row-27-position" name="row-27-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-27-office" name="row-27-office">
|
<td><select size="1" id="row-27-office" name="row-27-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -803,8 +779,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Brenden Wagner</td>
|
<td>Brenden Wagner</td>
|
||||||
<td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
|
<td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
|
||||||
<td><input type="text" id="row-28-position" name="row-28-position" value=
|
<td><input type="text" id="row-28-position" name="row-28-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-28-office" name="row-28-office">
|
<td><select size="1" id="row-28-office" name="row-28-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -830,8 +805,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Fiona Green</td>
|
<td>Fiona Green</td>
|
||||||
<td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
|
<td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
|
||||||
<td><input type="text" id="row-29-position" name="row-29-position" value=
|
<td><input type="text" id="row-29-position" name="row-29-position" value="Chief Operating Officer (COO)"></td>
|
||||||
"Chief Operating Officer (COO)"></td>
|
|
||||||
<td><select size="1" id="row-29-office" name="row-29-office">
|
<td><select size="1" id="row-29-office" name="row-29-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -857,8 +831,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Shou Itou</td>
|
<td>Shou Itou</td>
|
||||||
<td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
|
<td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
|
||||||
<td><input type="text" id="row-30-position" name="row-30-position" value=
|
<td><input type="text" id="row-30-position" name="row-30-position" value="Regional Marketing"></td>
|
||||||
"Regional Marketing"></td>
|
|
||||||
<td><select size="1" id="row-30-office" name="row-30-office">
|
<td><select size="1" id="row-30-office" name="row-30-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -884,8 +857,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Michelle House</td>
|
<td>Michelle House</td>
|
||||||
<td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
|
<td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
|
||||||
<td><input type="text" id="row-31-position" name="row-31-position" value=
|
<td><input type="text" id="row-31-position" name="row-31-position" value="Integration Specialist"></td>
|
||||||
"Integration Specialist"></td>
|
|
||||||
<td><select size="1" id="row-31-office" name="row-31-office">
|
<td><select size="1" id="row-31-office" name="row-31-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -937,8 +909,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Prescott Bartlett</td>
|
<td>Prescott Bartlett</td>
|
||||||
<td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
|
<td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
|
||||||
<td><input type="text" id="row-33-position" name="row-33-position" value=
|
<td><input type="text" id="row-33-position" name="row-33-position" value="Technical Author"></td>
|
||||||
"Technical Author"></td>
|
|
||||||
<td><select size="1" id="row-33-office" name="row-33-office">
|
<td><select size="1" id="row-33-office" name="row-33-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -990,8 +961,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Martena Mccray</td>
|
<td>Martena Mccray</td>
|
||||||
<td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
|
<td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
|
||||||
<td><input type="text" id="row-35-position" name="row-35-position" value=
|
<td><input type="text" id="row-35-position" name="row-35-position" value="Post-Sales support"></td>
|
||||||
"Post-Sales support"></td>
|
|
||||||
<td><select size="1" id="row-35-office" name="row-35-office">
|
<td><select size="1" id="row-35-office" name="row-35-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1017,8 +987,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Unity Butler</td>
|
<td>Unity Butler</td>
|
||||||
<td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
|
<td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
|
||||||
<td><input type="text" id="row-36-position" name="row-36-position" value=
|
<td><input type="text" id="row-36-position" name="row-36-position" value="Marketing Designer"></td>
|
||||||
"Marketing Designer"></td>
|
|
||||||
<td><select size="1" id="row-36-office" name="row-36-office">
|
<td><select size="1" id="row-36-office" name="row-36-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1096,8 +1065,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Vivian Harrell</td>
|
<td>Vivian Harrell</td>
|
||||||
<td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
|
<td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
|
||||||
<td><input type="text" id="row-39-position" name="row-39-position" value=
|
<td><input type="text" id="row-39-position" name="row-39-position" value="Financial Controller"></td>
|
||||||
"Financial Controller"></td>
|
|
||||||
<td><select size="1" id="row-39-office" name="row-39-office">
|
<td><select size="1" id="row-39-office" name="row-39-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1175,8 +1143,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Olivia Liang</td>
|
<td>Olivia Liang</td>
|
||||||
<td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
|
<td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
|
||||||
<td><input type="text" id="row-42-position" name="row-42-position" value=
|
<td><input type="text" id="row-42-position" name="row-42-position" value="Support Engineer"></td>
|
||||||
"Support Engineer"></td>
|
|
||||||
<td><select size="1" id="row-42-office" name="row-42-office">
|
<td><select size="1" id="row-42-office" name="row-42-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1202,8 +1169,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Bruno Nash</td>
|
<td>Bruno Nash</td>
|
||||||
<td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
|
<td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
|
||||||
<td><input type="text" id="row-43-position" name="row-43-position" value=
|
<td><input type="text" id="row-43-position" name="row-43-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-43-office" name="row-43-office">
|
<td><select size="1" id="row-43-office" name="row-43-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1229,8 +1195,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Sakura Yamamoto</td>
|
<td>Sakura Yamamoto</td>
|
||||||
<td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
|
<td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
|
||||||
<td><input type="text" id="row-44-position" name="row-44-position" value=
|
<td><input type="text" id="row-44-position" name="row-44-position" value="Support Engineer"></td>
|
||||||
"Support Engineer"></td>
|
|
||||||
<td><select size="1" id="row-44-office" name="row-44-office">
|
<td><select size="1" id="row-44-office" name="row-44-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1282,8 +1247,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Finn Camacho</td>
|
<td>Finn Camacho</td>
|
||||||
<td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
|
<td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
|
||||||
<td><input type="text" id="row-46-position" name="row-46-position" value=
|
<td><input type="text" id="row-46-position" name="row-46-position" value="Support Engineer"></td>
|
||||||
"Support Engineer"></td>
|
|
||||||
<td><select size="1" id="row-46-office" name="row-46-office">
|
<td><select size="1" id="row-46-office" name="row-46-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1309,8 +1273,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Serge Baldwin</td>
|
<td>Serge Baldwin</td>
|
||||||
<td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
|
<td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
|
||||||
<td><input type="text" id="row-47-position" name="row-47-position" value=
|
<td><input type="text" id="row-47-position" name="row-47-position" value="Data Coordinator"></td>
|
||||||
"Data Coordinator"></td>
|
|
||||||
<td><select size="1" id="row-47-office" name="row-47-office">
|
<td><select size="1" id="row-47-office" name="row-47-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1336,8 +1299,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Zenaida Frank</td>
|
<td>Zenaida Frank</td>
|
||||||
<td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
|
<td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
|
||||||
<td><input type="text" id="row-48-position" name="row-48-position" value=
|
<td><input type="text" id="row-48-position" name="row-48-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-48-office" name="row-48-office">
|
<td><select size="1" id="row-48-office" name="row-48-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1363,8 +1325,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Zorita Serrano</td>
|
<td>Zorita Serrano</td>
|
||||||
<td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
|
<td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
|
||||||
<td><input type="text" id="row-49-position" name="row-49-position" value=
|
<td><input type="text" id="row-49-position" name="row-49-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-49-office" name="row-49-office">
|
<td><select size="1" id="row-49-office" name="row-49-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1390,8 +1351,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Jennifer Acosta</td>
|
<td>Jennifer Acosta</td>
|
||||||
<td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
|
<td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
|
||||||
<td><input type="text" id="row-50-position" name="row-50-position" value=
|
<td><input type="text" id="row-50-position" name="row-50-position" value="Junior Javascript Developer"></td>
|
||||||
"Junior Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-50-office" name="row-50-office">
|
<td><select size="1" id="row-50-office" name="row-50-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1417,8 +1377,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Cara Stevens</td>
|
<td>Cara Stevens</td>
|
||||||
<td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
|
<td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
|
||||||
<td><input type="text" id="row-51-position" name="row-51-position" value=
|
<td><input type="text" id="row-51-position" name="row-51-position" value="Sales Assistant"></td>
|
||||||
"Sales Assistant"></td>
|
|
||||||
<td><select size="1" id="row-51-office" name="row-51-office">
|
<td><select size="1" id="row-51-office" name="row-51-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1444,8 +1403,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Hermione Butler</td>
|
<td>Hermione Butler</td>
|
||||||
<td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
|
<td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
|
||||||
<td><input type="text" id="row-52-position" name="row-52-position" value=
|
<td><input type="text" id="row-52-position" name="row-52-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-52-office" name="row-52-office">
|
<td><select size="1" id="row-52-office" name="row-52-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1471,8 +1429,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Lael Greer</td>
|
<td>Lael Greer</td>
|
||||||
<td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
|
<td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
|
||||||
<td><input type="text" id="row-53-position" name="row-53-position" value=
|
<td><input type="text" id="row-53-position" name="row-53-position" value="Systems Administrator"></td>
|
||||||
"Systems Administrator"></td>
|
|
||||||
<td><select size="1" id="row-53-office" name="row-53-office">
|
<td><select size="1" id="row-53-office" name="row-53-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1524,8 +1481,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Shad Decker</td>
|
<td>Shad Decker</td>
|
||||||
<td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
|
<td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
|
||||||
<td><input type="text" id="row-55-position" name="row-55-position" value=
|
<td><input type="text" id="row-55-position" name="row-55-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-55-office" name="row-55-office">
|
<td><select size="1" id="row-55-office" name="row-55-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1551,8 +1507,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Michael Bruce</td>
|
<td>Michael Bruce</td>
|
||||||
<td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
|
<td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
|
||||||
<td><input type="text" id="row-56-position" name="row-56-position" value=
|
<td><input type="text" id="row-56-position" name="row-56-position" value="Javascript Developer"></td>
|
||||||
"Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-56-office" name="row-56-office">
|
<td><select size="1" id="row-56-office" name="row-56-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1578,8 +1533,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Donna Snider</td>
|
<td>Donna Snider</td>
|
||||||
<td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
|
<td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
|
||||||
<td><input type="text" id="row-57-position" name="row-57-position" value=
|
<td><input type="text" id="row-57-position" name="row-57-position" value="Customer Support"></td>
|
||||||
"Customer Support"></td>
|
|
||||||
<td><select size="1" id="row-57-office" name="row-57-office">
|
<td><select size="1" id="row-57-office" name="row-57-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1615,8 +1569,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var table = $('#example').DataTable();
|
var table = $('#example').DataTable();
|
||||||
|
|
||||||
$('button').click( function() {
|
$('button').click( function() {
|
||||||
@ -1629,8 +1582,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -1639,36 +1591,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -1691,8 +1638,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -1700,8 +1646,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -1714,10 +1659,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -1726,8 +1669,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1763,8 +1705,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -1805,8 +1746,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1814,10 +1754,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -1825,14 +1763,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -53,19 +53,14 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Highlighting rows and columns</span></h1>
|
<h1>DataTables example <span>Highlighting rows and columns</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor
|
<p>Highlighting rows and columns have be quite useful for drawing attention to where the user's cursor is in a table, particularly if you have a lot of narrow
|
||||||
is in a table, particularly if you have a lot of narrow columns. Of course the highlighting of a row is
|
columns. Of course the highlighting of a row is easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
|
||||||
easy enough using CSS, but for column highlighting, you need to use a little bit of Javascript.</p>
|
|
||||||
|
|
||||||
<p>This example shows that in action on DataTable by making use of the <a href=
|
<p>This example shows that in action on DataTable by making use of the <a href="//datatables.net/reference/api/cell().index()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/cell().index()"><code class="api" title=
|
"DataTables API method">cell().index()<span>DT</span></code></a> method to get the index of the column that is to be operated on, and then the <a href=
|
||||||
"DataTables API method">cell().index()<span>DT</span></code></a> method to get the index of the column
|
"//datatables.net/reference/api/cells().nodes()"><code class="api" title="DataTables API method">cells().nodes()<span>DT</span></code></a> and <a href=
|
||||||
that is to be operated on, and then the <a href=
|
"//datatables.net/reference/api/column().nodes()"><code class="api" title="DataTables API method">column().nodes()<span>DT</span></code></a> methods to remove old
|
||||||
"//datatables.net/reference/api/cells().nodes()"><code class="api" title=
|
classes and apply the new highlighted class, respectively.</p>
|
||||||
"DataTables API method">cells().nodes()<span>DT</span></code></a> and <a href=
|
|
||||||
"//datatables.net/reference/api/column().nodes()"><code class="api" title=
|
|
||||||
"DataTables API method">column().nodes()<span>DT</span></code></a> methods to remove old classes and
|
|
||||||
apply the new highlighted class, respectively.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
|
<table id="example" class="row-border hover order-column" cellspacing="0" width="100%">
|
||||||
@ -561,8 +556,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var lastIdx = null;
|
var lastIdx = null;
|
||||||
var table = $('#example').DataTable();
|
var table = $('#example').DataTable();
|
||||||
|
|
||||||
@ -580,8 +574,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -590,38 +583,33 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">td.highlight {
|
||||||
below:</p><code class="multiline language-css">td.highlight {
|
|
||||||
background-color: whitesmoke !important;
|
background-color: whitesmoke !important;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -644,8 +632,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -653,8 +640,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -667,10 +653,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -679,8 +663,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -716,8 +699,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li class="active"><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li class="active"><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -758,8 +740,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -767,10 +748,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -778,14 +757,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,9 +19,8 @@
|
|||||||
<h1>DataTables example <span>API</span></h1>
|
<h1>DataTables example <span>API</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The real power of DataTables can be exploited through the use of the API that it presents. The
|
<p>The real power of DataTables can be exploited through the use of the API that it presents. The DataTables API is designed to be simple, consistent and easy to
|
||||||
DataTables API is designed to be simple, consistent and easy to use. The examples in this section show
|
use. The examples in this section show how the API may be used.</p>
|
||||||
how the API may be used.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -37,8 +36,7 @@
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -54,14 +52,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -56,28 +56,21 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
|
<h1>DataTables example <span>Individual column searching (text inputs)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The searching functionality that is provided by DataTables is very useful for quickly search through
|
<p>The searching functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is
|
||||||
the information in the table - however the search is global, and you may wish to present controls to
|
global, and you may wish to present controls to search on specific columns only.</p>
|
||||||
search on specific columns only.</p>
|
|
||||||
|
|
||||||
<p>DataTables has the ability to apply searching to a specific column through the <a href=
|
<p>DataTables has the ability to apply searching to a specific column through the <a href="//datatables.net/reference/api/column().search()"><code class="api"
|
||||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
title="DataTables API method">column().search()<span>DT</span></code></a> method (note that the name of the method is <code>search</code> not <code>filter</code>
|
||||||
"DataTables API method">column().search()<span>DT</span></code></a> method (note that the name of the
|
since <a href="//datatables.net/reference/api/filter()"><code class="api" title="DataTables API method">filter()<span>DT</span></code></a> is used to apply a
|
||||||
method is <code>search</code> not <code>filter</code> since <a href=
|
filter to a result set).</p>
|
||||||
"//datatables.net/reference/api/filter()"><code class="api" title=
|
|
||||||
"DataTables API method">filter()<span>DT</span></code></a> is used to apply a filter to a result
|
|
||||||
set).</p>
|
|
||||||
|
|
||||||
<p>The column searches are cumulative, so you can apply multiple individual column searchs, in addition
|
<p>The column searches are cumulative, so you can apply multiple individual column searchs, in addition to the global search, allowing complex searching options to
|
||||||
to the global search, allowing complex searching options to be presented to the user.</p>
|
be presented to the user.</p>
|
||||||
|
|
||||||
<p>This examples shows text elements being used with the <a href=
|
<p>This examples shows text elements being used with the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
"DataTables API method">column().search()<span>DT</span></code></a> method to add input controls in the footer of the table for each column. Note that the
|
||||||
"DataTables API method">column().search()<span>DT</span></code></a> method to add input controls in the
|
<code>*index*:visible</code> option is used for the column selector to ensure that the <a href="//datatables.net/reference/api/column()"><code class="api" title=
|
||||||
footer of the table for each column. Note that the <code>*index*:visible</code> option is used for the
|
"DataTables API method">column()<span>DT</span></code></a> method takes into account any hidden columns when selecting the column to act upon.</p>
|
||||||
column selector to ensure that the <a href="//datatables.net/reference/api/column()"><code class="api"
|
|
||||||
title="DataTables API method">column()<span>DT</span></code></a> method takes into account any hidden
|
|
||||||
columns when selecting the column to act upon.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -573,8 +566,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
// Setup - add a text input to each footer cell
|
// Setup - add a text input to each footer cell
|
||||||
$('#example tfoot th').each( function () {
|
$('#example tfoot th').each( function () {
|
||||||
var title = $('#example thead th').eq( $(this).index() ).text();
|
var title = $('#example thead th').eq( $(this).index() ).text();
|
||||||
@ -595,8 +587,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -605,40 +596,35 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">tfoot input {
|
||||||
below:</p><code class="multiline language-css">tfoot input {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -661,8 +647,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -670,8 +655,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -684,10 +668,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -696,8 +678,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -732,10 +713,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="./index.html">API</a></h3>
|
<h3><a href="./index.html">API</a></h3>
|
||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li class="active"><a href="./multi_filter.html">Individual column searching (text
|
<li class="active"><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
inputs)</a></li>
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -776,8 +755,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -785,10 +763,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -796,14 +772,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -56,43 +56,31 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Individual column searching (select inputs)</span></h1>
|
<h1>DataTables example <span>Individual column searching (select inputs)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example is almost identical to text based individual column example and provides the same
|
<p>This example is almost identical to text based individual column example and provides the same functionality, but in this case using <code class="tag" title=
|
||||||
functionality, but in this case using <code class="tag" title="HTML tag">select</code> input
|
"HTML tag">select</code> input controls.</p>
|
||||||
controls.</p>
|
|
||||||
|
|
||||||
<p>After the table is initialised, the API is used to build the <code class="tag" title=
|
<p>After the table is initialised, the API is used to build the <code class="tag" title="HTML tag">select</code> inputs through the use of the <a href=
|
||||||
"HTML tag">select</code> inputs through the use of the <a href=
|
"//datatables.net/reference/api/column().data()"><code class="api" title="DataTables API method">column().data()<span>DT</span></code></a> method to get the data
|
||||||
"//datatables.net/reference/api/column().data()"><code class="api" title=
|
for each column in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api" title=
|
||||||
"DataTables API method">column().data()<span>DT</span></code></a> method to get the data for each
|
"DataTables API method">unique()<span>DT</span></code></a> and <a href="//datatables.net/reference/api/sort()"><code class="api" title=
|
||||||
column in turn. The helper methods <a href="//datatables.net/reference/api/unique()"><code class="api"
|
"DataTables API method">sort()<span>DT</span></code></a> are also used to reduce the data for set input to unique and ordered elements. Finally the
|
||||||
title="DataTables API method">unique()<span>DT</span></code></a> and <a href=
|
<code>change</code> event from the <code class="tag" title="HTML tag">select</code> input is used to trigger a column search using the <a href=
|
||||||
"//datatables.net/reference/api/sort()"><code class="api" title=
|
"//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()<span>DT</span></code></a> method.</p>
|
||||||
"DataTables API method">sort()<span>DT</span></code></a> are also used to reduce the data for set input
|
|
||||||
to unique and ordered elements. Finally the <code>change</code> event from the <code class="tag" title=
|
|
||||||
"HTML tag">select</code> input is used to trigger a column search using the <a href=
|
|
||||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
|
||||||
"DataTables API method">column().search()<span>DT</span></code></a> method.</p>
|
|
||||||
|
|
||||||
<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
|
<p>Note that the <a href="//datatables.net/reference/api/column().search()"><code class="api" title=
|
||||||
"DataTables API method">column().search()<span>DT</span></code></a> method in this particular case
|
"DataTables API method">column().search()<span>DT</span></code></a> method in this particular case performs an exact match through the use of a custom regular
|
||||||
performs an exact match through the use of a custom regular expression and disabling DataTables built
|
expression and disabling DataTables built in smart searching. For more information on the search options in DataTables API please refer to the documentation for
|
||||||
in smart searching. For more information on the search options in DataTables API please refer to the
|
<a href="//datatables.net/reference/api/search()"><code class="api" title="DataTables API method">search()<span>DT</span></code></a>, <a href=
|
||||||
documentation for <a href="//datatables.net/reference/api/search()"><code class="api" title=
|
"//datatables.net/reference/api/column().search()"><code class="api" title="DataTables API method">column().search()<span>DT</span></code></a> and <a href=
|
||||||
"DataTables API method">search()<span>DT</span></code></a>, <a href=
|
|
||||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
|
||||||
"DataTables API method">column().search()<span>DT</span></code></a> and <a href=
|
|
||||||
"//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
|
"//datatables.net/reference/api/%24.fn.dataTable.util.escapeRegex()"><code class="api" title=
|
||||||
"DataTables API method">$.fn.dataTable.util.escapeRegex()<span>DT</span></code></a> which are used for
|
"DataTables API method">$.fn.dataTable.util.escapeRegex()<span>DT</span></code></a> which are used for searching globally, by column and escaping regular
|
||||||
searching globally, by column and escaping regular expressions respectively.</p>
|
expressions respectively.</p>
|
||||||
|
|
||||||
<p>Note also that this example shows the use of <a href=
|
<p>Note also that this example shows the use of <a href="//datatables.net/reference/option/initComplete"><code class="option" title=
|
||||||
"//datatables.net/reference/option/initComplete"><code class="option" title=
|
"DataTables initialisation option">initComplete<span>DT</span></code></a> a callback function that is triggered when the table has fully loaded. Use of this
|
||||||
"DataTables initialisation option">initComplete<span>DT</span></code></a> a callback function that is
|
callback isn't actually required in this example since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
|
||||||
triggered when the table has fully loaded. Use of this callback isn't actually required in this example
|
"//datatables.net/reference/option/initComplete"><code class="option" title="DataTables initialisation option">initComplete<span>DT</span></code></a> is useful to
|
||||||
since the data is available in the table on load, but in the case of Ajax loaded data, <a href=
|
execute code after the data has been loaded.</p>
|
||||||
"//datatables.net/reference/option/initComplete"><code class="option" title=
|
|
||||||
"DataTables initialisation option">initComplete<span>DT</span></code></a> is useful to execute code
|
|
||||||
after the data has been loaded.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -588,8 +576,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').DataTable( {
|
$('#example').DataTable( {
|
||||||
initComplete: function () {
|
initComplete: function () {
|
||||||
var api = this.api();
|
var api = this.api();
|
||||||
@ -616,8 +603,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -626,36 +612,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -678,8 +659,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -687,8 +667,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -701,10 +680,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -713,8 +690,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -750,8 +726,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li class="active"><a href="./multi_filter_select.html">Individual column searching (select
|
<li class="active"><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -792,8 +767,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -801,10 +775,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -812,14 +784,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -57,21 +57,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Search API (regular expressions)</span></h1>
|
<h1>DataTables example <span>Search API (regular expressions)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Searching a table is one of the most common user interactions with a DataTables table, and
|
<p>Searching a table is one of the most common user interactions with a DataTables table, and DataTables provides a number of methods for you to control this
|
||||||
DataTables provides a number of methods for you to control this interaction. There are APIs for the
|
interaction. There are APIs for the global search (<a href="//datatables.net/reference/api/search()"><code class="api" title=
|
||||||
global search (<a href="//datatables.net/reference/api/search()"><code class="api" title=
|
"DataTables API method">search()<span>DT</span></code></a>) and for each individual column (<a href="//datatables.net/reference/api/column().search()"><code class=
|
||||||
"DataTables API method">search()<span>DT</span></code></a>) and for each individual column (<a href=
|
"api" title="DataTables API method">column().search()<span>DT</span></code></a>).</p>
|
||||||
"//datatables.net/reference/api/column().search()"><code class="api" title=
|
|
||||||
"DataTables API method">column().search()<span>DT</span></code></a>).</p>
|
|
||||||
|
|
||||||
<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api"
|
<p>Note also that you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
||||||
title="DataTables API method">draw()<span>DT</span></code></a> method after performing the search, in
|
"DataTables API method">draw()<span>DT</span></code></a> method after performing the search, in order for the results to be displayed.</p>
|
||||||
order for the results to be displayed.</p>
|
|
||||||
|
|
||||||
<p>Each search (global or column) can be marked as a regular expression (allowing you to create very
|
<p>Each search (global or column) can be marked as a regular expression (allowing you to create very complex interactions) and as a smart search or not. When smart
|
||||||
complex interactions) and as a smart search or not. When smart searching is enabled on a particular
|
searching is enabled on a particular search, DataTables will modify the user input string to a complex regular expression which can make searching more
|
||||||
search, DataTables will modify the user input string to a complex regular expression which can make
|
intuitive.</p>
|
||||||
searching more intuitive.</p>
|
|
||||||
|
|
||||||
<p>This example allows you to "play" with the various searching options that DataTables provides.</p>
|
<p>This example allows you to "play" with the various searching options that DataTables provides.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -91,50 +87,43 @@ $(document).ready(function() {
|
|||||||
<td>Global search</td>
|
<td>Global search</td>
|
||||||
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
|
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
|
||||||
<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
|
<td align="center"><input type="checkbox" class="global_filter" id="global_regex"></td>
|
||||||
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked=
|
<td align="center"><input type="checkbox" class="global_filter" id="global_smart" checked="checked"></td>
|
||||||
"checked"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="filter_col1" data-column="0">
|
<tr id="filter_col1" data-column="0">
|
||||||
<td>Column - Name</td>
|
<td>Column - Name</td>
|
||||||
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
|
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
|
<td align="center"><input type="checkbox" class="column_filter" id="col0_regex"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked=
|
<td align="center"><input type="checkbox" class="column_filter" id="col0_smart" checked="checked"></td>
|
||||||
"checked"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="filter_col2" data-column="1">
|
<tr id="filter_col2" data-column="1">
|
||||||
<td>Column - Position</td>
|
<td>Column - Position</td>
|
||||||
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
|
<td align="center"><input type="text" class="column_filter" id="col1_filter"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
|
<td align="center"><input type="checkbox" class="column_filter" id="col1_regex"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked=
|
<td align="center"><input type="checkbox" class="column_filter" id="col1_smart" checked="checked"></td>
|
||||||
"checked"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="filter_col3" data-column="2">
|
<tr id="filter_col3" data-column="2">
|
||||||
<td>Column - Office</td>
|
<td>Column - Office</td>
|
||||||
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
|
<td align="center"><input type="text" class="column_filter" id="col2_filter"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
|
<td align="center"><input type="checkbox" class="column_filter" id="col2_regex"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked=
|
<td align="center"><input type="checkbox" class="column_filter" id="col2_smart" checked="checked"></td>
|
||||||
"checked"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="filter_col4" data-column="3">
|
<tr id="filter_col4" data-column="3">
|
||||||
<td>Column - Age</td>
|
<td>Column - Age</td>
|
||||||
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
|
<td align="center"><input type="text" class="column_filter" id="col3_filter"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
|
<td align="center"><input type="checkbox" class="column_filter" id="col3_regex"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked=
|
<td align="center"><input type="checkbox" class="column_filter" id="col3_smart" checked="checked"></td>
|
||||||
"checked"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="filter_col5" data-column="4">
|
<tr id="filter_col5" data-column="4">
|
||||||
<td>Column - Start date</td>
|
<td>Column - Start date</td>
|
||||||
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
|
<td align="center"><input type="text" class="column_filter" id="col4_filter"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
|
<td align="center"><input type="checkbox" class="column_filter" id="col4_regex"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked=
|
<td align="center"><input type="checkbox" class="column_filter" id="col4_smart" checked="checked"></td>
|
||||||
"checked"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="filter_col6" data-column="5">
|
<tr id="filter_col6" data-column="5">
|
||||||
<td>Column - Salary</td>
|
<td>Column - Salary</td>
|
||||||
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
|
<td align="center"><input type="text" class="column_filter" id="col5_filter"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
|
<td align="center"><input type="checkbox" class="column_filter" id="col5_regex"></td>
|
||||||
<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked=
|
<td align="center"><input type="checkbox" class="column_filter" id="col5_smart" checked="checked"></td>
|
||||||
"checked"></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
@ -632,8 +621,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">function filterGlobal () {
|
||||||
example:</p><code class="multiline language-js">function filterGlobal () {
|
|
||||||
$('#example').DataTable().search(
|
$('#example').DataTable().search(
|
||||||
$('#global_filter').val(),
|
$('#global_filter').val(),
|
||||||
$('#global_regex').prop('checked'),
|
$('#global_regex').prop('checked'),
|
||||||
@ -661,8 +649,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -671,36 +658,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -723,8 +705,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -732,8 +713,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -746,10 +726,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -758,8 +736,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -795,8 +772,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -837,8 +813,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -846,10 +821,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -857,14 +830,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -92,20 +92,15 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
|
<h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em>
|
<p>The DataTables API has a number of methods available for attaching child rows to a <em>parent</em> row in the DataTable. This can be used to show additional
|
||||||
row in the DataTable. This can be used to show additional information about a row, useful for cases
|
information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.</p>
|
||||||
where you wish to convey more information about a row than there is space for in the host table.</p>
|
|
||||||
|
|
||||||
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
|
<p>The example below makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title=
|
||||||
"api" title="DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a
|
"DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a row is already displayed, and if so hide it (<a href=
|
||||||
row is already displayed, and if so hide it (<a href=
|
"//datatables.net/reference/api/row().child.hide()"><code class="api" title="DataTables API method">row().child.hide()<span>DT</span></code></a>), otherwise show
|
||||||
"//datatables.net/reference/api/row().child.hide()"><code class="api" title=
|
it (<a href="//datatables.net/reference/api/row().child.show()"><code class="api" title="DataTables API method">row().child.show()<span>DT</span></code></a>). The
|
||||||
"DataTables API method">row().child.hide()<span>DT</span></code></a>), otherwise show it (<a href=
|
content of the child row is, in this example, defined by the <code>formatDetails()</code> function, but you would replace that with whatever you wanted to show the
|
||||||
"//datatables.net/reference/api/row().child.show()"><code class="api" title=
|
content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.</p>
|
||||||
"DataTables API method">row().child.show()<span>DT</span></code></a>). The content of the child row is,
|
|
||||||
in this example, defined by the <code>formatDetails()</code> function, but you would replace that with
|
|
||||||
whatever you wanted to show the content required, possibly including, for example, an Ajax call to the
|
|
||||||
server to obtain the extra information to show.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -140,8 +135,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Formatting function for row details - modify as you need */
|
||||||
example:</p><code class="multiline language-js">/* Formatting function for row details - modify as you need */
|
|
||||||
function format ( d ) {
|
function format ( d ) {
|
||||||
// `d` is the original data object for the row
|
// `d` is the original data object for the row
|
||||||
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
|
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
|
||||||
@ -196,8 +190,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -206,15 +199,13 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">td.details-control {
|
||||||
below:</p><code class="multiline language-css">td.details-control {
|
|
||||||
background: url('../resources/details_open.png') no-repeat center center;
|
background: url('../resources/details_open.png') no-repeat center center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -223,25 +214,22 @@ tr.shown td.details-control {
|
|||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -264,8 +252,7 @@ tr.shown td.details-control {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -273,8 +260,7 @@ tr.shown td.details-control {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -287,10 +273,8 @@ tr.shown td.details-control {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -299,8 +283,7 @@ tr.shown td.details-control {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -336,11 +319,9 @@ tr.shown td.details-control {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li class="active"><a href="./row_details.html">Child rows (show extra / detailed
|
<li class="active"><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
|
<li><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
<li><a href="./form.html">Form inputs</a></li>
|
<li><a href="./form.html">Form inputs</a></li>
|
||||||
@ -379,8 +360,7 @@ tr.shown td.details-control {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -388,10 +368,8 @@ tr.shown td.details-control {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -399,14 +377,11 @@ tr.shown td.details-control {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -41,16 +41,13 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
|
<h1>DataTables example <span>Row selection (multiple rows)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable.
|
<p>It can be quite useful at times to provide the user with the option to select rows in a DataTable. This can be done by simply using a click event to add /
|
||||||
This can be done by simply using a click event to add / remove a class on the table rows. The <a href=
|
remove a class on the table rows. The <a href="//datatables.net/reference/api/rows().data()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/rows().data()"><code class="api" title=
|
"DataTables API method">rows().data()<span>DT</span></code></a> method can then be used to get the data for the selected rows. In this case it is simply counting
|
||||||
"DataTables API method">rows().data()<span>DT</span></code></a> method can then be used to get the data
|
the number of selected rows, but much more complex interactions can easily be developed.</p>
|
||||||
for the selected rows. In this case it is simply counting the number of selected rows, but much more
|
|
||||||
complex interactions can easily be developed.</p>
|
|
||||||
|
|
||||||
<p>If you are looking for a more complete row selection option <a href=
|
<p>If you are looking for a more complete row selection option <a href="http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete
|
||||||
"http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete API for
|
API for selecting rows and acting upon those selected rows.</p>
|
||||||
selecting rows and acting upon those selected rows.</p>
|
|
||||||
</div><button id="button">Row count</button>
|
</div><button id="button">Row count</button>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -546,8 +543,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var table = $('#example').DataTable();
|
var table = $('#example').DataTable();
|
||||||
|
|
||||||
$('#example tbody').on( 'click', 'tr', function () {
|
$('#example tbody').on( 'click', 'tr', function () {
|
||||||
@ -559,8 +555,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -569,36 +564,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -621,8 +611,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -630,8 +619,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -644,10 +632,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -656,8 +642,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -693,8 +678,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li class="active"><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li class="active"><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -735,8 +719,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -744,10 +727,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -755,14 +736,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -47,21 +47,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
|
<h1>DataTables example <span>Row selection and deletion (single row)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows a modification of the multiple row selection example, where just a single can now
|
<p>This example shows a modification of the multiple row selection example, where just a single can now be selected. This is done simply by checking to see if the
|
||||||
be selected. This is done simply by checking to see if the row already has a selected class or not, and
|
row already has a selected class or not, and if so removing it, if not then the class is removed from any other row in the table which does have it and applied to
|
||||||
if so removing it, if not then the class is removed from any other row in the table which does have it
|
the row to be selected.</p>
|
||||||
and applied to the row to be selected.</p>
|
|
||||||
|
|
||||||
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
|
<p>Also shown is the <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
|
||||||
"DataTables API method">row().remove()<span>DT</span></code></a> method which will delete a row from a
|
"DataTables API method">row().remove()<span>DT</span></code></a> method which will delete a row from a table, and the <a href=
|
||||||
table, and the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()<span>DT</span></code></a> method with <code>false</code> as its
|
||||||
"DataTables API method">draw()<span>DT</span></code></a> method with <code>false</code> as its first
|
first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be reset to the first page).</p>
|
||||||
parameter. This will redraw the table keeping the current paging (without the <code>false</code>
|
|
||||||
parameter the paging would be reset to the first page).</p>
|
|
||||||
|
|
||||||
<p>If you are looking for a more complete row selection option <a href=
|
<p>If you are looking for a more complete row selection option <a href="http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete
|
||||||
"http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete API for
|
API for selecting rows and acting upon those selected rows.</p>
|
||||||
selecting rows and acting upon those selected rows.</p>
|
|
||||||
</div><button id="button">Delete selected row</button>
|
</div><button id="button">Delete selected row</button>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -557,8 +553,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var table = $('#example').DataTable();
|
var table = $('#example').DataTable();
|
||||||
|
|
||||||
$('#example tbody').on( 'click', 'tr', function () {
|
$('#example tbody').on( 'click', 'tr', function () {
|
||||||
@ -576,8 +571,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -586,36 +580,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -638,8 +627,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -647,8 +635,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -661,10 +648,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -673,8 +658,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -710,13 +694,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
<li class="active"><a href="./select_single_row.html">Row selection and deletion (single
|
<li class="active"><a href="./select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="./form.html">Form inputs</a></li>
|
<li><a href="./form.html">Form inputs</a></li>
|
||||||
<li><a href="./counter_columns.html">Index column</a></li>
|
<li><a href="./counter_columns.html">Index column</a></li>
|
||||||
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -753,8 +735,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -762,10 +743,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -773,14 +752,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -46,28 +46,23 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Show / hide columns dynamically</span></h1>
|
<h1>DataTables example <span>Show / hide columns dynamically</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows how you can make use of the <a href=
|
<p>This example shows how you can make use of the <a href="//datatables.net/reference/api/column().visible()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/column().visible()"><code class="api" title=
|
"DataTables API method">column().visible()<span>DT</span></code></a> API method to dynamically show and hide columns in a table. Also included here is scrolling,
|
||||||
"DataTables API method">column().visible()<span>DT</span></code></a> API method to dynamically show and
|
just to show it enabled with this API method, although that is not required for the API function to work.</p>
|
||||||
hide columns in a table. Also included here is scrolling, just to show it enabled with this API method,
|
|
||||||
although that is not required for the API function to work.</p>
|
|
||||||
|
|
||||||
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href=
|
<p>In addition to this, groups of columns can be shown and hidden at the same time using the <a href="//datatables.net/reference/api/columns()"><code class="api"
|
||||||
"//datatables.net/reference/api/columns()"><code class="api" title=
|
title="DataTables API method">columns()<span>DT</span></code></a> method to select multiple columns and then using the <a href=
|
||||||
"DataTables API method">columns()<span>DT</span></code></a> method to select multiple columns and then
|
"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()<span>DT</span></code></a> method to set
|
||||||
using the <a href="//datatables.net/reference/api/columns().visible()"><code class="api" title=
|
their state.</p>
|
||||||
"DataTables API method">columns().visible()<span>DT</span></code></a> method to set their state.</p>
|
|
||||||
|
|
||||||
<p>If you are looking for a more complete column visibility interaction controls <a href=
|
<p>If you are looking for a more complete column visibility interaction controls <a href="http://datatables.net/extras/colvis">ColVis for DataTables</a> provides a
|
||||||
"http://datatables.net/extras/colvis">ColVis for DataTables</a> provides a complete interface for
|
complete interface for allowing the user to show and hide columns in the table.</p>
|
||||||
allowing the user to show and hide columns in the table.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column=
|
Toggle column: <a class="toggle-vis" data-column="0">Name</a> - <a class="toggle-vis" data-column="1">Position</a> - <a class="toggle-vis" data-column=
|
||||||
"1">Position</a> - <a class="toggle-vis" data-column="2">Office</a> - <a class="toggle-vis"
|
"2">Office</a> - <a class="toggle-vis" data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis" data-column=
|
||||||
data-column="3">Age</a> - <a class="toggle-vis" data-column="4">Start date</a> - <a class="toggle-vis"
|
"5">Salary</a>
|
||||||
data-column="5">Salary</a>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -563,8 +558,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var table = $('#example').DataTable( {
|
var table = $('#example').DataTable( {
|
||||||
"scrollY": "200px",
|
"scrollY": "200px",
|
||||||
"paging": false
|
"paging": false
|
||||||
@ -581,8 +575,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -591,36 +584,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -643,8 +631,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -652,8 +639,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -666,10 +652,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -678,8 +662,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -715,8 +698,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -757,8 +739,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -766,10 +747,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -777,14 +756,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,8 +7,7 @@
|
|||||||
|
|
||||||
<title>DataTables example - Scrolling and jQuery UI tabs</title>
|
<title>DataTables example - Scrolling and jQuery UI tabs</title>
|
||||||
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
||||||
<link rel="stylesheet" type="text/css" href=
|
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">
|
||||||
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||||
<style type="text/css" class="init">
|
<style type="text/css" class="init">
|
||||||
@ -47,21 +46,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Scrolling and jQuery UI tabs</span></h1>
|
<h1>DataTables example <span>Scrolling and jQuery UI tabs</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed
|
<p>This example shows how DataTables with scrolling can be used together with jQuery UI tabs (or indeed any other method whereby the table is in a hidden,
|
||||||
any other method whereby the table is in a hidden, <code>display:none</code>, element when it is
|
<code>display:none</code>, element when it is initialised). The reason this requires special consideration, is that when the DataTable is initialised in a hidden
|
||||||
initialised). The reason this requires special consideration, is that when the DataTable is initialised
|
element the browser doesn't have any measurements with which to give the DataTable, and this will result in the misalignment of columns when scrolling is
|
||||||
in a hidden element the browser doesn't have any measurements with which to give the DataTable, and
|
enabled.</p>
|
||||||
this will result in the misalignment of columns when scrolling is enabled.</p>
|
|
||||||
|
|
||||||
<p>This misalignment can be corrected by the <a href=
|
<p>This misalignment can be corrected by the <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
|
||||||
"//datatables.net/reference/api/columns.adjust()"><code class="api" title=
|
"DataTables API method">columns.adjust()<span>DT</span></code></a> method when the table is made visible (i.e. it has dimensions).</p>
|
||||||
"DataTables API method">columns.adjust()<span>DT</span></code></a> method when the table is made
|
|
||||||
visible (i.e. it has dimensions).</p>
|
|
||||||
|
|
||||||
<p>This example shows how the jQuery UI <code>show</code> event can be used to trigger this method
|
<p>This example shows how the jQuery UI <code>show</code> event can be used to trigger this method call. The visible tables on the page are selected using the
|
||||||
call. The visible tables on the page are selected using the static <code>dt-api-static tables()</code>
|
static <code>dt-api-static tables()</code> method and passing the result to <a href="//datatables.net/reference/api/columns.adjust()"><code class="api" title=
|
||||||
method and passing the result to <a href="//datatables.net/reference/api/columns.adjust()"><code class=
|
"DataTables API method">columns.adjust()<span>DT</span></code></a>.</p>
|
||||||
"api" title="DataTables API method">columns.adjust()<span>DT</span></code></a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -557,8 +552,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$("#tabs").tabs( {
|
$("#tabs").tabs( {
|
||||||
"activate": function(event, ui) {
|
"activate": function(event, ui) {
|
||||||
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
|
$( $.fn.dataTable.tables( true ) ).DataTable().columns.adjust();
|
||||||
@ -573,50 +567,43 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
<li><a href=
|
<li><a href="//code.jquery.com/ui/1.10.3/jquery-ui.js">//code.jquery.com/ui/1.10.3/jquery-ui.js</a></li>
|
||||||
"//code.jquery.com/ui/1.10.3/jquery-ui.js">//code.jquery.com/ui/1.10.3/jquery-ui.js</a></li>
|
|
||||||
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
|
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
|
||||||
"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
|
|
||||||
<li><a href=
|
<li><a href=
|
||||||
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
|
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -639,8 +626,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -648,8 +634,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -662,10 +647,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -674,8 +657,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -711,8 +693,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./add_row.html">Add rows</a></li>
|
<li><a href="./add_row.html">Add rows</a></li>
|
||||||
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
<li><a href="./multi_filter.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./multi_filter_select.html">Individual column searching (select
|
<li><a href="./multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
<li><a href="./highlight.html">Highlighting rows and columns</a></li>
|
||||||
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
<li><a href="./row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
<li><a href="./select_row.html">Row selection (multiple rows)</a></li>
|
||||||
@ -721,8 +702,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./counter_columns.html">Index column</a></li>
|
<li><a href="./counter_columns.html">Index column</a></li>
|
||||||
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="./show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
|
<li><a href="./api_in_init.html">Using API in callbacks</a></li>
|
||||||
<li class="active"><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI
|
<li class="active"><a href="./tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
|
||||||
tabs</a></li>
|
|
||||||
<li><a href="./regex.html">Search API (regular expressions)</a></li>
|
<li><a href="./regex.html">Search API (regular expressions)</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
@ -754,8 +734,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -763,10 +742,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -774,14 +751,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,36 +33,29 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Alternative pagination</span></h1>
|
<h1>DataTables example <span>Alternative pagination</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page
|
<p>The default page control presented by DataTables (forward and backward buttons with up to 7 page numbers in-between) is fine for most situations, but there are
|
||||||
numbers in-between) is fine for most situations, but there are cases where you may wish to customise
|
cases where you may wish to customise the options presented to the end user. This is done through DataTables' extensible pagination mechanism, the <a href=
|
||||||
the options presented to the end user. This is done through DataTables' extensible pagination
|
"//datatables.net/reference/option/pagingType"><code class="option" title="DataTables initialisation option">pagingType<span>DT</span></code></a> option.</p>
|
||||||
mechanism, the <a href="//datatables.net/reference/option/pagingType"><code class="option" title=
|
|
||||||
"DataTables initialisation option">pagingType<span>DT</span></code></a> option.</p>
|
|
||||||
|
|
||||||
<p>There are four built-in options for which pagination controls DataTables should show:</p>
|
<p>There are four built-in options for which pagination controls DataTables should show:</p>
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li><code class="string" title="String">simple</code> - 'Previous' and 'Next' buttons only</li>
|
<li><code class="string" title="String">simple</code> - 'Previous' and 'Next' buttons only</li>
|
||||||
<li><code class="string" title="String">simple_numbers</code> - 'Previous' and 'Next' buttons, plus
|
<li><code class="string" title="String">simple_numbers</code> - 'Previous' and 'Next' buttons, plus page numbers</li>
|
||||||
page numbers</li>
|
<li><code class="string" title="String">full</code> - 'First', 'Previous', 'Next' and 'Last' buttons</li>
|
||||||
<li><code class="string" title="String">full</code> - 'First', 'Previous', 'Next' and 'Last'
|
<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and 'Last' buttons, plus page numbers</li>
|
||||||
buttons</li>
|
|
||||||
<li><code class="string" title="String">full_numbers</code> - 'First', 'Previous', 'Next' and
|
|
||||||
'Last' buttons, plus page numbers</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation
|
<p>The language strings of 'First', 'Previous' etc can be optionally through the internationalisation options of DataTables; <a href=
|
||||||
options of DataTables; <a href="//datatables.net/reference/option/language.paginate.first"><code class=
|
"//datatables.net/reference/option/language.paginate.first"><code class="option" title=
|
||||||
"option" title="DataTables initialisation option">language.paginate.first<span>DT</span></code></a>,
|
"DataTables initialisation option">language.paginate.first<span>DT</span></code></a>, <a href=
|
||||||
<a href="//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
|
"//datatables.net/reference/option/language.paginate.previous"><code class="option" title=
|
||||||
"DataTables initialisation option">language.paginate.previous<span>DT</span></code></a> etc.</p>
|
"DataTables initialisation option">language.paginate.previous<span>DT</span></code></a> etc.</p>
|
||||||
|
|
||||||
<p>Additional options for the buttons that are shown can be added through the use of pagination type
|
<p>Additional options for the buttons that are shown can be added through the use of pagination type plug-ins. Furthermore, how the buttons are actually shown can
|
||||||
plug-ins. Furthermore, how the buttons are actually shown can be altered through the use of plug-in
|
be altered through the use of plug-in pagination renderers.</p>
|
||||||
pagination renderers.</p>
|
|
||||||
|
|
||||||
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of
|
<p>The example below shows the <code class="string" title="String">full_numbers</code> type of pagination.</p>
|
||||||
pagination.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -558,15 +551,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"pagingType": "full_numbers"
|
"pagingType": "full_numbers"
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -575,36 +566,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -648,10 +634,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -660,8 +644,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -697,14 +680,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -741,8 +721,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -750,10 +729,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -761,14 +738,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -36,27 +36,21 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Language - Comma decimal place</span></h1>
|
<h1>DataTables example <span>Language - Comma decimal place</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>A dot (<code>.</code>) is used to mark the decimal place in Javascript, however, <a href=
|
<p>A dot (<code>.</code>) is used to mark the decimal place in Javascript, however, <a href="http://en.wikipedia.org/wiki/Decimal_mark">many parts of the world use
|
||||||
"http://en.wikipedia.org/wiki/Decimal_mark">many parts of the world use a comma</a> (<code>,</code>)
|
a comma</a> (<code>,</code>) and other characters such as the Unicode decimal separator (<code>⎖</code>) or a dash (<code>-</code>) are often used to show
|
||||||
and other characters such as the Unicode decimal separator (<code>⎖</code>) or a dash
|
the decimal place in a displayed number.</p>
|
||||||
(<code>-</code>) are often used to show the decimal place in a displayed number.</p>
|
|
||||||
|
|
||||||
<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however,
|
<p>When reading such numbers, Javascript won't automatically recognise them as numbers, however, DataTables' type detection and sorting methods can be instructed
|
||||||
DataTables' type detection and sorting methods can be instructed through the <a href=
|
through the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title=
|
||||||
"//datatables.net/reference/option/language.decimal"><code class="option" title=
|
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option which character is used as the decimal place in your numbers. This will be
|
||||||
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option which character is
|
used to correctly adjust DataTables' type detection and sorting algorithms to sort numbers in your table.</p>
|
||||||
used as the decimal place in your numbers. This will be used to correctly adjust DataTables' type
|
|
||||||
detection and sorting algorithms to sort numbers in your table.</p>
|
|
||||||
|
|
||||||
<p>Any character can be passed in using the <a href=
|
<p>Any character can be passed in using the <a href="//datatables.net/reference/option/language.decimal"><code class="option" title=
|
||||||
"//datatables.net/reference/option/language.decimal"><code class="option" title=
|
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option, although the decimal place character used in a single table must be
|
||||||
"DataTables initialisation option">language.decimal<span>DT</span></code></a> option, although the
|
consistent (i.e. numbers with a dot decimal place and comma decimal place cannot both appear in the same table). Different tables on the same page can use
|
||||||
decimal place character used in a single table must be consistent (i.e. numbers with a dot decimal
|
different decimal characters if required.</p>
|
||||||
place and comma decimal place cannot both appear in the same table). Different tables on the same page
|
|
||||||
can use different decimal characters if required.</p>
|
|
||||||
|
|
||||||
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the
|
<p>The example below shows a comma being used as the decimal place in the currency numbers shown in the final column.</p>
|
||||||
final column.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -552,8 +546,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"language": {
|
"language": {
|
||||||
"decimal": ",",
|
"decimal": ",",
|
||||||
@ -562,8 +555,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -572,36 +564,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -645,10 +632,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -657,8 +642,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -694,14 +678,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -738,8 +719,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -747,10 +727,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -758,14 +736,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,16 +31,12 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Complex headers (rowspan and colspan)</span></h1>
|
<h1>DataTables example <span>Complex headers (rowspan and colspan)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When using tables to display data, you will often wish to display column information in groups.
|
<p>When using tables to display data, you will often wish to display column information in groups. DataTables fully supports <code>colspan</code> and
|
||||||
DataTables fully supports <code>colspan</code> and <code>rowspan</code> in the table's header,
|
<code>rowspan</code> in the table's header, assigning the required order listeners to the TH element suitable for that column.</p>
|
||||||
assigning the required order listeners to the TH element suitable for that column.</p>
|
|
||||||
|
|
||||||
<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default
|
<p>Each column must have one TH cell which is unique to it for the listeners to be added. By default DataTables will use the bottom unique cell for the column to
|
||||||
DataTables will use the bottom unique cell for the column to attach the order listener, if more than
|
attach the order listener, if more than one cell for a column if found. The <a href="//datatables.net/reference/option/orderCellsTop"><code class="option" title=
|
||||||
one cell for a column if found. The <a href=
|
"DataTables initialisation option">orderCellsTop<span>DT</span></code></a> option can be used to tell DataTables to use the top cell if you prefer.</p>
|
||||||
"//datatables.net/reference/option/orderCellsTop"><code class="option" title=
|
|
||||||
"DataTables initialisation option">orderCellsTop<span>DT</span></code></a> option can be used to tell
|
|
||||||
DataTables to use the top cell if you prefer.</p>
|
|
||||||
|
|
||||||
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
|
<p>The example shown below has two sets of grouped information, grouped by colspan in the header.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -542,13 +538,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -557,36 +551,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -609,8 +598,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
|
<li><a href="./multi_col_sort.html">Multi-column ordering</a></li>
|
||||||
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
<li><a href="./multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="./hidden_columns.html">Hidden columns</a></li>
|
<li><a href="./hidden_columns.html">Hidden columns</a></li>
|
||||||
<li class="active"><a href="./complex_header.html">Complex headers (rowspan and
|
<li class="active"><a href="./complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="./dom.html">DOM positioning</a></li>
|
<li><a href="./dom.html">DOM positioning</a></li>
|
||||||
<li><a href="./flexible_width.html">Flexible table width</a></li>
|
<li><a href="./flexible_width.html">Flexible table width</a></li>
|
||||||
<li><a href="./state_save.html">State saving</a></li>
|
<li><a href="./state_save.html">State saving</a></li>
|
||||||
@ -631,10 +619,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -643,8 +629,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -680,14 +665,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -724,8 +706,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -733,10 +714,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -744,14 +723,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,19 +33,15 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>DOM positioning</span></h1>
|
<h1>DataTables example <span>DOM positioning</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When customising DataTables for your own usage, you might find that the default position of the
|
<p>When customising DataTables for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking.
|
||||||
feature elements (filter input etc) is not quite to your liking. To address this issue DataTables takes
|
To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the <a href=
|
||||||
inspiration from the CSS 3 Advanced Layout Module and provides the <a href=
|
"//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom<span>DT</span></code></a> initialisation parameter which
|
||||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
can be set to indicate where you which particular features to appear in the DOM. You can also specify <code>div</code> wrapping containers (with an id and / or
|
||||||
"DataTables initialisation option">dom<span>DT</span></code></a> initialisation parameter which can be
|
class) to provide complete layout flexibility.</p>
|
||||||
set to indicate where you which particular features to appear in the DOM. You can also specify
|
|
||||||
<code>div</code> wrapping containers (with an id and / or class) to provide complete layout
|
|
||||||
flexibility.</p>
|
|
||||||
|
|
||||||
<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href=
|
<p>Each HTML control element presented by DataTables is denoted by a single character in the <a href="//datatables.net/reference/option/dom"><code class="option"
|
||||||
"//datatables.net/reference/option/dom"><code class="option" title=
|
title="DataTables initialisation option">dom<span>DT</span></code></a> option. For example the <code>l</code> option is used for the <code>L</code>ength changing
|
||||||
"DataTables initialisation option">dom<span>DT</span></code></a> option. For example the <code>l</code>
|
input option.</p>
|
||||||
option is used for the <code>L</code>ength changing input option.</p>
|
|
||||||
|
|
||||||
<p>The built-in options available are:</p>
|
<p>The built-in options available are:</p>
|
||||||
|
|
||||||
@ -100,16 +96,14 @@ $(document).ready(function() {
|
|||||||
</code>
|
</code>
|
||||||
</pre>
|
</pre>
|
||||||
|
|
||||||
<p>All options (with the exception of the <code>t</code> (table) option can be specified multiple
|
<p>All options (with the exception of the <code>t</code> (table) option can be specified multiple times, for if you want to show the same control multiple times
|
||||||
times, for if you want to show the same control multiple times (pagination at the top and bottom of the
|
(pagination at the top and bottom of the table for example).</p>
|
||||||
table for example).</p>
|
|
||||||
|
|
||||||
<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class=
|
<p>Furthermore, note that additional <a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||||
"option" title="DataTables initialisation option">dom<span>DT</span></code></a> options can be added to
|
"DataTables initialisation option">dom<span>DT</span></code></a> options can be added to DataTables through the use of plug-ins.</p>
|
||||||
DataTables through the use of plug-ins.</p>
|
|
||||||
|
|
||||||
<p>In the example below, the table information is moved to the top of the table, and all the
|
<p>In the example below, the table information is moved to the top of the table, and all the interaction elements to the bottom, each wrapper in a container
|
||||||
interaction elements to the bottom, each wrapper in a container <code>div</code>.</p>
|
<code>div</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -605,15 +599,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"dom": '<"top"i>rt<"bottom"flp><"clear">'
|
"dom": '<"top"i>rt<"bottom"flp><"clear">'
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -622,36 +614,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -695,10 +682,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -707,8 +692,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -744,14 +728,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -788,8 +769,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -797,10 +777,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -808,14 +786,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,9 +35,8 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Feature enable / disable</span></h1>
|
<h1>DataTables example <span>Feature enable / disable</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a
|
<p>Disabling features that you don't wish to use for a particular table is easily done by setting a variable in the initialisation object. In the following example
|
||||||
variable in the initialisation object. In the following example only the filter feature is left enabled
|
only the filter feature is left enabled (which is enabled by default).</p>
|
||||||
(which is enabled by default).</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -533,8 +532,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"paging": false,
|
"paging": false,
|
||||||
"ordering": false,
|
"ordering": false,
|
||||||
@ -542,8 +540,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -552,36 +549,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -625,10 +617,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -637,8 +627,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -674,14 +663,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -718,8 +704,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -727,10 +712,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -738,14 +721,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,14 +35,12 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Flexible table width</span></h1>
|
<h1>DataTables example <span>Flexible table width</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Often you may want to have your table resize dynamically with the page. Typically this is done by
|
<p>Often you may want to have your table resize dynamically with the page. Typically this is done by assigning <code>width:100%</code> in your CSS, but this
|
||||||
assigning <code>width:100%</code> in your CSS, but this presents a problem for Javascript since it can
|
presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the <code>width</code>
|
||||||
be very hard to get that relative size rather than the absolute pixels. As such, if you apply the
|
attribute to the HTML table tag, it will be used as the width for the table (overruling any CSS styles).</p>
|
||||||
<code>width</code> attribute to the HTML table tag, it will be used as the width for the table
|
|
||||||
(overruling any CSS styles).</p>
|
|
||||||
|
|
||||||
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width,
|
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
|
||||||
so as the window is resized, the table will also resize dynamically.</p>
|
dynamically.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -538,13 +536,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -553,38 +549,33 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">div.container {
|
||||||
below:</p><code class="multiline language-css">div.container {
|
|
||||||
width: 80%;
|
width: 80%;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -628,10 +619,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -640,8 +629,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -677,14 +665,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -721,8 +706,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -730,10 +714,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -741,14 +723,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,22 +43,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Hidden columns</span></h1>
|
<h1>DataTables example <span>Hidden columns</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>There are times when you might find it useful to display only a sub-set of the information that was
|
<p>There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want
|
||||||
available in the original table. For example you might want to reduce the amount of data shown on
|
to reduce the amount of data shown on screen to make it clearer for the user. This is done through the <a href=
|
||||||
screen to make it clearer for the user. This is done through the <a href=
|
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible<span>DT</span></code></a> column
|
||||||
"//datatables.net/reference/option/columns.visible"><code class="option" title=
|
option.</p>
|
||||||
"DataTables initialisation option">columns.visible<span>DT</span></code></a> column option.</p>
|
|
||||||
|
|
||||||
<p>The column that is hidden is still part of the table and can be made visible through the <code>api
|
<p>The column that is hidden is still part of the table and can be made visible through the <code>api column().visible()</code> API method at a future time if you
|
||||||
column().visible()</code> API method at a future time if you wish to have columns which can be shown
|
wish to have columns which can be shown and hidden.</p>
|
||||||
and hidden.</p>
|
|
||||||
|
|
||||||
<p>Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered
|
<p>Furthermore, as the hidden data is still part of the table, it can still, optionally, be filtered upon allowing the user access to that data (for example 'tag'
|
||||||
upon allowing the user access to that data (for example 'tag' information for a row entry might
|
information for a row entry might used).</p>
|
||||||
used).</p>
|
|
||||||
|
|
||||||
<p>In the table below both the office and age version columns have been hidden, the former is not
|
<p>In the table below both the office and age version columns have been hidden, the former is not searchable, the latter is.</p>
|
||||||
searchable, the latter is.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -554,8 +550,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"columnDefs": [
|
"columnDefs": [
|
||||||
{
|
{
|
||||||
@ -571,8 +566,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -581,36 +575,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -654,10 +643,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -666,8 +653,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -703,14 +689,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -747,8 +730,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -756,10 +738,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -767,14 +747,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,9 +19,8 @@
|
|||||||
<h1>DataTables example <span>Basic initialisation</span></h1>
|
<h1>DataTables example <span>Basic initialisation</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The
|
<p>DataTables is very simple to use as a jQuery plug-in with a huge range of customisable option. The examples in this section demonstrate basic initialisation of
|
||||||
examples in this section demonstrate basic initialisation of DataTables and how it can be easily
|
DataTables and how it can be easily customised by passing an object with the options you want.</p>
|
||||||
customised by passing an object with the options you want.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -57,14 +56,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -39,10 +39,8 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Language options</span></h1>
|
<h1>DataTables example <span>Language options</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href=
|
<p>Changing the language information displayed by DataTables is as simple as passing in a <a href="//datatables.net/reference/option/language"><code class="option"
|
||||||
"//datatables.net/reference/option/language"><code class="option" title=
|
title="DataTables initialisation option">language<span>DT</span></code></a> object to the DataTable constructor.</p>
|
||||||
"DataTables initialisation option">language<span>DT</span></code></a> object to the DataTable
|
|
||||||
constructor.</p>
|
|
||||||
|
|
||||||
<p>The example above shows a different set of English string being used, rather than the defaults.</p>
|
<p>The example above shows a different set of English string being used, rather than the defaults.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -540,8 +538,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"language": {
|
"language": {
|
||||||
"lengthMenu": "Display _MENU_ records per page",
|
"lengthMenu": "Display _MENU_ records per page",
|
||||||
@ -553,8 +550,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -563,36 +559,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -636,10 +627,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -648,8 +637,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -685,14 +673,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -729,8 +714,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -738,10 +722,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -749,14 +731,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,31 +43,25 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Multi-column ordering</span></h1>
|
<h1>DataTables example <span>Multi-column ordering</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables allows ordering by multiple columns at the same time, which can be activated in a number
|
<p>DataTables allows ordering by multiple columns at the same time, which can be activated in a number of different ways:</p>
|
||||||
of different ways:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li>User shift click on a column (added the clicked column as a secondary, tertiary etc ordering
|
<li>User shift click on a column (added the clicked column as a secondary, tertiary etc ordering column).</li>
|
||||||
column).</li>
|
<li>On a per-column basis (i.e. order by a specific column and then a secondary column if the data in the first column is identical), through the <a href=
|
||||||
<li>On a per-column basis (i.e. order by a specific column and then a secondary column if the data
|
"//datatables.net/reference/option/columns.orderData"><code class="option" title="DataTables initialisation option">columns.orderData<span>DT</span></code></a>
|
||||||
in the first column is identical), through the <a href=
|
option.</li>
|
||||||
"//datatables.net/reference/option/columns.orderData"><code class="option" title=
|
<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option" title=
|
||||||
"DataTables initialisation option">columns.orderData<span>DT</span></code></a> option.</li>
|
"DataTables initialisation option">columns.orderData<span>DT</span></code></a> option to specify a multiple column order by default (for example <code>[
|
||||||
<li>Using the <a href="//datatables.net/reference/option/columns.orderData"><code class="option"
|
[0,'asc'], [1,'asc'] ]</code>).</li>
|
||||||
title="DataTables initialisation option">columns.orderData<span>DT</span></code></a> option to
|
<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()<span>DT</span></code></a> API
|
||||||
specify a multiple column order by default (for example <code>[ [0,'asc'], [1,'asc']
|
method.</li>
|
||||||
]</code>).</li>
|
|
||||||
<li>Through the <a href="//datatables.net/reference/api/order()"><code class="api" title=
|
|
||||||
"DataTables API method">order()<span>DT</span></code></a> API method.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through
|
<p>Note that, the ability for the user to shift click to order multiple columns can be disabled through the <a href=
|
||||||
the <a href="//datatables.net/reference/option/orderMulti"><code class="option" title=
|
"//datatables.net/reference/option/orderMulti"><code class="option" title="DataTables initialisation option">orderMulti<span>DT</span></code></a> option.</p>
|
||||||
"DataTables initialisation option">orderMulti<span>DT</span></code></a> option.</p>
|
|
||||||
|
|
||||||
<p>The example below shows the first column having a secondary order applied to the second column in
|
<p>The example below shows the first column having a secondary order applied to the second column in the table, vice-versa for the second column being tied
|
||||||
the table, vice-versa for the second column being tied directly to the first and the salary column to
|
directly to the first and the salary column to the first name column.</p>
|
||||||
the first name column.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -494,8 +488,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
columnDefs: [ {
|
columnDefs: [ {
|
||||||
targets: [ 0 ],
|
targets: [ 0 ],
|
||||||
@ -510,8 +503,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -520,36 +512,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -593,10 +580,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -605,8 +590,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -642,14 +626,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -686,8 +667,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -695,10 +675,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -706,14 +684,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,18 +35,15 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Multiple tables</span></h1>
|
<h1>DataTables example <span>Multiple tables</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done
|
<p>Often you might wish to initialise multiple tables with a single statement. This is trivially done by using a jQuery selector which will pick up multiple
|
||||||
by using a jQuery selector which will pick up multiple tables.</p>
|
tables.</p>
|
||||||
|
|
||||||
<p>The tables are independent for user control (i.e. user controlled paging on one table does not
|
<p>The tables are independent for user control (i.e. user controlled paging on one table does not effect the others), but they do share the initialisation
|
||||||
effect the others), but they do share the initialisation parameters given (for example if you specific
|
parameters given (for example if you specific the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to manipulate both
|
||||||
the Spanish language file, all tables will be shown in Spanish). Additionally, the API can be used to
|
together, or independently.</p>
|
||||||
manipulate both together, or independently.</p>
|
|
||||||
|
|
||||||
<p>The example below shows two tables initialised with a single line of code, through the use of the
|
<p>The example below shows two tables initialised with a single line of code, through the use of the <code>table.display</code> selector (i.e. select all elements
|
||||||
<code>table.display</code> selector (i.e. select all elements which have the class of
|
which have the class of <code>table.display</code> (which is suitable in this example, you might wish to use a different selector).</p>
|
||||||
<code>table.display</code> (which is suitable in this example, you might wish to use a different
|
|
||||||
selector).</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="" class="display" cellspacing="0" width="100%">
|
<table id="" class="display" cellspacing="0" width="100%">
|
||||||
@ -256,13 +253,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('table.display').dataTable();
|
$('table.display').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -271,38 +266,33 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">div.dataTables_wrapper {
|
||||||
below:</p><code class="multiline language-css">div.dataTables_wrapper {
|
|
||||||
margin-bottom: 3em;
|
margin-bottom: 3em;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -346,10 +336,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -358,8 +346,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -395,14 +382,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -439,8 +423,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -448,10 +431,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -459,14 +440,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -39,17 +39,13 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Scroll - horizontal</span></h1>
|
<h1>DataTables example <span>Scroll - horizontal</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables has the ability to show tables with horizontal scrolling, which is very useful for when
|
<p>DataTables has the ability to show tables with horizontal scrolling, which is very useful for when you have a wide table, but want to constrain it to a limited
|
||||||
you have a wide table, but want to constrain it to a limited horizontal display area. To enable
|
horizontal display area. To enable x-scrolling simply set the <a href="//datatables.net/reference/option/scrollX"><code class="option" title=
|
||||||
x-scrolling simply set the <a href="//datatables.net/reference/option/scrollX"><code class="option"
|
"DataTables initialisation option">scrollX<span>DT</span></code></a> parameter to be whatever you want the container wrapper's width to be (this should be 100% in
|
||||||
title="DataTables initialisation option">scrollX<span>DT</span></code></a> parameter to be whatever you
|
almost all cases with the width being constrained by the container element).</p>
|
||||||
want the container wrapper's width to be (this should be 100% in almost all cases with the width being
|
|
||||||
constrained by the container element).</p>
|
|
||||||
|
|
||||||
<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The
|
<p>The example below shows a table too wide for the containing element with x-scrolling enabled. The CSS option of <code>th, td { white-space: nowrap; }</code> is
|
||||||
CSS option of <code>th, td { white-space: nowrap; }</code> is also set to have the text content of each
|
also set to have the text content of each row on a single line (otherwise the browser will line break the text to have it fit into the available area).</p>
|
||||||
row on a single line (otherwise the browser will line break the text to have it fit into the available
|
|
||||||
area).</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -708,15 +704,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"scrollX": true
|
"scrollX": true
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -725,40 +719,35 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">th, td { white-space: nowrap; }
|
||||||
below:</p><code class="multiline language-css">th, td { white-space: nowrap; }
|
|
||||||
div.dataTables_wrapper {
|
div.dataTables_wrapper {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -802,10 +791,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -814,8 +801,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -851,14 +837,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -895,8 +878,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -904,10 +886,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -915,14 +895,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -40,8 +40,8 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Scroll - horizontal and vertical</span></h1>
|
<h1>DataTables example <span>Scroll - horizontal and vertical</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same
|
<p>In this example you can see DataTables doing both horizontal and vertical scrolling at the same time. Note also that pagination is enabled in this example, and
|
||||||
time. Note also that pagination is enabled in this example, and the scrolling accounts for this.</p>
|
the scrolling accounts for this.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -700,16 +700,14 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"scrollY": 200,
|
"scrollY": 200,
|
||||||
"scrollX": true
|
"scrollX": true
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -718,40 +716,35 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">th, td { white-space: nowrap; }
|
||||||
below:</p><code class="multiline language-css">th, td { white-space: nowrap; }
|
|
||||||
div.dataTables_wrapper {
|
div.dataTables_wrapper {
|
||||||
width: 800px;
|
width: 800px;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -795,10 +788,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -807,8 +798,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -844,14 +834,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -888,8 +875,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -897,10 +883,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -908,14 +892,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,22 +35,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Scroll - vertical</span></h1>
|
<h1>DataTables example <span>Scroll - vertical</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows the DataTables table body scrolling in the vertical direction. This can generally
|
<p>This example shows the DataTables table body scrolling in the vertical direction. This can generally be seen as an alternative method to pagination for
|
||||||
be seen as an alternative method to pagination for displaying a large table in a fairly small vertical
|
displaying a large table in a fairly small vertical area, and as such pagination has been disabled here (note that this is not mandatory, it will work just fine
|
||||||
area, and as such pagination has been disabled here (note that this is not mandatory, it will work just
|
with pagination enabled as well!).</p>
|
||||||
fine with pagination enabled as well!).</p>
|
|
||||||
|
|
||||||
<p>To enable y-scrolling simply set the <a href=
|
<p>To enable y-scrolling simply set the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
|
||||||
"//datatables.net/reference/option/scrollY"><code class="option" title=
|
"DataTables initialisation option">scrollY<span>DT</span></code></a> parameter to be whatever you want the container wrapper's height to be (any CSS measurement is
|
||||||
"DataTables initialisation option">scrollY<span>DT</span></code></a> parameter to be whatever you want
|
acceptable, or just a number which is treated as pixels).</p>
|
||||||
the container wrapper's height to be (any CSS measurement is acceptable, or just a number which is
|
|
||||||
treated as pixels).</p>
|
|
||||||
|
|
||||||
<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option"
|
<p>Note also that the <a href="//datatables.net/reference/option/scrollCollapse"><code class="option" title=
|
||||||
title="DataTables initialisation option">scrollCollapse<span>DT</span></code></a> option is enabled in
|
"DataTables initialisation option">scrollCollapse<span>DT</span></code></a> option is enabled in this example. This will have the container match the height of the
|
||||||
this example. This will have the container match the height of the rows shown in the table if that
|
rows shown in the table if that height is smaller than that given height by the <a href="//datatables.net/reference/option/scrollY"><code class="option" title=
|
||||||
height is smaller than that given height by the <a href=
|
|
||||||
"//datatables.net/reference/option/scrollY"><code class="option" title=
|
|
||||||
"DataTables initialisation option">scrollY<span>DT</span></code></a>.</p>
|
"DataTables initialisation option">scrollY<span>DT</span></code></a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -547,8 +542,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"scrollY": "200px",
|
"scrollY": "200px",
|
||||||
"scrollCollapse": true,
|
"scrollCollapse": true,
|
||||||
@ -556,8 +550,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -566,36 +559,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -639,10 +627,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -651,8 +637,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -688,14 +673,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -732,8 +714,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -741,10 +722,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -752,14 +731,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,8 +7,7 @@
|
|||||||
|
|
||||||
<title>DataTables example - Scroll - vertical with jQuery UI ThemeRoller</title>
|
<title>DataTables example - Scroll - vertical with jQuery UI ThemeRoller</title>
|
||||||
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
||||||
<link rel="stylesheet" type="text/css" href=
|
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">
|
||||||
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||||
<style type="text/css" class="init">
|
<style type="text/css" class="init">
|
||||||
@ -37,8 +36,7 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Scroll - vertical with jQuery UI ThemeRoller</span></h1>
|
<h1>DataTables example <span>Scroll - vertical with jQuery UI ThemeRoller</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example is an extension of the vertical scrolling example, showing DataTables ability to be
|
<p>This example is an extension of the vertical scrolling example, showing DataTables ability to be themed by jQuery UI's ThemeRoller.</p>
|
||||||
themed by jQuery UI's ThemeRoller.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -534,8 +532,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"scrollY": 200,
|
"scrollY": 200,
|
||||||
"scrollCollapse": true,
|
"scrollCollapse": true,
|
||||||
@ -543,8 +540,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -553,38 +549,33 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
|
||||||
"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
|
|
||||||
<li><a href=
|
<li><a href=
|
||||||
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
|
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -615,8 +606,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="./scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
|
<li><a href="./scroll_x.html">Scroll - horizontal</a></li>
|
||||||
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
<li><a href="./scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li class="active"><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li class="active"><a href="./scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
|
<li><a href="./comma-decimal.html">Language - Comma decimal place</a></li>
|
||||||
<li><a href="./language.html">Language options</a></li>
|
<li><a href="./language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -629,10 +619,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -641,8 +629,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -678,14 +665,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -722,8 +706,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -731,10 +714,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -742,14 +723,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,29 +33,23 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>State saving</span></h1>
|
<h1>DataTables example <span>State saving</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables has the option of being able to save the state of a table (its paging position, ordering
|
<p>DataTables has the option of being able to save the state of a table (its paging position, ordering state etc) so that is can be restored when the user reloads
|
||||||
state etc) so that is can be restored when the user reloads a page, or comes back to the page after
|
a page, or comes back to the page after visiting a sub-page. This state saving ability is enabled by the <a href=
|
||||||
visiting a sub-page. This state saving ability is enabled by the <a href=
|
"//datatables.net/reference/option/stateSave"><code class="option" title="DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
|
||||||
"//datatables.net/reference/option/stateSave"><code class="option" title=
|
|
||||||
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
|
|
||||||
|
|
||||||
<p>The built in state saving method uses the HTML5 <code>localStorage</code> and
|
<p>The built in state saving method uses the HTML5 <code>localStorage</code> and <code>sessionStorage</code> APIs for efficient storage of the data. Please note
|
||||||
<code>sessionStorage</code> APIs for efficient storage of the data. Please note that this means that
|
that this means that the built in state saving option <strong>will not work with IE6/7</strong> as these browsers do not support these APIs. Alternative options of
|
||||||
the built in state saving option <strong>will not work with IE6/7</strong> as these browsers do not
|
using cookies or saving the state on the server through Ajax can be used through the <a href="//datatables.net/reference/option/stateSaveCallback"><code class=
|
||||||
support these APIs. Alternative options of using cookies or saving the state on the server through Ajax
|
"option" title="DataTables initialisation option">stateSaveCallback<span>DT</span></code></a> and <a href=
|
||||||
can be used through the <a href="//datatables.net/reference/option/stateSaveCallback"><code class=
|
"//datatables.net/reference/option/stateLoadCallback"><code class="option" title="DataTables initialisation option">stateLoadCallback<span>DT</span></code></a>
|
||||||
"option" title="DataTables initialisation option">stateSaveCallback<span>DT</span></code></a> and
|
options.</p>
|
||||||
<a href="//datatables.net/reference/option/stateLoadCallback"><code class="option" title=
|
|
||||||
"DataTables initialisation option">stateLoadCallback<span>DT</span></code></a> options.</p>
|
|
||||||
|
|
||||||
<p>The duration for which the saved state is valid and can be used to restore the table state can be
|
<p>The duration for which the saved state is valid and can be used to restore the table state can be set using the <a href=
|
||||||
set using the <a href="//datatables.net/reference/option/stateDuration"><code class="option" title=
|
"//datatables.net/reference/option/stateDuration"><code class="option" title="DataTables initialisation option">stateDuration<span>DT</span></code></a>
|
||||||
"DataTables initialisation option">stateDuration<span>DT</span></code></a> initialisation parameter (2
|
initialisation parameter (2 hours by default). This parameter also controls if <code>localStorage</code> (0 or greater) or <code>sessionStorage</code> (-1) is used
|
||||||
hours by default). This parameter also controls if <code>localStorage</code> (0 or greater) or
|
to store the data.</p>
|
||||||
<code>sessionStorage</code> (-1) is used to store the data.</p>
|
|
||||||
|
|
||||||
<p>The example below simply shows state saving enabled in DataTables with the <a href=
|
<p>The example below simply shows state saving enabled in DataTables with the <a href="//datatables.net/reference/option/stateSave"><code class="option" title=
|
||||||
"//datatables.net/reference/option/stateSave"><code class="option" title=
|
|
||||||
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
|
"DataTables initialisation option">stateSave<span>DT</span></code></a> option.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -552,15 +546,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
stateSave: true
|
stateSave: true
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -569,36 +561,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -642,10 +629,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -654,8 +639,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -691,14 +675,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -735,8 +716,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -744,10 +724,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -755,14 +733,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,19 +33,15 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Default ordering (sorting)</span></h1>
|
<h1>DataTables example <span>Default ordering (sorting)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>With DataTables you can alter the ordering characteristics of the table at initialisation time.
|
<p>With DataTables you can alter the ordering characteristics of the table at initialisation time. Using the <a href=
|
||||||
Using the <a href="//datatables.net/reference/option/order"><code class="option" title=
|
"//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order<span>DT</span></code></a> initialisation parameter,
|
||||||
"DataTables initialisation option">order<span>DT</span></code></a> initialisation parameter, you can
|
you can set the table to display the data in exactly the order that you want.</p>
|
||||||
set the table to display the data in exactly the order that you want.</p>
|
|
||||||
|
|
||||||
<p>The <a href="//datatables.net/reference/option/order"><code class="option" title=
|
<p>The <a href="//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order<span>DT</span></code></a> parameter is
|
||||||
"DataTables initialisation option">order<span>DT</span></code></a> parameter is an array of arrays
|
an array of arrays where the first value of the inner array is the column to order on, and the second is <code class="string" title="String">'asc'</code>
|
||||||
where the first value of the inner array is the column to order on, and the second is <code class=
|
(ascending ordering) or <code class="string" title="String">'desc'</code> (descending ordering) as required. <a href=
|
||||||
"string" title="String">'asc'</code> (ascending ordering) or <code class="string" title=
|
"//datatables.net/reference/option/order"><code class="option" title="DataTables initialisation option">order<span>DT</span></code></a> is a 2D array to allow
|
||||||
"String">'desc'</code> (descending ordering) as required. <a href=
|
multi-column ordering to be defined.</p>
|
||||||
"//datatables.net/reference/option/order"><code class="option" title=
|
|
||||||
"DataTables initialisation option">order<span>DT</span></code></a> is a 2D array to allow multi-column
|
|
||||||
ordering to be defined.</p>
|
|
||||||
|
|
||||||
<p>The table below is ordered (descending) by the Age column.</p>
|
<p>The table below is ordered (descending) by the Age column.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -543,15 +539,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"order": [[ 3, "desc" ]]
|
"order": [[ 3, "desc" ]]
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -560,36 +554,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -633,10 +622,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -645,8 +632,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -682,14 +668,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -726,8 +709,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -735,10 +717,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -746,14 +726,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,11 +33,9 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Zero configuration</span></h1>
|
<h1>DataTables example <span>Zero configuration</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables has most features enabled by default, so all you need to do to use it with your own
|
<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function.</p>
|
||||||
tables is to call the construction function.</p>
|
|
||||||
|
|
||||||
<p>Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this
|
<p>Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this example.</p>
|
||||||
example.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -533,13 +531,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').DataTable();
|
$('#example').DataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -548,36 +544,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -621,10 +612,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -633,8 +622,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -670,14 +658,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -714,8 +699,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -723,10 +707,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -734,14 +716,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,23 +35,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
<h1>DataTables example <span>Ajax sourced data</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by
|
<p>DataTables has the ability to read data from virtually any JSON data source that can be obtained by Ajax. This can be done, in its most simple form, by setting
|
||||||
Ajax. This can be done, in its most simple form, by setting the <a href=
|
the <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option to the
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
address of the JSON data source.</p>
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option to the address of the JSON
|
|
||||||
data source.</p>
|
|
||||||
|
|
||||||
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
<p>The <a href="//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option also
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option also allows for more advanced
|
allows for more advanced configuration such as altering how the Ajax request is made. See the <a href="//datatables.net/reference/option/ajax"><code class="option"
|
||||||
configuration such as altering how the Ajax request is made. See the <a href=
|
title="DataTables initialisation option">ajax<span>DT</span></code></a> documentation and the <a href="../ajax">other Ajax examples</a> for further
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
information.</p>
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> documentation and the <a href=
|
|
||||||
"../ajax">other Ajax examples</a> for further information.</p>
|
|
||||||
|
|
||||||
<p>The example below shows DataTables loading data for a table from arrays as the data source (object
|
<p>The example below shows DataTables loading data for a table from arrays as the data source (object parameters can also be used through the <a href=
|
||||||
parameters can also be used through the <a href=
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> option ).</p>
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option ).</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -88,15 +82,13 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"ajax": '../ajax/data/arrays.txt'
|
"ajax": '../ajax/data/arrays.txt'
|
||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -105,36 +97,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -157,8 +144,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -166,8 +152,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -180,10 +165,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -192,8 +175,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -229,14 +211,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -273,8 +252,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -282,10 +260,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -293,14 +269,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -33,13 +33,11 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>HTML (DOM) sourced data</span></h1>
|
<h1>DataTables example <span>HTML (DOM) sourced data</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table
|
<p>The foundation for DataTables is progressive enhancement, so it is very adept at reading table information directly from the DOM. This example shows how easy it
|
||||||
information directly from the DOM. This example shows how easy it is to add searching, ordering and
|
is to add searching, ordering and paging to your HTML table by simply running DataTables on it.</p>
|
||||||
paging to your HTML table by simply running DataTables on it.</p>
|
|
||||||
|
|
||||||
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the
|
<p>For further and more complex examples of using DataTables with DOM sourced data, please refer to the <a href="../basic_init">basic initialisation</a> and
|
||||||
<a href="../basic_init">basic initialisation</a> and <a href="../advanced_init">advanced</a>
|
<a href="../advanced_init">advanced</a> examples.</p>
|
||||||
examples.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -535,13 +533,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -550,36 +546,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -602,8 +593,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -611,8 +601,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -625,10 +614,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -637,8 +624,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -674,14 +660,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -718,8 +701,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -727,10 +709,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -738,14 +718,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -28,8 +28,8 @@
|
|||||||
<li>Ajax sourced data with server-side processing</li>
|
<li>Ajax sourced data with server-side processing</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>Which of these options is used to populate the table with data depends upon how the table is
|
<p>Which of these options is used to populate the table with data depends upon how the table is initialised. The examples in this section show these four different
|
||||||
initialised. The examples in this section show these four different data source types.</p>
|
data source types.</p>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -52,14 +52,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -104,17 +104,14 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Javascript sourced data</span></h1>
|
<h1>DataTables example <span>Javascript sourced data</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>At times you will wish to be able to create a table from dynamic information passed directly to
|
<p>At times you will wish to be able to create a table from dynamic information passed directly to DataTables, rather than having it read from the document. This
|
||||||
DataTables, rather than having it read from the document. This is achieved using the <a href=
|
is achieved using the <a href="//datatables.net/reference/option/data"><code class="option" title="DataTables initialisation option">data<span>DT</span></code></a>
|
||||||
"//datatables.net/reference/option/data"><code class="option" title=
|
option in the initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the
|
||||||
"DataTables initialisation option">data<span>DT</span></code></a> option in the initialisation object,
|
<a href="//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a>
|
||||||
passing in an array of data to be used (like all other DataTables handled data, this can be arrays or
|
option).</p>
|
||||||
objects using the <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> option).</p>
|
|
||||||
|
|
||||||
<p>A <code><table></code> must be available on the page for DataTables to use. This examples
|
<p>A <code><table></code> must be available on the page for DataTables to use. This examples shows the element being added by Javascript and then
|
||||||
shows the element being added by Javascript and then initialising the DataTable with a set of data from
|
initialising the DataTable with a set of data from a Javascript array.</p>
|
||||||
a Javascript array.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="demo"></div>
|
<div id="demo"></div>
|
||||||
@ -129,8 +126,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var dataSet = [
|
||||||
example:</p><code class="multiline language-js">var dataSet = [
|
|
||||||
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
|
['Trident','Internet Explorer 4.0','Win 95+','4','X'],
|
||||||
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
|
['Trident','Internet Explorer 5.0','Win 95+','5','C'],
|
||||||
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
|
['Trident','Internet Explorer 5.5','Win 95+','5.5','A'],
|
||||||
@ -205,8 +201,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -215,36 +210,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -267,8 +257,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -276,8 +265,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -290,10 +278,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -302,8 +288,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -339,14 +324,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -383,8 +365,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -392,10 +373,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -403,14 +382,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,22 +35,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
|
<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
|
||||||
databases, you might want to consider using the server-side options that DataTables provides. With
|
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering actions that DataTables performs are handed off to a server
|
||||||
server-side processing enabled, all paging, searching, ordering actions that DataTables performs are
|
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
|
||||||
handed off to a server where an SQL engine (or similar) can perform these actions on the large data set
|
of the table will result in a new Ajax request being made to get the required data.</p>
|
||||||
(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=
|
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
|
||||||
"//datatables.net/reference/option/serverSide"><code class="option" title=
|
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
|
||||||
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and
|
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
||||||
providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class=
|
|
||||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
|
||||||
|
|
||||||
<p>This example shows a very simple table, matching the other examples, but in this instance using
|
<p>This example shows a very simple table, matching the other examples, but in this instance using server-side processing. For further and more complex examples of
|
||||||
server-side processing. For further and more complex examples of using server-side processing, please
|
using server-side processing, please refer to the <a href="../server_side">server-side processing</a> examples.</p>
|
||||||
refer to the <a href="../server_side">server-side processing</a> examples.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -87,8 +82,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -96,8 +90,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -106,36 +99,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -158,8 +146,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -167,8 +154,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -181,10 +167,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -193,8 +177,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -230,14 +213,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -274,8 +254,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -283,10 +262,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -294,14 +271,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,10 +19,9 @@
|
|||||||
<h1>DataTables example <span>Examples index</span></h1>
|
<h1>DataTables example <span>Examples index</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands
|
<p>One of the best ways to learn how to do anything new (including software APIs!) is to get your hands dirty as quickly as possible. These examples will show you
|
||||||
dirty as quickly as possible. These examples will show you how to perform tasks ranging from something
|
how to perform tasks ranging from something as simple as applying DataTables to an HTML table, right the way through to doing server-side processing with
|
||||||
as simple as applying DataTables to an HTML table, right the way through to doing server-side
|
pipelining and custom plug-in functions.</p>
|
||||||
processing with pipelining and custom plug-in functions.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -42,8 +41,7 @@
|
|||||||
<li><a href="./basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="./basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="./basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="./basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -51,8 +49,7 @@
|
|||||||
<li><a href="./basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="./basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="./basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="./basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="./basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="./basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="./basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -65,10 +62,8 @@
|
|||||||
<li><a href="./advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="./advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="./advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="./advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="./advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="./advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="./advanced_init/language_file.html">Language file</a></li>
|
<li><a href="./advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -77,8 +72,7 @@
|
|||||||
<li><a href="./advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="./advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="./advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -114,11 +108,9 @@
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="./api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="./api/multi_filter_select.html">Individual column searching (select
|
<li><a href="./api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="./api/highlight.html">Highlighting rows and columns</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
|
<li><a href="./api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="./api/select_row.html">Row selection (multiple rows)</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/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/form.html">Form inputs</a></li>
|
||||||
@ -157,8 +149,7 @@
|
|||||||
<li><a href="./server_side/select_rows.html">Row selection</a></li>
|
<li><a href="./server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="./server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="./server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="./server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="./server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="./server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="./server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -175,14 +166,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -54,21 +54,16 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>API plug-in methods</span></h1>
|
<h1>DataTables example <span>API plug-in methods</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add
|
<p>The DataTables API is designed to be fully extensible, with custom functions being very easy to add using the <code>$.fn.dataTable.Api.register</code> function.
|
||||||
using the <code>$.fn.dataTable.Api.register</code> function. This function takes two arguments; the
|
This function takes two arguments; the first being the name of the method to be added and its chaining hierarchy, and the second the function itself.</p>
|
||||||
first being the name of the method to be added and its chaining hierarchy, and the second the function
|
|
||||||
itself.</p>
|
|
||||||
|
|
||||||
<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the
|
<p>This example shows how a <code>sum()</code> method can easily be added to the Api so you can get the sum of a column in a single line:
|
||||||
sum of a column in a single line: <code>table.column().data().sum()</code>. Due to the chaining of the
|
<code>table.column().data().sum()</code>. Due to the chaining of the methods, this allows <code>sum()</code> to very easily give the sum for any selected column,
|
||||||
methods, this allows <code>sum()</code> to very easily give the sum for any selected column, and to
|
and to limit the sum to just the current page, filtered data or all pages. This is done using the options for the <a href=
|
||||||
limit the sum to just the current page, filtered data or all pages. This is done using the options for
|
"//datatables.net/reference/api/column()"><code class="api" title="DataTables API method">column()<span>DT</span></code></a> method and the options for its
|
||||||
the <a href="//datatables.net/reference/api/column()"><code class="api" title=
|
|
||||||
"DataTables API method">column()<span>DT</span></code></a> method and the options for its
|
|
||||||
selectors.</p>
|
selectors.</p>
|
||||||
|
|
||||||
<p>For more information about API plug-ins; creating them and their requirements, please refer to the
|
<p>For more information about API plug-ins; creating them and their requirements, please refer to the plug-in development documentation.</p>
|
||||||
plug-in development documentation.</p>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="demo">
|
<div id="demo">
|
||||||
|
|
||||||
@ -565,8 +560,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.Api.register( 'column().data().sum()', function () {
|
||||||
example:</p><code class="multiline language-js">$.fn.dataTable.Api.register( 'column().data().sum()', function () {
|
|
||||||
return this.reduce( function (a, b) {
|
return this.reduce( function (a, b) {
|
||||||
var x = parseFloat( a ) || 0;
|
var x = parseFloat( a ) || 0;
|
||||||
var y = parseFloat( b ) || 0;
|
var y = parseFloat( b ) || 0;
|
||||||
@ -591,8 +585,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -601,36 +594,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -653,8 +641,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -662,8 +649,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -676,10 +662,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -688,8 +672,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -725,14 +708,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -769,8 +749,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -787,14 +766,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -73,24 +73,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Live DOM ordering</span></h1>
|
<h1>DataTables example <span>Live DOM ordering</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows how you can use information available in the DOM to order columns. Typically
|
<p>This example shows how you can use information available in the DOM to order columns. Typically DataTables will read information to be ordered during it's
|
||||||
DataTables will read information to be ordered during it's initialisation phase, and this will not be
|
initialisation phase, and this will not be updated based on user interaction, so ordering on columns which have, for example, form elements in them, may not
|
||||||
updated based on user interaction, so ordering on columns which have, for example, form elements in
|
reflect the current value of the input. To overcome this problem, you must update the data that DataTables will order on, just prior to the order. This method is
|
||||||
them, may not reflect the current value of the input. To overcome this problem, you must update the
|
much more efficient than actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
|
||||||
data that DataTables will order on, just prior to the order. This method is much more efficient than
|
|
||||||
actually ordering using the DOM, since only one DOM query is needed for each cell to be ordered.</p>
|
|
||||||
|
|
||||||
<p>The example below shows the first two columns as normal text with ordering as you would expect. The
|
<p>The example below shows the first two columns as normal text with ordering as you would expect. The following columns all have a form input element of different
|
||||||
following columns all have a form input element of different kinds, and the information contained
|
kinds, and the information contained within is what DataTables will perform the order on, based on the value at the time of the order.</p>
|
||||||
within is what DataTables will perform the order on, based on the value at the time of the order.</p>
|
|
||||||
|
|
||||||
<p>This is a fairly simple example, but it you aren't constrained to just using form input elements,
|
<p>This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit
|
||||||
you could use anything and customise your DOM queries to suit yourself. You could also update the
|
yourself. You could also update the ordering live as a user in entered data into a form using an event handler calling <a href=
|
||||||
ordering live as a user in entered data into a form using an event handler calling <a href=
|
"//datatables.net/reference/api/order()"><code class="api" title="DataTables API method">order()<span>DT</span></code></a> or <a href=
|
||||||
"//datatables.net/reference/api/order()"><code class="api" title=
|
"//datatables.net/reference/api/draw()"><code class="api" title="DataTables API method">draw()<span>DT</span></code></a> methods.</p>
|
||||||
"DataTables API method">order()<span>DT</span></code></a> or <a href=
|
|
||||||
"//datatables.net/reference/api/draw()"><code class="api" title=
|
|
||||||
"DataTables API method">draw()<span>DT</span></code></a> methods.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -168,8 +162,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Ashton Cox</td>
|
<td>Ashton Cox</td>
|
||||||
<td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
|
<td><input type="text" id="row-3-age" name="row-3-age" value="66"></td>
|
||||||
<td><input type="text" id="row-3-position" name="row-3-position" value=
|
<td><input type="text" id="row-3-position" name="row-3-position" value="Junior Technical Author"></td>
|
||||||
"Junior Technical Author"></td>
|
|
||||||
<td><select size="1" id="row-3-office" name="row-3-office">
|
<td><select size="1" id="row-3-office" name="row-3-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -195,8 +188,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Cedric Kelly</td>
|
<td>Cedric Kelly</td>
|
||||||
<td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
|
<td><input type="text" id="row-4-age" name="row-4-age" value="22"></td>
|
||||||
<td><input type="text" id="row-4-position" name="row-4-position" value=
|
<td><input type="text" id="row-4-position" name="row-4-position" value="Senior Javascript Developer"></td>
|
||||||
"Senior Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-4-office" name="row-4-office">
|
<td><select size="1" id="row-4-office" name="row-4-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -248,8 +240,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Brielle Williamson</td>
|
<td>Brielle Williamson</td>
|
||||||
<td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
|
<td><input type="text" id="row-6-age" name="row-6-age" value="61"></td>
|
||||||
<td><input type="text" id="row-6-position" name="row-6-position" value=
|
<td><input type="text" id="row-6-position" name="row-6-position" value="Integration Specialist"></td>
|
||||||
"Integration Specialist"></td>
|
|
||||||
<td><select size="1" id="row-6-office" name="row-6-office">
|
<td><select size="1" id="row-6-office" name="row-6-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -301,8 +292,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Rhona Davidson</td>
|
<td>Rhona Davidson</td>
|
||||||
<td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
|
<td><input type="text" id="row-8-age" name="row-8-age" value="55"></td>
|
||||||
<td><input type="text" id="row-8-position" name="row-8-position" value=
|
<td><input type="text" id="row-8-position" name="row-8-position" value="Integration Specialist"></td>
|
||||||
"Integration Specialist"></td>
|
|
||||||
<td><select size="1" id="row-8-office" name="row-8-office">
|
<td><select size="1" id="row-8-office" name="row-8-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -328,8 +318,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Colleen Hurst</td>
|
<td>Colleen Hurst</td>
|
||||||
<td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
|
<td><input type="text" id="row-9-age" name="row-9-age" value="39"></td>
|
||||||
<td><input type="text" id="row-9-position" name="row-9-position" value=
|
<td><input type="text" id="row-9-position" name="row-9-position" value="Javascript Developer"></td>
|
||||||
"Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-9-office" name="row-9-office">
|
<td><select size="1" id="row-9-office" name="row-9-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -355,8 +344,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Sonya Frost</td>
|
<td>Sonya Frost</td>
|
||||||
<td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
|
<td><input type="text" id="row-10-age" name="row-10-age" value="23"></td>
|
||||||
<td><input type="text" id="row-10-position" name="row-10-position" value=
|
<td><input type="text" id="row-10-position" name="row-10-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-10-office" name="row-10-office">
|
<td><select size="1" id="row-10-office" name="row-10-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -434,8 +422,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Charde Marshall</td>
|
<td>Charde Marshall</td>
|
||||||
<td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
|
<td><input type="text" id="row-13-age" name="row-13-age" value="36"></td>
|
||||||
<td><input type="text" id="row-13-position" name="row-13-position" value=
|
<td><input type="text" id="row-13-position" name="row-13-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-13-office" name="row-13-office">
|
<td><select size="1" id="row-13-office" name="row-13-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -461,8 +448,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Haley Kennedy</td>
|
<td>Haley Kennedy</td>
|
||||||
<td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
|
<td><input type="text" id="row-14-age" name="row-14-age" value="43"></td>
|
||||||
<td><input type="text" id="row-14-position" name="row-14-position" value=
|
<td><input type="text" id="row-14-position" name="row-14-position" value="Senior Marketing Designer"></td>
|
||||||
"Senior Marketing Designer"></td>
|
|
||||||
<td><select size="1" id="row-14-office" name="row-14-office">
|
<td><select size="1" id="row-14-office" name="row-14-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -488,8 +474,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Tatyana Fitzpatrick</td>
|
<td>Tatyana Fitzpatrick</td>
|
||||||
<td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
|
<td><input type="text" id="row-15-age" name="row-15-age" value="19"></td>
|
||||||
<td><input type="text" id="row-15-position" name="row-15-position" value=
|
<td><input type="text" id="row-15-position" name="row-15-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-15-office" name="row-15-office">
|
<td><select size="1" id="row-15-office" name="row-15-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -515,8 +500,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Michael Silva</td>
|
<td>Michael Silva</td>
|
||||||
<td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
|
<td><input type="text" id="row-16-age" name="row-16-age" value="66"></td>
|
||||||
<td><input type="text" id="row-16-position" name="row-16-position" value=
|
<td><input type="text" id="row-16-position" name="row-16-position" value="Marketing Designer"></td>
|
||||||
"Marketing Designer"></td>
|
|
||||||
<td><select size="1" id="row-16-office" name="row-16-office">
|
<td><select size="1" id="row-16-office" name="row-16-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -542,8 +526,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Paul Byrd</td>
|
<td>Paul Byrd</td>
|
||||||
<td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
|
<td><input type="text" id="row-17-age" name="row-17-age" value="64"></td>
|
||||||
<td><input type="text" id="row-17-position" name="row-17-position" value=
|
<td><input type="text" id="row-17-position" name="row-17-position" value="Chief Financial Officer (CFO)"></td>
|
||||||
"Chief Financial Officer (CFO)"></td>
|
|
||||||
<td><select size="1" id="row-17-office" name="row-17-office">
|
<td><select size="1" id="row-17-office" name="row-17-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -569,8 +552,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Gloria Little</td>
|
<td>Gloria Little</td>
|
||||||
<td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
|
<td><input type="text" id="row-18-age" name="row-18-age" value="59"></td>
|
||||||
<td><input type="text" id="row-18-position" name="row-18-position" value=
|
<td><input type="text" id="row-18-position" name="row-18-position" value="Systems Administrator"></td>
|
||||||
"Systems Administrator"></td>
|
|
||||||
<td><select size="1" id="row-18-office" name="row-18-office">
|
<td><select size="1" id="row-18-office" name="row-18-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -596,8 +578,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Bradley Greer</td>
|
<td>Bradley Greer</td>
|
||||||
<td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
|
<td><input type="text" id="row-19-age" name="row-19-age" value="41"></td>
|
||||||
<td><input type="text" id="row-19-position" name="row-19-position" value=
|
<td><input type="text" id="row-19-position" name="row-19-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-19-office" name="row-19-office">
|
<td><select size="1" id="row-19-office" name="row-19-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -649,8 +630,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Jenette Caldwell</td>
|
<td>Jenette Caldwell</td>
|
||||||
<td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
|
<td><input type="text" id="row-21-age" name="row-21-age" value="30"></td>
|
||||||
<td><input type="text" id="row-21-position" name="row-21-position" value=
|
<td><input type="text" id="row-21-position" name="row-21-position" value="Development Lead"></td>
|
||||||
"Development Lead"></td>
|
|
||||||
<td><select size="1" id="row-21-office" name="row-21-office">
|
<td><select size="1" id="row-21-office" name="row-21-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -676,8 +656,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Yuri Berry</td>
|
<td>Yuri Berry</td>
|
||||||
<td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
|
<td><input type="text" id="row-22-age" name="row-22-age" value="40"></td>
|
||||||
<td><input type="text" id="row-22-position" name="row-22-position" value=
|
<td><input type="text" id="row-22-position" name="row-22-position" value="Chief Marketing Officer (CMO)"></td>
|
||||||
"Chief Marketing Officer (CMO)"></td>
|
|
||||||
<td><select size="1" id="row-22-office" name="row-22-office">
|
<td><select size="1" id="row-22-office" name="row-22-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -703,8 +682,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Caesar Vance</td>
|
<td>Caesar Vance</td>
|
||||||
<td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
|
<td><input type="text" id="row-23-age" name="row-23-age" value="21"></td>
|
||||||
<td><input type="text" id="row-23-position" name="row-23-position" value=
|
<td><input type="text" id="row-23-position" name="row-23-position" value="Pre-Sales Support"></td>
|
||||||
"Pre-Sales Support"></td>
|
|
||||||
<td><select size="1" id="row-23-office" name="row-23-office">
|
<td><select size="1" id="row-23-office" name="row-23-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -730,8 +708,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Doris Wilder</td>
|
<td>Doris Wilder</td>
|
||||||
<td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
|
<td><input type="text" id="row-24-age" name="row-24-age" value="23"></td>
|
||||||
<td><input type="text" id="row-24-position" name="row-24-position" value=
|
<td><input type="text" id="row-24-position" name="row-24-position" value="Sales Assistant"></td>
|
||||||
"Sales Assistant"></td>
|
|
||||||
<td><select size="1" id="row-24-office" name="row-24-office">
|
<td><select size="1" id="row-24-office" name="row-24-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -757,8 +734,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Angelica Ramos</td>
|
<td>Angelica Ramos</td>
|
||||||
<td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
|
<td><input type="text" id="row-25-age" name="row-25-age" value="47"></td>
|
||||||
<td><input type="text" id="row-25-position" name="row-25-position" value=
|
<td><input type="text" id="row-25-position" name="row-25-position" value="Chief Executive Officer (CEO)"></td>
|
||||||
"Chief Executive Officer (CEO)"></td>
|
|
||||||
<td><select size="1" id="row-25-office" name="row-25-office">
|
<td><select size="1" id="row-25-office" name="row-25-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -810,8 +786,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Jennifer Chang</td>
|
<td>Jennifer Chang</td>
|
||||||
<td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
|
<td><input type="text" id="row-27-age" name="row-27-age" value="28"></td>
|
||||||
<td><input type="text" id="row-27-position" name="row-27-position" value=
|
<td><input type="text" id="row-27-position" name="row-27-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-27-office" name="row-27-office">
|
<td><select size="1" id="row-27-office" name="row-27-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -837,8 +812,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Brenden Wagner</td>
|
<td>Brenden Wagner</td>
|
||||||
<td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
|
<td><input type="text" id="row-28-age" name="row-28-age" value="28"></td>
|
||||||
<td><input type="text" id="row-28-position" name="row-28-position" value=
|
<td><input type="text" id="row-28-position" name="row-28-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-28-office" name="row-28-office">
|
<td><select size="1" id="row-28-office" name="row-28-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -864,8 +838,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Fiona Green</td>
|
<td>Fiona Green</td>
|
||||||
<td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
|
<td><input type="text" id="row-29-age" name="row-29-age" value="48"></td>
|
||||||
<td><input type="text" id="row-29-position" name="row-29-position" value=
|
<td><input type="text" id="row-29-position" name="row-29-position" value="Chief Operating Officer (COO)"></td>
|
||||||
"Chief Operating Officer (COO)"></td>
|
|
||||||
<td><select size="1" id="row-29-office" name="row-29-office">
|
<td><select size="1" id="row-29-office" name="row-29-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -891,8 +864,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Shou Itou</td>
|
<td>Shou Itou</td>
|
||||||
<td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
|
<td><input type="text" id="row-30-age" name="row-30-age" value="20"></td>
|
||||||
<td><input type="text" id="row-30-position" name="row-30-position" value=
|
<td><input type="text" id="row-30-position" name="row-30-position" value="Regional Marketing"></td>
|
||||||
"Regional Marketing"></td>
|
|
||||||
<td><select size="1" id="row-30-office" name="row-30-office">
|
<td><select size="1" id="row-30-office" name="row-30-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -918,8 +890,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Michelle House</td>
|
<td>Michelle House</td>
|
||||||
<td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
|
<td><input type="text" id="row-31-age" name="row-31-age" value="37"></td>
|
||||||
<td><input type="text" id="row-31-position" name="row-31-position" value=
|
<td><input type="text" id="row-31-position" name="row-31-position" value="Integration Specialist"></td>
|
||||||
"Integration Specialist"></td>
|
|
||||||
<td><select size="1" id="row-31-office" name="row-31-office">
|
<td><select size="1" id="row-31-office" name="row-31-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -971,8 +942,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Prescott Bartlett</td>
|
<td>Prescott Bartlett</td>
|
||||||
<td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
|
<td><input type="text" id="row-33-age" name="row-33-age" value="27"></td>
|
||||||
<td><input type="text" id="row-33-position" name="row-33-position" value=
|
<td><input type="text" id="row-33-position" name="row-33-position" value="Technical Author"></td>
|
||||||
"Technical Author"></td>
|
|
||||||
<td><select size="1" id="row-33-office" name="row-33-office">
|
<td><select size="1" id="row-33-office" name="row-33-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1024,8 +994,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Martena Mccray</td>
|
<td>Martena Mccray</td>
|
||||||
<td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
|
<td><input type="text" id="row-35-age" name="row-35-age" value="46"></td>
|
||||||
<td><input type="text" id="row-35-position" name="row-35-position" value=
|
<td><input type="text" id="row-35-position" name="row-35-position" value="Post-Sales support"></td>
|
||||||
"Post-Sales support"></td>
|
|
||||||
<td><select size="1" id="row-35-office" name="row-35-office">
|
<td><select size="1" id="row-35-office" name="row-35-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1051,8 +1020,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Unity Butler</td>
|
<td>Unity Butler</td>
|
||||||
<td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
|
<td><input type="text" id="row-36-age" name="row-36-age" value="47"></td>
|
||||||
<td><input type="text" id="row-36-position" name="row-36-position" value=
|
<td><input type="text" id="row-36-position" name="row-36-position" value="Marketing Designer"></td>
|
||||||
"Marketing Designer"></td>
|
|
||||||
<td><select size="1" id="row-36-office" name="row-36-office">
|
<td><select size="1" id="row-36-office" name="row-36-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1130,8 +1098,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Vivian Harrell</td>
|
<td>Vivian Harrell</td>
|
||||||
<td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
|
<td><input type="text" id="row-39-age" name="row-39-age" value="62"></td>
|
||||||
<td><input type="text" id="row-39-position" name="row-39-position" value=
|
<td><input type="text" id="row-39-position" name="row-39-position" value="Financial Controller"></td>
|
||||||
"Financial Controller"></td>
|
|
||||||
<td><select size="1" id="row-39-office" name="row-39-office">
|
<td><select size="1" id="row-39-office" name="row-39-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1209,8 +1176,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Olivia Liang</td>
|
<td>Olivia Liang</td>
|
||||||
<td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
|
<td><input type="text" id="row-42-age" name="row-42-age" value="64"></td>
|
||||||
<td><input type="text" id="row-42-position" name="row-42-position" value=
|
<td><input type="text" id="row-42-position" name="row-42-position" value="Support Engineer"></td>
|
||||||
"Support Engineer"></td>
|
|
||||||
<td><select size="1" id="row-42-office" name="row-42-office">
|
<td><select size="1" id="row-42-office" name="row-42-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1236,8 +1202,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Bruno Nash</td>
|
<td>Bruno Nash</td>
|
||||||
<td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
|
<td><input type="text" id="row-43-age" name="row-43-age" value="38"></td>
|
||||||
<td><input type="text" id="row-43-position" name="row-43-position" value=
|
<td><input type="text" id="row-43-position" name="row-43-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-43-office" name="row-43-office">
|
<td><select size="1" id="row-43-office" name="row-43-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1263,8 +1228,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Sakura Yamamoto</td>
|
<td>Sakura Yamamoto</td>
|
||||||
<td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
|
<td><input type="text" id="row-44-age" name="row-44-age" value="37"></td>
|
||||||
<td><input type="text" id="row-44-position" name="row-44-position" value=
|
<td><input type="text" id="row-44-position" name="row-44-position" value="Support Engineer"></td>
|
||||||
"Support Engineer"></td>
|
|
||||||
<td><select size="1" id="row-44-office" name="row-44-office">
|
<td><select size="1" id="row-44-office" name="row-44-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1316,8 +1280,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Finn Camacho</td>
|
<td>Finn Camacho</td>
|
||||||
<td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
|
<td><input type="text" id="row-46-age" name="row-46-age" value="47"></td>
|
||||||
<td><input type="text" id="row-46-position" name="row-46-position" value=
|
<td><input type="text" id="row-46-position" name="row-46-position" value="Support Engineer"></td>
|
||||||
"Support Engineer"></td>
|
|
||||||
<td><select size="1" id="row-46-office" name="row-46-office">
|
<td><select size="1" id="row-46-office" name="row-46-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1343,8 +1306,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Serge Baldwin</td>
|
<td>Serge Baldwin</td>
|
||||||
<td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
|
<td><input type="text" id="row-47-age" name="row-47-age" value="64"></td>
|
||||||
<td><input type="text" id="row-47-position" name="row-47-position" value=
|
<td><input type="text" id="row-47-position" name="row-47-position" value="Data Coordinator"></td>
|
||||||
"Data Coordinator"></td>
|
|
||||||
<td><select size="1" id="row-47-office" name="row-47-office">
|
<td><select size="1" id="row-47-office" name="row-47-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1370,8 +1332,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Zenaida Frank</td>
|
<td>Zenaida Frank</td>
|
||||||
<td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
|
<td><input type="text" id="row-48-age" name="row-48-age" value="63"></td>
|
||||||
<td><input type="text" id="row-48-position" name="row-48-position" value=
|
<td><input type="text" id="row-48-position" name="row-48-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-48-office" name="row-48-office">
|
<td><select size="1" id="row-48-office" name="row-48-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1397,8 +1358,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Zorita Serrano</td>
|
<td>Zorita Serrano</td>
|
||||||
<td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
|
<td><input type="text" id="row-49-age" name="row-49-age" value="56"></td>
|
||||||
<td><input type="text" id="row-49-position" name="row-49-position" value=
|
<td><input type="text" id="row-49-position" name="row-49-position" value="Software Engineer"></td>
|
||||||
"Software Engineer"></td>
|
|
||||||
<td><select size="1" id="row-49-office" name="row-49-office">
|
<td><select size="1" id="row-49-office" name="row-49-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1424,8 +1384,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Jennifer Acosta</td>
|
<td>Jennifer Acosta</td>
|
||||||
<td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
|
<td><input type="text" id="row-50-age" name="row-50-age" value="43"></td>
|
||||||
<td><input type="text" id="row-50-position" name="row-50-position" value=
|
<td><input type="text" id="row-50-position" name="row-50-position" value="Junior Javascript Developer"></td>
|
||||||
"Junior Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-50-office" name="row-50-office">
|
<td><select size="1" id="row-50-office" name="row-50-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1451,8 +1410,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Cara Stevens</td>
|
<td>Cara Stevens</td>
|
||||||
<td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
|
<td><input type="text" id="row-51-age" name="row-51-age" value="46"></td>
|
||||||
<td><input type="text" id="row-51-position" name="row-51-position" value=
|
<td><input type="text" id="row-51-position" name="row-51-position" value="Sales Assistant"></td>
|
||||||
"Sales Assistant"></td>
|
|
||||||
<td><select size="1" id="row-51-office" name="row-51-office">
|
<td><select size="1" id="row-51-office" name="row-51-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1478,8 +1436,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Hermione Butler</td>
|
<td>Hermione Butler</td>
|
||||||
<td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
|
<td><input type="text" id="row-52-age" name="row-52-age" value="47"></td>
|
||||||
<td><input type="text" id="row-52-position" name="row-52-position" value=
|
<td><input type="text" id="row-52-position" name="row-52-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-52-office" name="row-52-office">
|
<td><select size="1" id="row-52-office" name="row-52-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1505,8 +1462,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Lael Greer</td>
|
<td>Lael Greer</td>
|
||||||
<td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
|
<td><input type="text" id="row-53-age" name="row-53-age" value="21"></td>
|
||||||
<td><input type="text" id="row-53-position" name="row-53-position" value=
|
<td><input type="text" id="row-53-position" name="row-53-position" value="Systems Administrator"></td>
|
||||||
"Systems Administrator"></td>
|
|
||||||
<td><select size="1" id="row-53-office" name="row-53-office">
|
<td><select size="1" id="row-53-office" name="row-53-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1558,8 +1514,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Shad Decker</td>
|
<td>Shad Decker</td>
|
||||||
<td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
|
<td><input type="text" id="row-55-age" name="row-55-age" value="51"></td>
|
||||||
<td><input type="text" id="row-55-position" name="row-55-position" value=
|
<td><input type="text" id="row-55-position" name="row-55-position" value="Regional Director"></td>
|
||||||
"Regional Director"></td>
|
|
||||||
<td><select size="1" id="row-55-office" name="row-55-office">
|
<td><select size="1" id="row-55-office" name="row-55-office">
|
||||||
<option value="Edinburgh" selected="selected">
|
<option value="Edinburgh" selected="selected">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1585,8 +1540,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Michael Bruce</td>
|
<td>Michael Bruce</td>
|
||||||
<td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
|
<td><input type="text" id="row-56-age" name="row-56-age" value="29"></td>
|
||||||
<td><input type="text" id="row-56-position" name="row-56-position" value=
|
<td><input type="text" id="row-56-position" name="row-56-position" value="Javascript Developer"></td>
|
||||||
"Javascript Developer"></td>
|
|
||||||
<td><select size="1" id="row-56-office" name="row-56-office">
|
<td><select size="1" id="row-56-office" name="row-56-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1612,8 +1566,7 @@ $(document).ready(function() {
|
|||||||
<tr>
|
<tr>
|
||||||
<td>Donna Snider</td>
|
<td>Donna Snider</td>
|
||||||
<td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
|
<td><input type="text" id="row-57-age" name="row-57-age" value="27"></td>
|
||||||
<td><input type="text" id="row-57-position" name="row-57-position" value=
|
<td><input type="text" id="row-57-position" name="row-57-position" value="Customer Support"></td>
|
||||||
"Customer Support"></td>
|
|
||||||
<td><select size="1" id="row-57-office" name="row-57-office">
|
<td><select size="1" id="row-57-office" name="row-57-office">
|
||||||
<option value="Edinburgh">
|
<option value="Edinburgh">
|
||||||
Edinburgh
|
Edinburgh
|
||||||
@ -1649,8 +1602,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Create an array with the values of all the input boxes in a column */
|
||||||
example:</p><code class="multiline language-js">/* Create an array with the values of all the input boxes in a column */
|
|
||||||
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
|
$.fn.dataTable.ext.order['dom-text'] = function ( settings, col )
|
||||||
{
|
{
|
||||||
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
|
return this.api().column( col, {order:'index'} ).nodes().map( function ( td, i ) {
|
||||||
@ -1694,8 +1646,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -1704,36 +1655,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -1756,8 +1702,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -1765,8 +1710,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -1779,10 +1723,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -1791,8 +1733,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1828,14 +1769,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -1872,8 +1810,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -1890,14 +1827,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,10 +19,9 @@
|
|||||||
<h1>DataTables example <span>Plug-ins</span></h1>
|
<h1>DataTables example <span>Plug-ins</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>While DataTables has a wide range of options and data type support built in, it can never cater for
|
<p>While DataTables has a wide range of options and data type support built in, it can never cater for every type of data out of the box. For this reason,
|
||||||
every type of data out of the box. For this reason, DataTables exposes an extension API which allows
|
DataTables exposes an extension API which allows you, the developers using DataTables, to add support for your own data types, searching, ordering and feature
|
||||||
you, the developers using DataTables, to add support for your own data types, searching, ordering and
|
plug-ins.</p>
|
||||||
feature plug-ins.</p>
|
|
||||||
|
|
||||||
<p>The examples in this section show how plug-ins can be used and developed for DataTables.</p>
|
<p>The examples in this section show how plug-ins can be used and developed for DataTables.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -48,14 +47,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -56,14 +56,11 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Custom filtering - range search</span></h1>
|
<h1>DataTables example <span>Custom filtering - range search</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>There may be occasions when you wish to search data presented to the end user in your own manner,
|
<p>There may be occasions when you wish to search data presented to the end user in your own manner, common examples are number range search (in between two
|
||||||
common examples are number range search (in between two numbers) and date range search. DataTables
|
numbers) and date range search. DataTables provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is an array of
|
||||||
provide an API method to add your own search functions, <code>$.fn.dataTable.ext.search</code>. This is
|
functions (push your own onto it) which will will be run at table draw time to see if a particular row should be included or not.</p>
|
||||||
an array of functions (push your own onto it) which will will be run at table draw time to see if a
|
|
||||||
particular row should be included or not.</p>
|
|
||||||
|
|
||||||
<p>This example shows a search being performed on the age column in the data, based upon two
|
<p>This example shows a search being performed on the age column in the data, based upon two inputs.</p>
|
||||||
inputs.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table border="0" cellspacing="5" cellpadding="5">
|
<table border="0" cellspacing="5" cellpadding="5">
|
||||||
@ -570,8 +567,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">/* Custom filtering function which will search data in column four between two values */
|
||||||
example:</p><code class="multiline language-js">/* Custom filtering function which will search data in column four between two values */
|
|
||||||
$.fn.dataTable.ext.search.push(
|
$.fn.dataTable.ext.search.push(
|
||||||
function( settings, data, dataIndex ) {
|
function( settings, data, dataIndex ) {
|
||||||
var min = parseInt( $('#min').val(), 10 );
|
var min = parseInt( $('#min').val(), 10 );
|
||||||
@ -598,8 +594,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -608,36 +603,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -660,8 +650,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -669,8 +658,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -683,10 +671,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -695,8 +681,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -732,14 +717,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -776,8 +758,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -787,22 +768,18 @@ $(document).ready(function() {
|
|||||||
<li><a href="./api.html">API plug-in methods</a></li>
|
<li><a href="./api.html">API plug-in methods</a></li>
|
||||||
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
|
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
|
||||||
<li class="active"><a href="./range_filtering.html">Custom filtering - range
|
<li class="active"><a href="./range_filtering.html">Custom filtering - range search</a></li>
|
||||||
search</a></li>
|
|
||||||
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -51,20 +51,16 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
|
<h1>DataTables example <span>Ordering plug-ins (with type detection)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Although DataTables will automatically order data from a number of different data types using the
|
<p>Although DataTables will automatically order data from a number of different data types using the built in methods, When dealing with more complex formatted
|
||||||
built in methods, When dealing with more complex formatted data, it can be desirable to define the
|
data, it can be desirable to define the ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any manner you wish.</p>
|
||||||
ordering order yourself. Using plug-in ordering functions, you have have DataTables sort data in any
|
|
||||||
manner you wish.</p>
|
|
||||||
|
|
||||||
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in
|
<p>Formatted data of a particular kind can be automatically detected and a suitable ordering plug-in assigned to it by making use of DataTables' plug-in type
|
||||||
assigned to it by making use of DataTables' plug-in type detection abilities. For complete information
|
detection abilities. For complete information about type detection and ordering plug-ins; creating them and their requirements, please refer to the plug-in
|
||||||
about type detection and ordering plug-ins; creating them and their requirements, please refer to the
|
development documentation.</p>
|
||||||
plug-in development documentation.</p>
|
|
||||||
|
|
||||||
<p>This example shows ordering with using an enumerated type.</p>
|
<p>This example shows ordering with using an enumerated type.</p>
|
||||||
|
|
||||||
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
|
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
|
||||||
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -560,8 +556,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.ext.type.detect.unshift(
|
||||||
example:</p><code class="multiline language-js">$.fn.dataTable.ext.type.detect.unshift(
|
|
||||||
function ( d ) {
|
function ( d ) {
|
||||||
return d === 'Low' || d === 'Medium' || d === 'High' ?
|
return d === 'Low' || d === 'Medium' || d === 'High' ?
|
||||||
'salary-grade' :
|
'salary-grade' :
|
||||||
@ -583,8 +578,7 @@ $(document).ready(function() {
|
|||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -593,36 +587,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -645,8 +634,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -654,8 +642,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -668,10 +655,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -680,8 +665,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -717,14 +701,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -761,8 +742,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -770,8 +750,7 @@ $(document).ready(function() {
|
|||||||
<h3><a href="./index.html">Plug-ins</a></h3>
|
<h3><a href="./index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./api.html">API plug-in methods</a></li>
|
<li><a href="./api.html">API plug-in methods</a></li>
|
||||||
<li class="active"><a href="./sorting_auto.html">Ordering plug-ins (with type
|
<li class="active"><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
|
||||||
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
|
<li><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
|
||||||
<li><a href="./range_filtering.html">Custom filtering - range search</a></li>
|
<li><a href="./range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
|
||||||
@ -780,14 +759,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -47,21 +47,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
|
<h1>DataTables example <span>Ordering plug-ins (no type detection)</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Although DataTables will order a number of data types using the built in methods, When dealing with
|
<p>Although DataTables will order a number of data types using the built in methods, When dealing with more complex formatted data, it can be desirable to define
|
||||||
more complex formatted data, it can be desirable to define the ordering order yourself. Using plug-in
|
the ordering order yourself. Using plug-in ordering functions, you have have DataTables order data in any manner you wish.</p>
|
||||||
ordering functions, you have have DataTables order data in any manner you wish.</p>
|
|
||||||
|
|
||||||
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class=
|
<p>This is done by using the <a href="//datatables.net/reference/option/columns.type"><code class="option" title=
|
||||||
"option" title="DataTables initialisation option">columns.type<span>DT</span></code></a> parameter, in
|
"DataTables initialisation option">columns.type<span>DT</span></code></a> parameter, in combination with a ordering plug-in. The ordering plug-in can be be of any
|
||||||
combination with a ordering plug-in. The ordering plug-in can be be of any level of complexity (natural
|
level of complexity (natural ordering for example can be fairly complex while also very powerful), and is defined by attaching to the
|
||||||
ordering for example can be fairly complex while also very powerful), and is defined by attaching to
|
<code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins; creating them and their requirements, please refer to the plug-in
|
||||||
the <code>$.fn.dataTable.ext.type.order</code> object. For more information about ordering plug-ins;
|
development documentation.</p>
|
||||||
creating them and their requirements, please refer to the plug-in development documentation.</p>
|
|
||||||
|
|
||||||
<p>This example shows ordering with using an enumerated type.</p>
|
<p>This example shows ordering with using an enumerated type.</p>
|
||||||
|
|
||||||
<p>A wide variety of ready made ordering plug-ins can be found on <a href=
|
<p>A wide variety of ready made ordering plug-ins can be found on <a href="//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
|
||||||
"//datatables.net/plug-ins/sorting">the DataTables plug-ins page</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -557,8 +554,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
|
||||||
example:</p><code class="multiline language-js">$.fn.dataTable.ext.type.order['salary-grade-pre'] = function ( d ) {
|
|
||||||
switch ( d ) {
|
switch ( d ) {
|
||||||
case 'Low': return 1;
|
case 'Low': return 1;
|
||||||
case 'Medium': return 2;
|
case 'Medium': return 2;
|
||||||
@ -576,8 +572,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -586,36 +581,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -638,8 +628,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -647,8 +636,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -661,10 +649,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -673,8 +659,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -710,14 +695,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -754,8 +736,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -764,8 +745,7 @@ $(document).ready(function() {
|
|||||||
<ul class="toc active">
|
<ul class="toc active">
|
||||||
<li><a href="./api.html">API plug-in methods</a></li>
|
<li><a href="./api.html">API plug-in methods</a></li>
|
||||||
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
<li><a href="./sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
<li class="active"><a href="./sorting_manual.html">Ordering plug-ins (no type
|
<li class="active"><a href="./sorting_manual.html">Ordering plug-ins (no type detection)</a></li>
|
||||||
detection)</a></li>
|
|
||||||
<li><a href="./range_filtering.html">Custom filtering - range search</a></li>
|
<li><a href="./range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="./dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -773,14 +753,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -42,22 +42,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Custom HTTP variables</span></h1>
|
<h1>DataTables example <span>Custom HTTP variables</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>It can often be useful to send extra information to the server when utilising DataTables'
|
<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=
|
||||||
server-side processing option. This is done by using the <a href=
|
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option's <code>data</code>
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
parameter which can be used in one of two different ways:</p>
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option's <code>data</code> parameter
|
|
||||||
which can be used in one of two different ways:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li><code>object</code> - An object data to send to the server. This is useful for adding static
|
<li><code>object</code> - An object data to send to the server. This is useful for adding static data to the request.</li>
|
||||||
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>
|
||||||
<li><code>function</code> - A function which will manipulate the data object to send to the server,
|
parameter as a function allows the additional data to evaluated and added to the request at the time the request is made.</li>
|
||||||
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>
|
</ul>
|
||||||
|
|
||||||
<p>The example below shows server-side processing being used with an extra parameter being sent to the
|
<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
|
||||||
server by using the <code>ajax.data</code> option as a function.</p>
|
function.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -94,8 +90,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -110,8 +105,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -120,36 +114,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -172,8 +161,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -181,8 +169,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -195,10 +182,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -207,8 +192,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -244,14 +228,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -296,10 +277,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -307,14 +286,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -36,24 +36,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Deferred loading of data</span></h1>
|
<h1>DataTables example <span>Deferred loading of data</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When using DataTables with server-side processing, the default behaviour is to have DataTables
|
<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
|
||||||
automatically make an Ajax call and load the data, removing anything which might have already been in
|
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
|
||||||
the table. However, this behaviour might not always be desirable when the first page of the table has
|
preloaded in the HTML (which you might do to ensure accessibility or for performance reasons).</p>
|
||||||
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=
|
<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=
|
||||||
"//datatables.net/reference/option/deferLoading"><code class="option" title=
|
"option" title="DataTables initialisation option">deferLoading<span>DT</span></code></a> initialisation property. It serves two purposes, firstly to indicate that
|
||||||
"DataTables initialisation option">deferLoading<span>DT</span></code></a> initialisation property. It
|
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
|
||||||
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>
|
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
|
<p>In the example below, the HTML page already has the first 10 rows of data available it in, so we use <a href=
|
||||||
<a href="//datatables.net/reference/option/deferLoading"><code class="option" title=
|
"//datatables.net/reference/option/deferLoading"><code class="option" title="DataTables initialisation option">deferLoading<span>DT</span></code></a> to tell
|
||||||
"DataTables initialisation option">deferLoading<span>DT</span></code></a> to tell DataTables that this
|
DataTables that this data is available and that it should wait for under interaction (ordering, paging etc) before making an Ajax call.</p>
|
||||||
data is available and that it should wait for under interaction (ordering, paging etc) before making an
|
|
||||||
Ajax call.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -171,8 +165,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -181,8 +174,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -191,36 +183,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -243,8 +230,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -252,8 +238,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -266,10 +251,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -278,8 +261,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -315,14 +297,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -367,10 +346,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -378,14 +355,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,24 +43,20 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
|
<h1>DataTables example <span>Automatic addition of row ID attributes</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on
|
<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
|
||||||
each row (the primary key value from the database for example). By assigning the ID you want to apply
|
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, DataTables will
|
||||||
to each row using the property <code>DT_RowId</code> of the data source object for each row, DataTables
|
automatically add it for you.</p>
|
||||||
will automatically add it for you.</p>
|
|
||||||
|
|
||||||
<p>In addition to <code>DT_RowId</code> there are two other properties which perform similar actions:
|
<p>In addition to <code>DT_RowId</code> there are two other properties which perform similar actions: <code>DT_RowClass</code> and <code>DT_RowData</code>:</p>
|
||||||
<code>DT_RowClass</code> and <code>DT_RowData</code>:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li>{string} <code>DT_RowId</code> - Add an ID to the <em>TR</em> element</li>
|
<li>{string} <code>DT_RowId</code> - Add an ID to the <em>TR</em> element</li>
|
||||||
<li>{string} <code>DT_RowClass</code> - Add a class name to the <em>TR</em> element</li>
|
<li>{string} <code>DT_RowClass</code> - Add a class name to the <em>TR</em> element</li>
|
||||||
<li>{object} <code>DT_RowData</code> - Add HTML5 <em>data-</em> attributes to the <em>TR</em>
|
<li>{object} <code>DT_RowData</code> - Add HTML5 <em>data-</em> attributes to the <em>TR</em> element. This is an object of key / value pairs which are
|
||||||
element. This is an object of key / value pairs which are assigned as data attributes to the
|
assigned as data attributes to the <em>TR</em> element.</li>
|
||||||
<em>TR</em> element.</li>
|
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In
|
<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>
|
||||||
addition objects are used as the data source for the rows.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -97,8 +93,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -114,8 +109,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -124,36 +118,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -176,8 +165,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -185,8 +173,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -199,10 +186,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -211,8 +196,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -248,14 +232,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -300,10 +281,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -311,14 +290,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,21 +19,16 @@
|
|||||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
|
<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
|
||||||
databases, you might want to consider using the server-side options that DataTables provides. With
|
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a
|
||||||
server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs
|
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,
|
||||||
are handed off to a server where an SQL engine (or similar) can perform these actions on the large data
|
each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||||
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=
|
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
|
||||||
"//datatables.net/reference/option/serverSide"><code class="option" title=
|
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
|
||||||
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and
|
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
||||||
providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class=
|
|
||||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
|
||||||
|
|
||||||
<p>The examples in this section shows server-side processing in use and how it can be customised to
|
<p>The examples in this section shows server-side processing in use and how it can be customised to suit your needs.</p>
|
||||||
suit your needs.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
@ -62,14 +57,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -38,24 +38,19 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
|
<h1>DataTables example <span>JSONP data source for remote domains</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p><a href="http://bob.pythonmac.org/archives/2005/12/05/remote-json-jsonp/">JSONP</a> is one of
|
<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
|
||||||
several methods to allow the use of JSON data from any server (browsers have XSS protection rules which
|
(browsers have XSS protection rules which will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables to load
|
||||||
will block standard Ajax requests to remote source for security reasons). Using JSONP allows DataTables
|
server-side sourced data from any domain and is quite simply done with the <code>dataType</code> option of the <a href=
|
||||||
to load server-side sourced data from any domain and is quite simply done with the
|
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation option.</p>
|
||||||
<code>dataType</code> option of the <a href="//datatables.net/reference/option/ajax"><code class=
|
|
||||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation
|
|
||||||
option.</p>
|
|
||||||
|
|
||||||
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option"
|
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||||
title="DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the
|
"DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a>
|
||||||
<a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used
|
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=
|
||||||
in jQuery's Ajax function can also be used in DataTable's <a href=
|
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
|
|
||||||
|
|
||||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the
|
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>dataType</code> option set to retrieve JSONP data for server-side
|
||||||
<code>dataType</code> option set to retrieve JSONP data for server-side processing in DataTables.</p>
|
processing in DataTables.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -92,8 +87,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -104,8 +98,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -114,36 +107,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -166,8 +154,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -175,8 +162,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -189,10 +175,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -201,8 +185,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -238,14 +221,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -290,10 +270,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -301,14 +279,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -43,17 +43,13 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Object data source</span></h1>
|
<h1>DataTables example <span>Object data source</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The default data format that DataTables expects for server-side processing is a 2D array of data
|
<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
|
||||||
(rows by columns). However, this is often not flexible enough for either the server-side environment,
|
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
|
||||||
or you might want to convey more information in the data source than is necessary to show in the table
|
database for example). For these situations DataTables supports the reading of data for objects as well as arrays.</p>
|
||||||
(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
|
<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=
|
||||||
each property that is specified by the <a href=
|
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data<span>DT</span></code></a> property
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
given for each column.</p>
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> property given for each
|
|
||||||
column.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -90,8 +86,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -107,8 +102,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -117,36 +111,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -169,8 +158,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -178,8 +166,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -192,10 +179,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -204,8 +189,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -241,14 +225,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -293,10 +274,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -304,14 +283,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -158,22 +158,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
|
<h1>DataTables example <span>Pipelining data to reduce Ajax calls for paging</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>Sever-side processing can be quite hard on your server, since it makes an Ajax call to the server
|
<p>Sever-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
|
||||||
for every draw request that is made. On sites with a large number of page views, you could potentially
|
number of page views, you could potentially end up DDoSing your own server with your own applications!</p>
|
||||||
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
|
<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
|
||||||
caching more data than is needed for each draw. This is done by intercepting the Ajax call and routing
|
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
|
||||||
it through a data cache control; using the data from the cache if available, and making the Ajax
|
intercept of the Ajax request is performed by giving the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||||
request if not. This intercept of the Ajax request is performed by giving the <a href=
|
"DataTables initialisation option">ajax<span>DT</span></code></a> option as a function. This function then performs the logic of deciding if another Ajax call is
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
needed, or if data from the cache can be used.</p>
|
||||||
"DataTables initialisation option">ajax<span>DT</span></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
|
<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,
|
||||||
interactions such as ordering and searching since the full data set, when using server-side processing,
|
when using server-side processing, is only available at the server.</p>
|
||||||
is only available at the server.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -210,8 +205,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">//
|
||||||
example:</p><code class="multiline language-js">//
|
|
||||||
// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
|
// Pipelining function for DataTables. To be used to the `ajax` option of DataTables
|
||||||
//
|
//
|
||||||
$.fn.dataTable.pipeline = function ( opts ) {
|
$.fn.dataTable.pipeline = function ( opts ) {
|
||||||
@ -340,8 +334,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -350,36 +343,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -402,8 +390,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -411,8 +398,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -425,10 +411,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -437,8 +421,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -474,14 +457,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -518,8 +498,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="./select_rows.html">Row selection</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="./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="./defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li class="active"><a href="./pipeline.html">Pipelining data to reduce Ajax calls for
|
<li class="active"><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -527,10 +506,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -538,14 +515,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -47,22 +47,18 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>POST data</span></h1>
|
<h1>DataTables example <span>POST data</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>By default, the Ajax request that DataTables makes to obtain server-side processing data is an HTTP
|
<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
|
||||||
GET request. However, there are times when you might wish to use POST. This is very easily done by
|
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=
|
||||||
using the <code>type</code> option of the <a href="//datatables.net/reference/option/ajax"><code class=
|
"DataTables initialisation option">ajax<span>DT</span></code></a> initialisation option.</p>
|
||||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> initialisation
|
|
||||||
option.</p>
|
|
||||||
|
|
||||||
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option"
|
<p>When given as an object, the <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||||
title="DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the
|
"DataTables initialisation option">ajax<span>DT</span></code></a> option maps directly onto the <a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a>
|
||||||
<a href="http://api.jquery.com/jQuery.ajax/">jQuery ajax</a> options (i.e. any option that can be used
|
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=
|
||||||
in jQuery's Ajax function can also be used in DataTable's <a href=
|
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
|
||||||
"//datatables.net/reference/option/ajax"><code class="option" title=
|
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> option).</p>
|
|
||||||
|
|
||||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
<p>The example below shows <a href="//datatables.net/reference/option/ajax"><code class="option" title=
|
||||||
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>type</code>
|
"DataTables initialisation option">ajax<span>DT</span></code></a> being used with the <code>type</code> option set to <code class="string" title=
|
||||||
option set to <code class="string" title="String">POST</code> to make a POST request.</p>
|
"String">POST</code> to make a POST request.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -99,8 +95,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -119,8 +114,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -129,36 +123,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -181,8 +170,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -190,8 +178,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -204,10 +191,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -216,8 +201,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -253,14 +237,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -305,10 +286,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -316,14 +295,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -96,33 +96,24 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Row details</span></h1>
|
<h1>DataTables example <span>Row details</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to
|
<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
|
||||||
a parent row in the host table. This is often used to show additional information about a row,
|
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>
|
||||||
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
|
<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
|
||||||
listener attached to it which will toggle the child row's display. This is set up using <a href=
|
display. This is set up using <a href="//datatables.net/reference/option/columns.data"><code class="option" title=
|
||||||
"//datatables.net/reference/option/columns.data"><code class="option" title=
|
"DataTables initialisation option">columns.data<span>DT</span></code></a> and <a href="//datatables.net/reference/option/columns.defaultContent"><code class=
|
||||||
"DataTables initialisation option">columns.data<span>DT</span></code></a> and <a href=
|
"option" title="DataTables initialisation option">columns.defaultContent<span>DT</span></code></a>, in combination with CSS to show an empty cell with a background
|
||||||
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
|
image which can be clicked upon.</p>
|
||||||
"DataTables initialisation option">columns.defaultContent<span>DT</span></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=
|
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class="api" title=
|
||||||
"api" title="DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a
|
"DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a row is already displayed, and if so hide it, if not show it. The
|
||||||
row is already displayed, and if so hide it, if not show it. The content of the child row is, in this
|
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
|
||||||
example, defined by the <code>format()</code> function, but you would replace that with whatever you
|
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
|
||||||
wanted to show the content required, possibly including, for example, an Ajax call to the server to
|
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>
|
||||||
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=
|
<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
|
||||||
"../api/row_details.html">client-side row details example</a> in that to have rows automatically reopen
|
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
|
||||||
when the table is redrawn, we need to track a unique identifier for each row - in this case the row
|
in server-side processing mode rows are automatically destroyed and recreated on each draw.</p>
|
||||||
<code>id</code>. This is required because in server-side processing mode rows are automatically
|
|
||||||
destroyed and recreated on each draw.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -157,8 +148,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">function format ( d ) {
|
||||||
example:</p><code class="multiline language-js">function format ( d ) {
|
|
||||||
return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
|
return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
|
||||||
'Salary: '+d.salary+'<br>'+
|
'Salary: '+d.salary+'<br>'+
|
||||||
'The child row can contain any data you wish, including links, images, inner tables etc.';
|
'The child row can contain any data you wish, including links, images, inner tables etc.';
|
||||||
@ -218,8 +208,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -228,15 +217,13 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">td.details-control {
|
||||||
below:</p><code class="multiline language-css">td.details-control {
|
|
||||||
background: url('../resources/details_open.png') no-repeat center center;
|
background: url('../resources/details_open.png') no-repeat center center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -245,25 +232,22 @@ tr.details td.details-control {
|
|||||||
}</code>
|
}</code>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -286,8 +270,7 @@ tr.details td.details-control {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -295,8 +278,7 @@ tr.details td.details-control {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -309,10 +291,8 @@ tr.details td.details-control {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -321,8 +301,7 @@ tr.details td.details-control {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -358,14 +337,11 @@ tr.details td.details-control {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -410,10 +386,8 @@ tr.details td.details-control {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -421,14 +395,11 @@ tr.details td.details-control {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -57,15 +57,12 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Row selection</span></h1>
|
<h1>DataTables example <span>Row selection</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When you want to have user selectable rows in DataTables, it is relatively trivial when using DOM
|
<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
|
||||||
based data - but when using server-side processing, DataTables doesn't retain DOM row elements over
|
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
|
||||||
pages / filtering etc. As such, you will need to keep a track of which rows a user as selected and mark
|
each draw.</p>
|
||||||
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
|
<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
|
||||||
automatically through the use of the <code>DT_RowId</code> special property returned as part of the
|
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>
|
||||||
object given by the server for each row) to track which rows are selected and reselect them is
|
|
||||||
appropriate on a draw.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -102,8 +99,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
var selected = [];
|
var selected = [];
|
||||||
|
|
||||||
$("#example").dataTable({
|
$("#example").dataTable({
|
||||||
@ -131,8 +127,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -141,36 +136,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -193,8 +183,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -202,8 +191,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -216,10 +204,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -228,8 +214,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -265,14 +250,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -317,10 +299,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -328,14 +308,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -35,21 +35,16 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Server-side processing</span></h1>
|
<h1>DataTables example <span>Server-side processing</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>There are many ways to get your data into DataTables, and if you are working with seriously large
|
<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
|
||||||
databases, you might want to consider using the server-side options that DataTables provides. With
|
options that DataTables provides. With server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs are handed off to a
|
||||||
server-side processing enabled, all paging, searching, ordering etc actions that DataTables performs
|
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,
|
||||||
are handed off to a server where an SQL engine (or similar) can perform these actions on the large data
|
each draw of the table will result in a new Ajax request being made to get the required data.</p>
|
||||||
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=
|
<p>Server-side processing is enabled by setting the <a href="//datatables.net/reference/option/serverSide"><code class="option" title=
|
||||||
"//datatables.net/reference/option/serverSide"><code class="option" title=
|
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and providing an Ajax data source through the <a href=
|
||||||
"DataTables initialisation option">serverSide<span>DT</span></code></a> option to <code>true</code> and
|
"//datatables.net/reference/option/ajax"><code class="option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
||||||
providing an Ajax data source through the <a href="//datatables.net/reference/option/ajax"><code class=
|
|
||||||
"option" title="DataTables initialisation option">ajax<span>DT</span></code></a> option.</p>
|
|
||||||
|
|
||||||
<p>This example shows a very simple table, matching the other client-side processing examples, but in
|
<p>This example shows a very simple table, matching the other client-side processing examples, but in this instance using server-side processing.</p>
|
||||||
this instance using server-side processing.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -86,8 +81,7 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable( {
|
$('#example').dataTable( {
|
||||||
"processing": true,
|
"processing": true,
|
||||||
"serverSide": true,
|
"serverSide": true,
|
||||||
@ -95,8 +89,7 @@ $(document).ready(function() {
|
|||||||
} );
|
} );
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -105,36 +98,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -157,8 +145,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -166,8 +153,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -180,10 +166,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -192,8 +176,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -229,14 +212,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -281,10 +261,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -292,14 +270,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,8 +7,7 @@
|
|||||||
|
|
||||||
<title>DataTables example - Bootstrap</title>
|
<title>DataTables example - Bootstrap</title>
|
||||||
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
|
||||||
<link rel="stylesheet" type="text/css" href=
|
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">
|
||||||
"../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||||
<style type="text/css" class="init">
|
<style type="text/css" class="init">
|
||||||
@ -18,8 +17,7 @@
|
|||||||
</style>
|
</style>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src=
|
<script type="text/javascript" language="javascript" src="../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
|
||||||
"../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.js"></script>
|
|
||||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||||
<script type="text/javascript" language="javascript" class="init">
|
<script type="text/javascript" language="javascript" class="init">
|
||||||
@ -37,15 +35,14 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Bootstrap</span></h1>
|
<h1>DataTables example <span>Bootstrap</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables can integrate seamlessly with <a href="http://getbootstrap.com/">Bootstrap</a> using
|
<p>DataTables can integrate seamlessly with <a href="http://getbootstrap.com/">Bootstrap</a> using Bootstrap's <a href="http://getbootstrap.com/css/#tables">table
|
||||||
Bootstrap's <a href="http://getbootstrap.com/css/#tables">table styling options</a> to present a
|
styling options</a> to present a consistent interface with your Bootstrap driven site / app.</p>
|
||||||
consistent interface with your Bootstrap driven site / app.</p>
|
|
||||||
|
|
||||||
<p>DataTables' Bootstrap integration also provides a renderer for the pagination control in DataTables
|
<p>DataTables' Bootstrap integration also provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled
|
||||||
to ensure that the pagination of the table is also styled consistently by Bootstrap.</p>
|
consistently by Bootstrap.</p>
|
||||||
|
|
||||||
<p>This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will
|
<p>This integration is done simply by including the DataTables Bootstrap files (CSS and JS) which will set the defaults needed for DataTables to be initialised as
|
||||||
set the defaults needed for DataTables to be initialised as normal, as shown in this examples.</p>
|
normal, as shown in this examples.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||||
@ -541,13 +538,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -558,38 +553,33 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css">body { font-size: 140%; }</code>
|
||||||
below:</p><code class="multiline language-css">body { font-size: 140%; }</code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css</a></li>
|
||||||
"//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css</a></li>
|
|
||||||
<li><a href=
|
<li><a href=
|
||||||
"../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css</a></li>
|
"../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css">../../extensions/Plugins/integration/bootstrap/3/dataTables.bootstrap.css</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -612,8 +602,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -621,8 +610,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -635,10 +623,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -647,8 +633,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -684,14 +669,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -728,8 +710,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -737,10 +718,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -748,14 +727,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,8 +31,7 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Base style - cell borders</span></h1>
|
<h1>DataTables example <span>Base style - cell borders</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows DataTables with just the <code>cell-border</code> class specified, giving a
|
<p>This example shows DataTables with just the <code>cell-border</code> class specified, giving a strong delineation between individual cells.</p>
|
||||||
strong delineation between individual cells.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="cell-border" cellspacing="0" width="100%">
|
<table id="example" class="cell-border" cellspacing="0" width="100%">
|
||||||
@ -528,13 +527,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -543,36 +540,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -595,8 +587,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -604,8 +595,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -618,10 +608,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -630,8 +618,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -667,14 +654,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -711,8 +695,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -720,10 +703,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -731,14 +712,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,8 +31,8 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Base style - compact</span></h1>
|
<h1>DataTables example <span>Base style - compact</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The <code>compact</code> class is used to reduce the amount of white-space the default styling for
|
<p>The <code>compact</code> class is used to reduce the amount of white-space the default styling for the DataTable uses, increasing the information density on
|
||||||
the DataTable uses, increasing the information density on screen, as shown below.</p>
|
screen, as shown below.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display compact" cellspacing="0" width="100%">
|
<table id="example" class="display compact" cellspacing="0" width="100%">
|
||||||
@ -528,13 +528,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -543,36 +541,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -595,8 +588,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -604,8 +596,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -618,10 +609,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -630,8 +619,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -667,14 +655,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -711,8 +696,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -720,10 +704,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -731,14 +713,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,25 +31,22 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Base style</span></h1>
|
<h1>DataTables example <span>Base style</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>The DataTables default style file has a number of features which can be enabled based on the class
|
<p>The DataTables default style file has a number of features which can be enabled based on the class name of the table. These features are:</p>
|
||||||
name of the table. These features are:</p>
|
|
||||||
|
|
||||||
<ul class="markdown">
|
<ul class="markdown">
|
||||||
<li><code>cell-border</code> - Cells with a border</li>
|
<li><code>cell-border</code> - Cells with a border</li>
|
||||||
<li><code>compact</code> - Increase the data density by reducing the cell padding</li>
|
<li><code>compact</code> - Increase the data density by reducing the cell padding</li>
|
||||||
<li><code>hover</code> - Highlight a row when hovered over</li>
|
<li><code>hover</code> - Highlight a row when hovered over</li>
|
||||||
<li><code>order-column</code> - Highlight the cells in the column currently being ordering
|
<li><code>order-column</code> - Highlight the cells in the column currently being ordering upon</li>
|
||||||
upon</li>
|
|
||||||
<li><code>row-border</code> - Rows with a border</li>
|
<li><code>row-border</code> - Rows with a border</li>
|
||||||
<li><code>stripe</code> - Zebra striped rows</li>
|
<li><code>stripe</code> - Zebra striped rows</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
<p>These classes can be combined (simply assign multiple classes to the table) to build up the styling
|
<p>These classes can be combined (simply assign multiple classes to the table) to build up the styling that you want for your table. For more information on the
|
||||||
that you want for your table. For more information on the options in the DataTables stylesheet, please
|
options in the DataTables stylesheet, please <a href="//datatables.net/manual/styling/classes">refer to the DataTables styling manual</a></p>
|
||||||
<a href="//datatables.net/manual/styling/classes">refer to the DataTables styling manual</a></p>
|
|
||||||
|
|
||||||
<p>The <code>display</code> class is a short-cut for specifying the <code>stripe hover order-column
|
<p>The <code>display</code> class is a short-cut for specifying the <code>stripe hover order-column row-border</code> as the class name for a table. This is shown
|
||||||
row-border</code> as the class name for a table. This is shown in the example below.</p>
|
in the example below.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -545,13 +542,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -560,36 +555,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -612,8 +602,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -621,8 +610,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -635,10 +623,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -647,8 +633,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -684,14 +669,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -728,8 +710,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -737,10 +718,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -748,14 +727,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,10 +6,8 @@
|
|||||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||||
|
|
||||||
<title>DataTables example - Foundation</title>
|
<title>DataTables example - Foundation</title>
|
||||||
<link rel="stylesheet" type="text/css" href=
|
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.3.1/css/foundation.min.css">
|
||||||
"//cdnjs.cloudflare.com/ajax/libs/foundation/4.3.1/css/foundation.min.css">
|
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/integration/foundation/dataTables.foundation.css">
|
||||||
<link rel="stylesheet" type="text/css" href=
|
|
||||||
"../../extensions/Plugins/integration/foundation/dataTables.foundation.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||||
<style type="text/css" class="init">
|
<style type="text/css" class="init">
|
||||||
@ -17,8 +15,7 @@
|
|||||||
</style>
|
</style>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src=
|
<script type="text/javascript" language="javascript" src="../../extensions/Plugins/integration/foundation/dataTables.foundation.js"></script>
|
||||||
"../../extensions/Plugins/integration/foundation/dataTables.foundation.js"></script>
|
|
||||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||||
<script type="text/javascript" language="javascript" class="init">
|
<script type="text/javascript" language="javascript" class="init">
|
||||||
@ -36,15 +33,14 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Foundation</span></h1>
|
<h1>DataTables example <span>Foundation</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables can integrate seamlessly with <a href="http://foundation.zurb.com/">Foundation</a> using
|
<p>DataTables can integrate seamlessly with <a href="http://foundation.zurb.com/">Foundation</a> using Foundations's <a href=
|
||||||
Foundations's <a href="http://foundation.zurb.com/docs/components/tables.html">table styling
|
"http://foundation.zurb.com/docs/components/tables.html">table styling options</a> to present a consistent interface with your Foundation driven site / app.</p>
|
||||||
options</a> to present a consistent interface with your Foundation driven site / app.</p>
|
|
||||||
|
|
||||||
<p>DataTables' Foundation integration also provides a renderer for the pagination control in DataTables
|
<p>DataTables' Foundation integration also provides a renderer for the pagination control in DataTables to ensure that the pagination of the table is also styled
|
||||||
to ensure that the pagination of the table is also styled consistently by Foundation.</p>
|
consistently by Foundation.</p>
|
||||||
|
|
||||||
<p>This integration is done simply by including the DataTables Foundation files (CSS and JS) which will
|
<p>This integration is done simply by including the DataTables Foundation files (CSS and JS) which will set the defaults needed for DataTables to be initialised as
|
||||||
set the defaults needed for DataTables to be initialised as normal, as shown in this examples.</p>
|
normal, as shown in this examples.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -540,13 +536,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -557,19 +551,16 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href=
|
||||||
@ -580,15 +571,14 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -611,8 +601,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -620,8 +609,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -634,10 +622,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -646,8 +632,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -683,14 +668,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -727,8 +709,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -736,10 +717,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -747,14 +726,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,8 +31,8 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Base style - hover</span></h1>
|
<h1>DataTables example <span>Base style - hover</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows DataTables with just the <code>hover</code> class specified. This class will
|
<p>This example shows DataTables with just the <code>hover</code> class specified. This class will instruct DataTables' styling to highlight a row when the mouse
|
||||||
instruct DataTables' styling to highlight a row when the mouse is hovered over it.</p>
|
is hovered over it.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="hover" cellspacing="0" width="100%">
|
<table id="example" class="hover" cellspacing="0" width="100%">
|
||||||
@ -528,13 +528,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -543,36 +541,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -595,8 +588,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -604,8 +596,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -618,10 +609,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -630,8 +619,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -667,14 +655,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -711,8 +696,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -720,10 +704,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -731,14 +713,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -19,12 +19,10 @@
|
|||||||
<h1>DataTables example <span>Styling</span></h1>
|
<h1>DataTables example <span>Styling</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>When using DataTables, you want your tables to fit in with your site / app to make the end user
|
<p>When using DataTables, you want your tables to fit in with your site / app to make the end user experience as seamless as possible. For this reason, DataTables
|
||||||
experience as seamless as possible. For this reason, DataTables provides an easy to customise core
|
provides an easy to customise core stylesheet, which has a number of features that you can enable or disable as you required. Additionally there are a number of
|
||||||
stylesheet, which has a number of features that you can enable or disable as you required. Additionally
|
integration packages which can be used to fit DataTables into a site which uses some of the popular CSS libraries such as Twitter Bootstrap and Foundation. Or of
|
||||||
there are a number of integration packages which can be used to fit DataTables into a site which uses
|
course you can craft your own CSS to fit it into your site perfectly!</p>
|
||||||
some of the popular CSS libraries such as Twitter Bootstrap and Foundation. Or of course you can craft
|
|
||||||
your own CSS to fit it into your site perfectly!</p>
|
|
||||||
|
|
||||||
<p>This section includes examples of how DataTables can be styled using these methods.</p>
|
<p>This section includes examples of how DataTables can be styled using these methods.</p>
|
||||||
</div>
|
</div>
|
||||||
@ -56,14 +54,11 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -7,8 +7,7 @@
|
|||||||
|
|
||||||
<title>DataTables example - jQuery UI ThemeRoller</title>
|
<title>DataTables example - jQuery UI ThemeRoller</title>
|
||||||
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
<link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
|
||||||
<link rel="stylesheet" type="text/css" href=
|
<link rel="stylesheet" type="text/css" href="../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">
|
||||||
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">
|
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||||
<style type="text/css" class="init">
|
<style type="text/css" class="init">
|
||||||
@ -16,8 +15,7 @@
|
|||||||
</style>
|
</style>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src=
|
<script type="text/javascript" language="javascript" src="../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.js"></script>
|
||||||
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.js"></script>
|
|
||||||
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
|
||||||
<script type="text/javascript" language="javascript" class="init">
|
<script type="text/javascript" language="javascript" class="init">
|
||||||
@ -35,21 +33,17 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>jQuery UI ThemeRoller</span></h1>
|
<h1>DataTables example <span>jQuery UI ThemeRoller</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>DataTables has the ability to integrate seamlessly with almost any styling library, and integration
|
<p>DataTables has the ability to integrate seamlessly with almost any styling library, and integration files are provided for several of the popular styling
|
||||||
files are provided for several of the popular styling libraries, including <a href=
|
libraries, including <a href="//jqueryui.com">jQuery UI</a>.</p>
|
||||||
"//jqueryui.com">jQuery UI</a>.</p>
|
|
||||||
|
|
||||||
<p>To have your table styles integrate with jQuery UI's ThemeRoller styles, simply include the
|
<p>To have your table styles integrate with jQuery UI's ThemeRoller styles, simply include the DataTables CSS and JS integration files for jQuery UI, as shown in
|
||||||
DataTables CSS and JS integration files for jQuery UI, as shown in this example. Note also that because
|
this example. Note also that because jQuery doesn't provide table styles like some other CSS frameworks, the CSS integration file does add this styling
|
||||||
jQuery doesn't provide table styles like some other CSS frameworks, the CSS integration file does add
|
information.</p>
|
||||||
this styling information.</p>
|
|
||||||
|
|
||||||
<p>Please note that DataTables 1.10- actually has built-in support for jQuery UI styling integration
|
<p>Please note that DataTables 1.10- actually has built-in support for jQuery UI styling integration through the <a href=
|
||||||
through the <a href="//datatables.net/reference/option/jQueryUI"><code class="option" title=
|
"//datatables.net/reference/option/jQueryUI"><code class="option" title="DataTables initialisation option">jQueryUI<span>DT</span></code></a> option. However, this
|
||||||
"DataTables initialisation option">jQueryUI<span>DT</span></code></a> option. However, this option is
|
option is deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is provided for other libraries - a more modular,
|
||||||
deprecated in DataTables 1.10 and will be removed DataTables 1.11, matching how styling integration is
|
maintainable and extensible method. The method presented on this page is the method that will be use in future.</p>
|
||||||
provided for other libraries - a more modular, maintainable and extensible method. The method presented
|
|
||||||
on this page is the method that will be use in future.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="display" cellspacing="0" width="100%">
|
<table id="example" class="display" cellspacing="0" width="100%">
|
||||||
@ -545,13 +539,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -562,38 +554,33 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
|
||||||
"//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css</a></li>
|
|
||||||
<li><a href=
|
<li><a href=
|
||||||
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
|
"../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css">../../extensions/Plugins/integration/jqueryui/dataTables.jqueryui.css</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -616,8 +603,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -625,8 +611,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -639,10 +624,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -651,8 +634,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -688,14 +670,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -732,8 +711,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -741,10 +719,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -752,14 +728,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,8 +31,7 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Base style - no styling classes</span></h1>
|
<h1>DataTables example <span>Base style - no styling classes</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows the base DataTables style file being used, with none of the additional feature
|
<p>This example shows the base DataTables style file being used, with none of the additional feature style classes being used.</p>
|
||||||
style classes being used.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="" cellspacing="0" width="100%">
|
<table id="example" class="" cellspacing="0" width="100%">
|
||||||
@ -528,13 +527,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -543,36 +540,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -595,8 +587,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -604,8 +595,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -618,10 +608,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -630,8 +618,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -667,14 +654,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -711,8 +695,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -720,10 +703,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -731,14 +712,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,9 +31,8 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Base style - order-column</span></h1>
|
<h1>DataTables example <span>Base style - order-column</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows DataTables with just the <code>order-column</code> class specified. Typically you
|
<p>This example shows DataTables with just the <code>order-column</code> class specified. Typically you would want to use the <code>stripe</code> feature class in
|
||||||
would want to use the <code>stripe</code> feature class in addition to <code>order-column</code>
|
addition to <code>order-column</code> (possibly <code>hover</code> as well), but this example shows just the ordered column highlighting.</p>
|
||||||
(possibly <code>hover</code> as well), but this example shows just the ordered column highlighting.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="order-column" cellspacing="0" width="100%">
|
<table id="example" class="order-column" cellspacing="0" width="100%">
|
||||||
@ -529,13 +528,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -544,36 +541,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -596,8 +588,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -605,8 +596,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -619,10 +609,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -631,8 +619,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -668,14 +655,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -712,8 +696,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -721,10 +704,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -732,14 +713,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -31,8 +31,7 @@ $(document).ready(function() {
|
|||||||
<h1>DataTables example <span>Base style - row borders</span></h1>
|
<h1>DataTables example <span>Base style - row borders</span></h1>
|
||||||
|
|
||||||
<div class="info">
|
<div class="info">
|
||||||
<p>This example shows DataTables with just the <code>row-border</code> class specified, which can
|
<p>This example shows DataTables with just the <code>row-border</code> class specified, which can create a pleasing, minimalist, interface for your tables.</p>
|
||||||
create a pleasing, minimalist, interface for your tables.</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table id="example" class="row-border" cellspacing="0" width="100%">
|
<table id="example" class="row-border" cellspacing="0" width="100%">
|
||||||
@ -528,13 +527,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -543,36 +540,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -595,8 +587,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -604,8 +595,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -618,10 +608,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -630,8 +618,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -667,14 +654,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -711,8 +695,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -720,10 +703,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -731,14 +712,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -527,13 +527,11 @@ $(document).ready(function() {
|
|||||||
|
|
||||||
<div class="tabs">
|
<div class="tabs">
|
||||||
<div class="js">
|
<div class="js">
|
||||||
<p>The Javascript shown below is used to initialise the table shown in this
|
<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:</p><code class="multiline language-js">$(document).ready(function() {
|
|
||||||
$('#example').dataTable();
|
$('#example').dataTable();
|
||||||
} );</code>
|
} );</code>
|
||||||
|
|
||||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this
|
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||||
example:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
|
||||||
@ -542,36 +540,31 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="table">
|
<div class="table">
|
||||||
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
|
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:</p>
|
||||||
DataTables:</p>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="css">
|
<div class="css">
|
||||||
<div>
|
<div>
|
||||||
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
|
<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
|
||||||
files (below), in order to correctly display the table. The additional CSS used is shown
|
additional CSS used is shown below:</p><code class="multiline language-css"></code>
|
||||||
below:</p><code class="multiline language-css"></code>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<p>The following CSS library files are loaded for use in this example to provide the styling of the
|
<p>The following CSS library files are loaded for use in this example to provide the styling of the table:</p>
|
||||||
table:</p>
|
|
||||||
|
|
||||||
<ul>
|
<ul>
|
||||||
<li><a href=
|
<li><a href="../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
||||||
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="ajax">
|
<div class="ajax">
|
||||||
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
|
<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
|
||||||
will update automatically as any additional data is loaded.</p>
|
loaded.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="php">
|
<div class="php">
|
||||||
<p>The script used to perform the server-side processing for this table is shown below. Please note
|
<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
|
||||||
that this is just an example script using PHP. Server-side processing scripts can be written in any
|
processing scripts can be written in any language, using <a href="//datatables.net/manual/server-side">the protocol described in the DataTables
|
||||||
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
|
documentation</a>.</p>
|
||||||
DataTables documentation</a>.</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -594,8 +587,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</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/multiple_tables.html">Multiple tables</a></li>
|
||||||
<li><a href="../basic_init/hidden_columns.html">Hidden columns</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
|
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and colspan)</a></li>
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../basic_init/dom.html">DOM positioning</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/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/state_save.html">State saving</a></li>
|
||||||
@ -603,8 +595,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</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/scroll_xy.html">Scroll - horizontal and vertical</a></li>
|
||||||
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
|
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI ThemeRoller</a></li>
|
||||||
ThemeRoller</a></li>
|
|
||||||
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</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>
|
<li><a href="../basic_init/language.html">Language options</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -617,10 +608,8 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/dt_events.html">DataTables 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/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/length_menu.html">Page length options</a></li>
|
||||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control
|
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||||
elements</a></li>
|
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan /
|
|
||||||
colspan)</a></li>
|
|
||||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</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-attributes.html">HTML5 data-* attributes</a></li>
|
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
|
||||||
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
<li><a href="../advanced_init/language_file.html">Language file</a></li>
|
||||||
@ -629,8 +618,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../advanced_init/row_grouping.html">Row grouping</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/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/dom_toolbar.html">Custom toolbar elements</a></li>
|
||||||
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
|
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence control</a></li>
|
||||||
control</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -666,14 +654,11 @@ $(document).ready(function() {
|
|||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../api/add_row.html">Add rows</a></li>
|
<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.html">Individual column searching (text inputs)</a></li>
|
||||||
<li><a href="../api/multi_filter_select.html">Individual column searching (select
|
<li><a href="../api/multi_filter_select.html">Individual column searching (select inputs)</a></li>
|
||||||
inputs)</a></li>
|
|
||||||
<li><a href="../api/highlight.html">Highlighting rows and columns</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
|
<li><a href="../api/row_details.html">Child rows (show extra / detailed information)</a></li>
|
||||||
information)</a></li>
|
|
||||||
<li><a href="../api/select_row.html">Row selection (multiple rows)</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
|
<li><a href="../api/select_single_row.html">Row selection and deletion (single row)</a></li>
|
||||||
row)</a></li>
|
|
||||||
<li><a href="../api/form.html">Form inputs</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/counter_columns.html">Index column</a></li>
|
||||||
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
|
||||||
@ -710,8 +695,7 @@ $(document).ready(function() {
|
|||||||
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
<li><a href="../server_side/select_rows.html">Row selection</a></li>
|
||||||
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
<li><a href="../server_side/jsonp.html">JSONP data source for remote domains</a></li>
|
||||||
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
<li><a href="../server_side/defer_loading.html">Deferred loading of data</a></li>
|
||||||
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for
|
<li><a href="../server_side/pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
|
||||||
paging</a></li>
|
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -719,10 +703,8 @@ $(document).ready(function() {
|
|||||||
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
|
||||||
<ul class="toc">
|
<ul class="toc">
|
||||||
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
|
<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
|
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type detection)</a></li>
|
||||||
detection)</a></li>
|
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no 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/range_filtering.html">Custom filtering - range search</a></li>
|
||||||
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
@ -730,14 +712,11 @@ $(document).ready(function() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="epilogue">
|
<div class="epilogue">
|
||||||
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
|
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full information about its API properties and methods.<br>
|
||||||
information about its API properties and methods.<br>
|
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and <a href="http://www.datatables.net/plug-ins">plug-ins</a>
|
||||||
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
|
which extend the capabilities of DataTables.</p>
|
||||||
<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=
|
<p class="copyright">DataTables designed and created by <a href="http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
||||||
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> © 2007-2014<br>
|
|
||||||
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user