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

New: New examples for the various features of DataTables 1.8

Browse Source
This commit is contained in:
Allan Jardine 2011-04-25 19:07:57 +01:00
parent 198222d8d6
commit a9b9dc4ffe
79 changed files with 1498 additions and 239 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
examples/advanced_init/column_render.html
View File

@ -31,7 +31,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> with column rendering
DataTables with column rendering
</div>
<h1>Preamble</h1>
@ -569,7 +569,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

65
examples/advanced_init/complex_header.html
View File

@ -8,76 +8,53 @@
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
.bt { border-top: 1px solid black; }
.br { border-right: 1px solid black; }
.bb { border-bottom: 1px solid black; }
.bl { border-left: 1px solid black; }
</style>
<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" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"sScrollY": "300px",
"bPaginate": false//,
//"aoColumnDefs": [
// { "bVisible": false, "aTargets": [3] },
// { "sWidth": "50%", "aTargets": [2] }
//]
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [2] }
]
} );
//$('#example').dataTable().fnSetColumnVis( 1, false );
//$('#example').dataTable().fnSetColumnVis( 1, true );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> complex header example (row and colspans)
DataTables complex header example (rowspan and colspan)
</div>
<h1>Preamble</h1>
<p>When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspans in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added. The example shown below has the core browser information grouped together.</p>
<p>Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect. In addition to the basic behaviour, DataTables can also take colspan and rowspans into account when working with hidden columns. The colspan and rowspan attributes for each cell are automatically calculated and rendered on the page for you. This also allows <a href="http://datatables.net/extras/colvis/">the ColVis extra</a> for DataTables to work great with hidden columns.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th class="bl bt">1</th>
<th colspan="3" rowspan="2" class="bl br bt">2</th>
<th class="br bt">3</th>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th class="bl br" rowspan="3">4</th>
<td class="bl br">5</td>
</tr>
<tr>
<th class="bl br" colspan="2">6</th>
<th class="br" rowspan="3">7</th>
<th class="br bt" rowspan="3">8</th>
</tr>
<tr>
<th class="bl br">9</th>
<th class="bl br">10</th>
</tr>
<tr>
<th class="bl br" colspan="2">11</th>
<th class="bl br">12</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th class="bl bt">1</th>
<th colspan="3" rowspan="2" class="bl br bt">2</th>
<th class="br bt">3</th>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr>
<th class="bl br">4</th>
<th class="bl br">5</th>
</tr>
<tr>
<th class="bl br" colspan="5">6</th>
<th colspan="3">Details</th>
</tr>
</tfoot>
<tbody>
@ -492,7 +469,11 @@
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
$('#example').dataTable();
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [2] }
]
} );
} );</pre>
@ -584,7 +565,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/advanced_init/dom_multiple_elements.html
View File

@ -25,7 +25,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> DOM positioning - multiple instances example
DataTables DOM positioning - multiple instances example
</div>
<h1>Preamble</h1>
@ -562,7 +562,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/advanced_init/dom_toolbar.html
View File

@ -29,7 +29,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> Custom DOM additions
DataTables Custom DOM additions
</div>
<h1>Preamble</h1>
@ -567,7 +567,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/advanced_init/events_post_init.html
View File

@ -53,11 +53,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> events (post-initialisation) example
DataTables events (post-initialisation) example
</div>
<h1>Preamble</h1>
<p>Events which are assigned to the table elements are retained by <i>DataTables</i> such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). You can do this at any time, although if you apply the handlers after the table has been initialised there is an extra set. Rather then queriing the DOM to get all rows (since they aren't there) you need to use the <b>fnGetNodes()</b> API function. This is shown in this example.</p>
<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). You can do this at any time, although if you apply the handlers after the table has been initialised there is an extra set. Rather then queriing the DOM to get all rows (since they aren't there) you need to use the <b>fnGetNodes()</b> API function. This is shown in this example.</p>
<h1>Live example</h1>
<div id="demo">
@ -617,7 +617,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/advanced_init/events_pre_init.html
View File

@ -53,11 +53,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> events (pre-initialisation) example
DataTables events (pre-initialisation) example
</div>
<h1>Preamble</h1>
<p>Events which are assigned to the table elements are retained by <i>DataTables</i> such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). If you apply the event handlers before you initialise <i>DataTables</i>, you just do this in the normal way. This is shown in this example where the call <b>$('#example tbody tr[title]').tooltip();</b> is made before the table is initialised.</p>
<p>Events which are assigned to the table elements are retained by DataTables such that they will still work as you would expect, even after changing the sort order etc. (no need to reapply the event handlers). If you apply the event handlers before you initialise DataTables, you just do this in the normal way. This is shown in this example where the call <b>$('#example tbody tr[title]').tooltip();</b> is made before the table is initialised.</p>
<h1>Live example</h1>
<div id="demo">
@ -617,7 +617,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/advanced_init/footer_callback.html
View File

@ -44,11 +44,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> footer callback example
DataTables footer callback example
</div>
<h1>Preamble</h1>
<p><i>DataTables</i> using the header and footer callback manipulation functions (fnHeaderCallback() and fnFooterCallback()) you can perform some powerful and useful data manipulation. The example given below shows how a callback function can be used to total up visible (and hidden) data, taking into account all of DataTable's features (pagination, filtering etc).</p>
<p>DataTables using the header and footer callback manipulation functions (fnHeaderCallback() and fnFooterCallback()) you can perform some powerful and useful data manipulation. The example given below shows how a callback function can be used to total up visible (and hidden) data, taking into account all of DataTable's features (pagination, filtering etc).</p>
<h1>Live example</h1>
<div id="demo">
@ -601,7 +601,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/advanced_init/highlight.html
View File

@ -20,7 +20,7 @@
<body id="dt_example" class="ex_highlight_row">
<div id="container">
<div class="full_width big">
<i>DataTables</i> highlighting via CSS example
DataTables highlighting via CSS example
</div>
<h1>Preamble</h1>
@ -595,7 +595,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/advanced_init/html_sort.html
View File

@ -20,7 +20,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> HTML sorting example
DataTables HTML sorting example
</div>
<h1>Preamble</h1>
@ -147,7 +147,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/advanced_init/language_file.html
View File

@ -24,11 +24,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> language file example
DataTables language file example
</div>
<h1>Preamble</h1>
<p>As well as being able to pass language information to <i>DataTables</i> through the initialisation object, you can also store the language information in a file, which <i>DataTables</i> will then read. Useful if you are using server-side processes to switch language. The following example shows <i>DataTables</i> reading a German language file.</p>
<p>As well as being able to pass language information to DataTables through the initialisation object, you can also store the language information in a file, which DataTables will then read. Useful if you are using server-side processes to switch language. The following example shows DataTables reading a German language file.</p>
<h1>Live example</h1>
<div id="demo">
@ -559,7 +559,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/advanced_init/length_menu.html
View File

@ -22,7 +22,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> defining the length menu example
DataTables defining the length menu example
</div>
<h1>Preamble</h1>
@ -555,7 +555,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/advanced_init/row_callback.html
View File

@ -577,7 +577,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/advanced_init/row_grouping.html
View File

@ -57,7 +57,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> row grouping example
DataTables row grouping example
</div>
<h1>Preamble</h1>
@ -612,7 +612,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/advanced_init/sorting_control.html
View File

@ -28,7 +28,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> sorting direction control example
DataTables sorting direction control example
</div>
<h1>Preamble</h1>
@ -576,7 +576,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/ajax/ajax.html
View File

@ -23,11 +23,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> AJAX source example
DataTables AJAX source example
</div>
<h1>Preamble</h1>
<p>Although <i>DataTables</i> is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have <i>DataTables</i> go to that source with an XHR call and load data from there. This example shows the latter method in action. <i>DataTables</i> expects an object with an array called "aaData" with the data source.</p>
<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
<h1>Live example</h1>
<div id="dynamic">
@ -155,7 +155,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

22
examples/ajax/arrays_subobjects.html → examples/ajax/custom_data_property.html
View File

@ -15,17 +15,8 @@
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays_subobjects.txt",
"aoColumns": [
null,
null,
{ "mDataProp": 2 },
{ "mDataProp": "3.version" },
{ "mDataProp": "3.grade" }
],
"fnInitComplete": function () {
oTable.fnUpdate( 'AAAA', $('tbody>tr:eq(0)')[0], 4 );
}
"sAjaxSource": "sources/custom_prop.txt",
"sAjaxDataProp": "demo"
} );
} );
</script>
@ -33,11 +24,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> AJAX source example
DataTables AJAX source example - reading an arbitrary data source property
</div>
<h1>Preamble</h1>
<p>Although <i>DataTables</i> is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have <i>DataTables</i> go to that source with an XHR call and load data from there. This example shows the latter method in action. <i>DataTables</i> expects an object with an array called "aaData" with the data source.</p>
<p>By default DataTables will read the data to show in the table from the <i>aaData</i> property of the object returned from the server. By using the initialisation option <b>sAjaxDataProp</b> you can customise this to whatever you wish. This examples shows it being set to 'demo'. Note that this option will also work with server-side processing. Additionally, it is possible to set <b>sAjaxDataProp</b> to be an empty string, which results in DataTables treating the given data source as the table data array (rather than as property of an object).</p>
<h1>Live example</h1>
<div id="dynamic">
@ -72,7 +63,8 @@
<pre>$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt"
"sAjaxSource": "sources/custom_prop.txt",
"sAjaxDataProp": "demo"
} );
} );</pre>
@ -165,7 +157,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

17
examples/ajax/deep.html
View File

@ -30,11 +30,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> AJAX source example
DataTables AJAX source example - deep property reading for a data source
</div>
<h1>Preamble</h1>
<p>Although <i>DataTables</i> is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have <i>DataTables</i> go to that source with an XHR call and load data from there. This example shows the latter method in action. <i>DataTables</i> expects an object with an array called "aaData" with the data source.</p>
<p>The ability of DataTables to read arbitrary object properties as a column data source is extended to <i>n</i> levels of objects, through the use of standard Javascript dotted object notation. For example in this example "platform.details.0" refers to the first element of the array "details", of the object "platform", for each column. Any level of 'dots' can be used.</p>
<h1>Live example</h1>
<div id="dynamic">
@ -67,9 +67,16 @@
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
$('#example').dataTable( {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt"
"sAjaxSource": "sources/deep.txt",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform.inner" },
{ "mDataProp": "platform.details.0" },
{ "mDataProp": "platform.details.1" }
]
} );
} );</pre>
@ -162,7 +169,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

18
examples/ajax/null_source.html → examples/ajax/defer_render.html
View File

@ -16,13 +16,8 @@
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt",
"aoColumns": [
null,
null,
null,
null,
{ "mDataProp": null }
]
"bDeferRender": true,
bSortClasses: true
} );
} );
</script>
@ -30,11 +25,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> AJAX source example
DataTables AJAX source example - with deferred rendering
</div>
<h1>Preamble</h1>
<p>Although <i>DataTables</i> is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have <i>DataTables</i> go to that source with an XHR call and load data from there. This example shows the latter method in action. <i>DataTables</i> expects an object with an array called "aaData" with the data source.</p>
<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 build in deferred rendering. Rather than have DataTables create all TR and TD nodes required for the table when the data is loaded, when deferred rendering is enabled, DataTables will only create the nodes required for each individual display - these nodes are then retained incase they are needed again. This can give a significant performance increase, since a lot less work is done at initialisation time.</p>
<h1>Live example</h1>
<div id="dynamic">
@ -69,7 +64,8 @@
<pre>$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt"
"sAjaxSource": "sources/arrays.txt",
"bDeferRender": true
} );
} );</pre>
@ -162,7 +158,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

172
examples/ajax/null_data_source.html Normal file
View File

@ -0,0 +1,172 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<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" charset="utf-8">
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt",
"aoColumns": [
null,
null,
null,
null,
null,
{ "mDataProp": null }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables AJAX source example - null data source for a column
</div>
<h1>Preamble</h1>
<p>In some tables it can be useful to not need to specify any data source for a column, as it's content is automatically generated (for example using fnRender). This is fairly common with add, edit and delete columns for a CRUD interface. You can now use the <b>mDataProp</b> set to <i>null</i> to specify that the column has no data source. DataTables will render this column as empty.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="10%">CSS grade</th>
<th width="5%">Empty!</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt",
"aoColumns": [
null,
null,
null,
null,
null,
{ "mDataProp": null }
]
} );
} );</pre>
<h1>Other examples</h1>
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</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/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling:
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
<li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
</ul>
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">DataTables &copy; Allan Jardine 2008-2010</span>
</div>
</div>
</body>
</html>

17
examples/ajax/objects.html
View File

@ -30,11 +30,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> AJAX source example
DataTables AJAX source example - array of objects as a data source
</div>
<h1>Preamble</h1>
<p>Although <i>DataTables</i> is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have <i>DataTables</i> go to that source with an XHR call and load data from there. This example shows the latter method in action. <i>DataTables</i> expects an object with an array called "aaData" with the data source.</p>
<p>By default, DataTables will expect an array of arrays for its data source, with each cell in the table being exactly described in the data source. However, this can often be quite limiting, or not suitable for a particular data source, so it is possible to specify which property of a source object that DataTables should read for each column. In this example the Ajax source returns an array of objects (one object for each row), and will then read the required property for each column.</p>
<h1>Live example</h1>
<div id="dynamic">
@ -67,9 +67,16 @@
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
$('#example').dataTable( {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt"
"sAjaxSource": "sources/objects.txt",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform" },
{ "mDataProp": "version" },
{ "mDataProp": "grade" }
]
} );
} );</pre>
@ -162,7 +169,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

22
examples/ajax/objects_subarrays.html
View File

@ -22,10 +22,7 @@
{ "mDataProp": "platform" },
{ "mDataProp": "details.0" },
{ "mDataProp": "details.1" }
],
"fnInitComplete": function () {
oTable.fnUpdate( 'AAAA', $('tbody>tr:eq(0)')[0], 4 );
}
]
} );
} );
</script>
@ -33,11 +30,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> AJAX source example
DataTables AJAX source example - array of objects with sub-arrays as a data source
</div>
<h1>Preamble</h1>
<p>Although <i>DataTables</i> is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have <i>DataTables</i> go to that source with an XHR call and load data from there. This example shows the latter method in action. <i>DataTables</i> expects an object with an array called "aaData" with the data source.</p>
<p>While the ability of DataTables to read arbitrary objects properties as a data source for any column is very powerful, it actually goes further than single level object properties; it is possible to read a data source for a column from a deeply nested array or property. This is specified in typical Javascript dotted object notation. For example "details.0" (used in this example) refers to the first property in an array called "details". "details.1" refers to the second property, etc. Object properties can also be used - for example "details.version" is perfectly valid, if that property is available in your data source.</p>
<h1>Live example</h1>
<div id="dynamic">
@ -70,9 +67,16 @@
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
$('#example').dataTable( {
var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "sources/arrays.txt"
"sAjaxSource": "sources/objects_subarrays.txt",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform" },
{ "mDataProp": "details.0" },
{ "mDataProp": "details.1" }
]
} );
} );</pre>
@ -165,7 +169,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/ajax/sources/custom_prop.txt
View File

@ -1,4 +1,4 @@
{ "test": [
{ "demo": [
["Trident","Internet Explorer 4.0","Win 95+","4","X"],
["Trident","Internet Explorer 5.0","Win 95+","5","C"],
["Trident","Internet Explorer 5.5","Win 95+","5.5","A"],

6
examples/api/add_row.html
View File

@ -33,11 +33,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> add row example
DataTables add row example
</div>
<h1>Preamble</h1>
<p><i>DataTables</i> adding rows in DataTables is done by assigning the DataTables jQuery object to a variable when initialising it, and then using it's API methods to add a new row. Deleting rows can be done in a similar manner.</p>
<p>DataTables adding rows in DataTables is done by assigning the DataTables jQuery object to a variable when initialising it, and then using it's API methods to add a new row. Deleting rows can be done in a similar manner.</p>
<h1>Live example</h1>
<p><a href="javascript:void(0);" onclick="fnClickAddRow();">Click to add a new row</a></p>
@ -172,7 +172,7 @@ function fnClickAddRow() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/api/api_in_init.html
View File

@ -29,7 +29,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> using the DataTables object in the initialiser example
DataTables using the DataTables object in the initialiser example
</div>
<h1>Preamble</h1>
@ -570,7 +570,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/api/counter_column.html
View File

@ -35,7 +35,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> row numbers example
DataTables row numbers example
</div>
<h1>Preamble</h1>
@ -641,7 +641,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/api/editable.html
View File

@ -37,11 +37,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> editing example
DataTables editing example
</div>
<h1>Preamble</h1>
<p>Using <i>DataTables</i> in-combination with the excellent <a href="http://www.appelsiini.net/projects/jeditable">jEditable</a> plugin for jQuery allows you to produce a table which can have individual cells edited. The table can then be updated such that filtering, sorting etc. will all work as expected. This is showing in the demo below.</p>
<p>Using DataTables in-combination with the excellent <a href="http://www.appelsiini.net/projects/jeditable">jEditable</a> plugin for jQuery allows you to produce a table which can have individual cells edited. The table can then be updated such that filtering, sorting etc. will all work as expected. This is showing in the demo below.</p>
<p>The example shows how a table element can be edited (you could limit to a particular column if you wish using the selector), posted to the server (for saving in a database or whatever) and then placed back into the DataTable. The server's processing in this example simply appends the string '(server updated)' to indicate that something has happened on the server.</p>
<p>Note also that this example makes use of the information in the 'ID' attribute of the TR element. This is useful in order to tell the server what row is being updated - this can readily be expended to include column information as required. Further to this, it is worth noting that to use this type of example with DataTables' server-side processing option, you must use <a href="http://datatables.net/usage/callbacks#fnDrawCallback">fnDrawCallback</a> to apply the event listeners on each draw.</p>
@ -588,7 +588,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/api/form.html
View File

@ -28,11 +28,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> with form elements example
DataTables with form elements example
</div>
<h1>Preamble</h1>
<p>The following example shows how form elements can be used within a <i>DataTables</i> enhanced table. The trick here is that <i>DataTables</i> does not include the DOM elements which are not currently being displayed, therefore you need to add a submit event handler to gather together all of the input elements from the table, and then use the handy jQuery <b>serialize()</b> function to string together the data. It can then be posted to the server as you wish.</p>
<p>The following example shows how form elements can be used within a DataTables enhanced table. The trick here is that DataTables does not include the DOM elements which are not currently being displayed, therefore you need to add a submit event handler to gather together all of the input elements from the table, and then use the handy jQuery <b>serialize()</b> function to string together the data. It can then be posted to the server as you wish.</p>
<h1>Live example</h1>
<div id="demo">
@ -631,7 +631,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/api/highlight.html
View File

@ -30,11 +30,11 @@
<body id="dt_example" class="ex_highlight">
<div id="container">
<div class="full_width big">
<i>DataTables</i> highlighting example
DataTables highlighting example
</div>
<h1>Preamble</h1>
<p>The highlighting of rows and columns have be quite useful for attracting attention to where the user's cursor is in the data array. 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. This example shows that in action on a <i>DataTables</i> enhanced table - this type of effect would be particularly effective on tables with dense information.</p>
<p>The highlighting of rows and columns have be quite useful for attracting attention to where the user's cursor is in the data array. 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. This example shows that in action on a DataTables enhanced table - this type of effect would be particularly effective on tables with dense information.</p>
<h1>Live example</h1>
<div id="demo">
@ -571,7 +571,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/api/multi_filter.html
View File

@ -57,11 +57,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> individual column filtering example
DataTables individual column filtering example
</div>
<h1>Preamble</h1>
<p>The filtering functionality that is provided by <i>DataTables</i> is very useful for quickly search through the information in the table - however the search is global, and you (or the end user) may wish to filter only on a particular column of data. To met this need the <i>DataTables</i> <b>fnFilter()</b> API function allow you to specify a column to limit to search to. Note that this works in-combination with the global search filter. Further note that because the input elements are outside of the control of DataTables, with state saving enabled, stored values are not automatically restored - please see <a href="http://datatables.net/forums/comments.php?DiscussionID=2864#Item_3">this post in the forum</a> for how to do this.</p>
<p>The filtering functionality that is provided by DataTables is very useful for quickly search through the information in the table - however the search is global, and you (or the end user) may wish to filter only on a particular column of data. To met this need the DataTables <b>fnFilter()</b> API function allow you to specify a column to limit to search to. Note that this works in-combination with the global search filter. Further note that because the input elements are outside of the control of DataTables, with state saving enabled, stored values are not automatically restored - please see <a href="http://datatables.net/forums/comments.php?DiscussionID=2864#Item_3">this post in the forum</a> for how to do this.</p>
<p>The example below shows a table which has a text input box for each column in the footer element of the table. This allows the data in each column to be quickly filtered upon by the end user.</p>
<h1>Live example</h1>
@ -627,7 +627,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/api/multi_filter_select.html
View File

@ -99,7 +99,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> individual column filtering example (using select menus)
DataTables individual column filtering example (using select menus)
</div>
<h1>Preamble</h1>
@ -710,7 +710,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/api/regex.html
View File

@ -64,7 +64,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> filtering API example
DataTables filtering API example
</div>
<h1>Preamble</h1>
@ -677,7 +677,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/api/row_details.html
View File

@ -77,11 +77,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> hidden row details example
DataTables hidden row details example
</div>
<h1>Preamble</h1>
<p><i>DataTables</i> has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
<h1>Live example</h1>
<div id="demo">
@ -656,7 +656,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/api/select_row.html
View File

@ -48,11 +48,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> row select example
DataTables row select example
</div>
<h1>Preamble</h1>
<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 using the API functions that <i>DataTables</i> provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
<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 using the API functions that DataTables provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
<h1>Live example</h1>
<div id="demo">
@ -607,7 +607,7 @@ function fnGetSelected( oTableLocal )
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/api/select_single_row.html
View File

@ -55,11 +55,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> row select example
DataTables row select example
</div>
<h1>Preamble</h1>
<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 using the API functions that <i>DataTables</i> provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
<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 using the API functions that DataTables provides. The example below uses the <b>fnRowCallback()</b> function to add a 'click' listener to each row, which will highlight the required row when selected. The indexes of the selected rows are then provided through the custom function <b>fnGetSelected()</b> for later processing.</p>
<h1>Live example</h1>
<p><a href="javascript:void(0)" id="delete">Delete selected row</a></p>
@ -622,7 +622,7 @@ function fnGetSelected( oTableLocal )
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/api/show_hide.html
View File

@ -32,7 +32,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> show and hide columns dynamically example
DataTables show and hide columns dynamically example
</div>
<h1>Preamble</h1>
@ -581,7 +581,7 @@ function fnShowHide( iCol )
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/api/tabs_and_scrolling.html
View File

@ -407,7 +407,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/basic_init/alt_pagination.html
View File

@ -22,11 +22,11 @@
<body id="dt_example" class="example_alt_pagination">
<div id="container">
<div class="full_width big">
<i>DataTables</i> alternative pagination example
DataTables alternative pagination example
</div>
<h1>Preamble</h1>
<p>The page controls which are used by default in <i>DataTables</i> (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customise the controls presented to the end user. This is made simple by <i>DataTables</i> through it's extensible pagination mechanism. There are two types of pagination controls built into <i>DataTables</i>: <b>two_button</b> (default) and <b>full_numbers</b>. To switch between these two types, use the <b>sPaginationType</b> initialisation parameter. You can add additional types of pagination control by extending the <b>$.fn.dataTableExt.oPagination</b> object.</p>
<p>The page controls which are used by default in DataTables (forward and backward buttons only) are great for most situations, but there are cases where you may wish to customise the controls presented to the end user. This is made simple by DataTables through it's extensible pagination mechanism. There are two types of pagination controls built into DataTables: <b>two_button</b> (default) and <b>full_numbers</b>. To switch between these two types, use the <b>sPaginationType</b> initialisation parameter. You can add additional types of pagination control by extending the <b>$.fn.dataTableExt.oPagination</b> object.</p>
<p>Note also that the number of pages which are shown with direct links (the 1, 2, 3...) can be changed by setting the variable <b>jQuery.fn.dataTableExt.oPagination.iFullNumbersShowPages</b> (default 5). Odd numbers are best to keep the display even.</p>
<p>The example below shows the <b>full_numbers</b> type of pagination, where 'first', 'previous', 'next' and 'last' buttons are presented, as well as the five pages around the current page.</p>
@ -518,7 +518,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

570
examples/basic_init/complex_header.html Normal file
View File

@ -0,0 +1,570 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<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" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable();
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables complex header example (row and colspans)
</div>
<h1>Preamble</h1>
<p>When using tables to display data, you will often wish to display column information in groups. DataTables fully supports colspan and rowspans in the header, assigning the required sorting listeners to the TH element suitable for that column. Each column must have one TH cell (and only one) which is unique to it for the listeners to be added. The example shown below has the core browser information grouped together.</p>
<h1>Live example</h1>
<div id="demo">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th colspan="3">Details</th>
</tr>
<tr>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</thead>
<tfoot>
<tr>
<th rowspan="2">Rendering engine</th>
<th rowspan="2">Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
<tr>
<th colspan="3">Details</th>
</tr>
</tfoot>
<tbody>
<tr class="gradeX">
<td>Trident</td>
<td>Internet
Explorer 4.0</td>
<td>Win 95+</td>
<td class="center">4</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Trident</td>
<td>Internet
Explorer 5.0</td>
<td>Win 95+</td>
<td class="center">5</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 5.5</td>
<td>Win 95+</td>
<td class="center">5.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet
Explorer 6</td>
<td>Win 98+</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>Internet Explorer 7</td>
<td>Win XP SP2+</td>
<td class="center">7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Trident</td>
<td>AOL browser (AOL desktop)</td>
<td>Win XP</td>
<td class="center">6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 1.5</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 2.0</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Firefox 3.0</td>
<td>Win 2k+ / OSX.3+</td>
<td class="center">1.9</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.0</td>
<td>OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Camino 1.5</td>
<td>OSX.3+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape 7.2</td>
<td>Win 95+ / Mac OS 8.6-9.2</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Browser 8</td>
<td>Win 98SE+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Netscape Navigator 9</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.1</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.2</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.2</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.3</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.4</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.4</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.5</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.6</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">1.6</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.7</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.7</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Mozilla 1.8</td>
<td>Win 98+ / OSX.1+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Seamonkey 1.1</td>
<td>Win 98+ / OSX.2+</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Gecko</td>
<td>Epiphany 2.20</td>
<td>Gnome</td>
<td class="center">1.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.2</td>
<td>OSX.3</td>
<td class="center">125.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 1.3</td>
<td>OSX.3</td>
<td class="center">312.8</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 2.0</td>
<td>OSX.4+</td>
<td class="center">419.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>Safari 3.0</td>
<td>OSX.4+</td>
<td class="center">522.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>OmniWeb 5.5</td>
<td>OSX.4+</td>
<td class="center">420</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>iPod Touch / iPhone</td>
<td>iPod</td>
<td class="center">420.1</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Webkit</td>
<td>S60</td>
<td>S60</td>
<td class="center">413</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.0</td>
<td>Win 95+ / OSX.1+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 7.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.0</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 8.5</td>
<td>Win 95+ / OSX.2+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.0</td>
<td>Win 95+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.2</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera 9.5</td>
<td>Win 88+ / OSX.3+</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Opera for Wii</td>
<td>Wii</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nokia N800</td>
<td>N800</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>Presto</td>
<td>Nintendo DS browser</td>
<td>Nintendo DS</td>
<td class="center">8.5</td>
<td class="center">C/A<sup>1</sup></td>
</tr>
<tr class="gradeC">
<td>KHTML</td>
<td>Konqureror 3.1</td>
<td>KDE 3.1</td>
<td class="center">3.1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.3</td>
<td>KDE 3.3</td>
<td class="center">3.3</td>
<td class="center">A</td>
</tr>
<tr class="gradeA">
<td>KHTML</td>
<td>Konqureror 3.5</td>
<td>KDE 3.5</td>
<td class="center">3.5</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Tasman</td>
<td>Internet Explorer 4.5</td>
<td>Mac OS 8-9</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.1</td>
<td>Mac OS 7.6-9</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Tasman</td>
<td>Internet Explorer 5.2</td>
<td>Mac OS 8-X</td>
<td class="center">1</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.1</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeA">
<td>Misc</td>
<td>NetFront 3.4</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">A</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Dillo 0.8</td>
<td>Embedded devices</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Links</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeX">
<td>Misc</td>
<td>Lynx</td>
<td>Text only</td>
<td class="center">-</td>
<td class="center">X</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>IE Mobile</td>
<td>Windows Mobile 6</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeC">
<td>Misc</td>
<td>PSP browser</td>
<td>PSP</td>
<td class="center">-</td>
<td class="center">C</td>
</tr>
<tr class="gradeU">
<td>Other browsers</td>
<td>All others</td>
<td>-</td>
<td class="center">-</td>
<td class="center">U</td>
</tr>
</tbody>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
$('#example').dataTable();
} );</pre>
<h1>Other examples</h1>
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</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/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling:
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
<li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
</ul>
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">
DataTables &copy; Allan Jardine 2008-2010.
</span>
</div>
</div>
</body>
</html>

6
examples/basic_init/dom.html
View File

@ -22,11 +22,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> DOM positioning example
DataTables DOM positioning example
</div>
<h1>Preamble</h1>
<p>When customising <i>DataTables</i> for your own usage, you might find that the default position of the feature elements (filter input etc) is not quite to your liking. To address this issue <i>DataTables</i> takes inspiration from the CSS 3 Advanced Layout Module and provides the <b>sDom</b> initialisation parameter which can be set to indicate where you which particular features to appear in the DOM. You can also specify <b>div</b> wrapping containers (with classes) to provide complete layout flexibility. The syntax available is:</p>
<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. To address this issue DataTables takes inspiration from the CSS 3 Advanced Layout Module and provides the <b>sDom</b> initialisation parameter which can be set to indicate where you which particular features to appear in the DOM. You can also specify <b>div</b> wrapping containers (with classes) to provide complete layout flexibility. The syntax available is:</p>
<ul>
<li><b>l</b> - Length changing</li>
<li><b>f</b> - Filtering input</li>
@ -570,7 +570,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/basic_init/filter_only.html
View File

@ -26,7 +26,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> with only the filter feature
DataTables with only the filter feature
</div>
<h1>Preamble</h1>
@ -559,7 +559,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/basic_init/hidden_columns.html
View File

@ -24,7 +24,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> with hidden columns
DataTables with hidden columns
</div>
<h1>Preamble</h1>
@ -555,7 +555,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/basic_init/language.html
View File

@ -28,11 +28,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> dynamic language
DataTables dynamic language
</div>
<h1>Preamble</h1>
<p>Changing the language information displayed by <i>DataTables</i> is as simple as passing in a language object to the dataTable constructor. The example above shows a different set of English language definitions to be used, rather than the defaults.</p>
<p>Changing the language information displayed by DataTables is as simple as passing in a language object to the dataTable constructor. The example above shows a different set of English language definitions to be used, rather than the defaults.</p>
<h1>Live example</h1>
<div id="demo">
@ -563,7 +563,7 @@ $('#example').dataTable( {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

8
examples/basic_init/multi_col_sort.html
View File

@ -35,12 +35,12 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> multi column and custom sort example
DataTables multi column and custom sort example
</div>
<h1>Preamble</h1>
<p>As you would expect with a desktop application, <i>DataTables</i> allows you to sort by multiple columns at the same time. This multiple sorting mechanism is always active if the <b>bSort</b> initialiser is <b>true</b> (it is by default) and the end user can activate it by 'shift' clicking on the column they want to add to the sort. You can also pass in an array of information using the <b>aaSorting</b> initialiser, as I have done in the example below there the first column is sorted as the primary column and the second one then used if the elements in the first column match. As many columns as you wish can be added to the sort.</p>
<p><i>DataTables</i> also provides a method to add your own sorting functions, to extend those built into DataTables. This can be very useful if you wish to sort on data formats such as currency and non-Javascript standard date formats (<a href="http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm/">this natural sort</a> algorithm is a popular useage). This is achieved by extending the <b>jQuery.fn.dataTableExt</b> object with ascending and descending sort functions. In the example below I've added case sensitive sorting functions.</p>
<p>As you would expect with a desktop application, DataTables allows you to sort by multiple columns at the same time. This multiple sorting mechanism is always active if the <b>bSort</b> initialiser is <b>true</b> (it is by default) and the end user can activate it by 'shift' clicking on the column they want to add to the sort. You can also pass in an array of information using the <b>aaSorting</b> initialiser, as I have done in the example below there the first column is sorted as the primary column and the second one then used if the elements in the first column match. As many columns as you wish can be added to the sort.</p>
<p>DataTables also provides a method to add your own sorting functions, to extend those built into DataTables. This can be very useful if you wish to sort on data formats such as currency and non-Javascript standard date formats (<a href="http://www.overset.com/2008/09/01/javascript-natural-sort-algorithm/">this natural sort</a> algorithm is a popular useage). This is achieved by extending the <b>jQuery.fn.dataTableExt</b> object with ascending and descending sort functions. In the example below I've added case sensitive sorting functions.</p>
<h1>Live example</h1>
<div id="demo">
@ -586,7 +586,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/basic_init/multiple_tables.html
View File

@ -20,11 +20,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> multiple tables example
DataTables multiple tables example
</div>
<h1>Preamble</h1>
<p>Using standard jQuery selector syntax with <i>DataTables</i> it is trivial to initialise multiple tables with a single line of Javascript, as shown below. All tables are completely independent, but share the parameters passed thought the initialiser object (for example if you specific the Spanish language file, all tables will be shown in Spanish).</p>
<p>Using standard jQuery selector syntax with DataTables it is trivial to initialise multiple tables with a single line of Javascript, as shown below. All tables are completely independent, but share the parameters passed thought the initialiser object (for example if you specific the Spanish language file, all tables will be shown in Spanish).</p>
<h1>Live example</h1>
@ -367,7 +367,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/basic_init/scroll_x.html
View File

@ -560,7 +560,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/basic_init/scroll_xy.html
View File

@ -551,7 +551,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/basic_init/scroll_y.html
View File

@ -558,7 +558,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/basic_init/scroll_y_infinite.html
View File

@ -561,7 +561,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

2
examples/basic_init/scroll_y_theme.html
View File

@ -560,7 +560,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/basic_init/state_save.html
View File

@ -22,11 +22,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> state saving example
DataTables state saving example
</div>
<h1>Preamble</h1>
<p><i>DataTables</i> can use cookies in the end user's web-browser in order to store it's state after each change in drawing. What this means is that if the user were to reload the page, the table should remain exactly as it was (length, filtering, pagination and sorting). This feature is disabled by default, but can be easily enabled using the <b>bStateSave</b> initialisation parameter as shown in this example. Note also that the duration of the cookie can be set using the <b>iCookieDuration</b> initialisation parameter (which is in seconds).</p>
<p>DataTables can use cookies in the end user's web-browser in order to store it's state after each change in drawing. What this means is that if the user were to reload the page, the table should remain exactly as it was (length, filtering, pagination and sorting). This feature is disabled by default, but can be easily enabled using the <b>bStateSave</b> initialisation parameter as shown in this example. Note also that the duration of the cookie can be set using the <b>iCookieDuration</b> initialisation parameter (which is in seconds).</p>
<h1>Live example</h1>
<div id="demo">
@ -555,7 +555,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/basic_init/table_sorting.html
View File

@ -22,11 +22,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> table sorting example
DataTables table sorting example
</div>
<h1>Preamble</h1>
<p>With <i>DataTables</i> you can alter the sorting characteristics of the table at initialisation time. Using the <b>aaSorting</b> initialisation parameter, you can get the table exactly how you want to present the information. The <b>aaSorting</b> parameter is an array of arrays where the first value is the column to sort on, and the second is 'asc' or 'desc' as required (it is a double array for <a href="../basic_init/multi_col_sort.html">multi-column sorting</a>). The table below is sorted (descending) by the CSS grade. Note also that the 'Engine version' column is automatically detected as a numeric column and sorted accordingly. Finally, also note that "asSorting" has been defined for the column in question for this example. The reason for this is that DataTables uses ["asc","desc"] for sorting order by default, but we would in this case prefer "desc" to be given first priority.</p>
<p>With DataTables you can alter the sorting characteristics of the table at initialisation time. Using the <b>aaSorting</b> initialisation parameter, you can get the table exactly how you want to present the information. The <b>aaSorting</b> parameter is an array of arrays where the first value is the column to sort on, and the second is 'asc' or 'desc' as required (it is a double array for <a href="../basic_init/multi_col_sort.html">multi-column sorting</a>). The table below is sorted (descending) by the CSS grade. Note also that the 'Engine version' column is automatically detected as a numeric column and sorted accordingly. Finally, also note that "asSorting" has been defined for the column in question for this example. The reason for this is that DataTables uses ["asc","desc"] for sorting order by default, but we would in this case prefer "desc" to be given first priority.</p>
<h1>Live example</h1>
<div id="demo">
@ -555,7 +555,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/basic_init/themes.html
View File

@ -24,7 +24,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> with jQuery UI themes example
DataTables with jQuery UI themes example
</div>
<h1>Preamble</h1>
@ -549,7 +549,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/basic_init/zero_config.html
View File

@ -20,11 +20,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> zero configuration example
DataTables zero configuration example
</div>
<h1>Preamble</h1>
<p><i>DataTables</i> has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
<p>DataTables has most features enabled by default, so all you need to do to use it with one of your own tables is to call the construction function (as shown below).</p>
<h1>Live example</h1>
<div id="demo">
@ -551,7 +551,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/data_sources/ajax.html
View File

@ -23,11 +23,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> AJAX source example
DataTables AJAX source example
</div>
<h1>Preamble</h1>
<p>Although <i>DataTables</i> is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have <i>DataTables</i> go to that source with an XHR call and load data from there. This example shows the latter method in action. <i>DataTables</i> expects an object with an array called "aaData" with the data source.</p>
<p>Although DataTables is built from the principle of progressive enhancement, it is often useful to be able to construct a table from an AJAX source. This can be done in one of two ways - either using the <b>aData</b> initialisation parameter which takes an array of data, or using the <b>sAjaxSource</b> initialisation parameter which will have DataTables go to that source with an XHR call and load data from there. This example shows the latter method in action. DataTables expects an object with an array called "aaData" with the data source.</p>
<h1>Live example</h1>
<div id="dynamic">
@ -155,7 +155,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/data_sources/dom.html
View File

@ -20,7 +20,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> zero configuration example
DataTables zero configuration example
</div>
<h1>Preamble</h1>
@ -551,7 +551,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/data_sources/js_array.html
View File

@ -101,11 +101,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> dynamic creation example
DataTables dynamic creation example
</div>
<h1>Preamble</h1>
<p>At times you will wish to be able to create a table from dynamic information passed directly to <i>DataTables</i>, rather than having it read from the document. This is achieved using the "aaData" array in the initialisation object. A table node must first be created before the initialiser is called (as shown in the code below). This is also useful for optimisation - if you are able to format the data as required, this method can save a lot of DOM parsing to create a table.</p>
<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 is achieved using the "aaData" array in the initialisation object. A table node must first be created before the initialiser is called (as shown in the code below). This is also useful for optimisation - if you are able to format the data as required, this method can save a lot of DOM parsing to create a table.</p>
<h1>Live example</h1>
<div id="dynamic"></div>
@ -241,7 +241,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/data_sources/server_side.html
View File

@ -25,7 +25,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
DataTables server-side processing example
</div>
<h1>Preamble</h1>
@ -340,7 +340,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/index.html
View File

@ -13,7 +13,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> examples
DataTables examples
</div>
<p>This DataTables package comes with a number of examples of how you can use this software, and demonstrates its capabilities and flexibility.</p>
@ -105,7 +105,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

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

@ -62,7 +62,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> live DOM sorting example
DataTables live DOM sorting example
</div>
<h1>Preamble</h1>
@ -1093,7 +1093,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

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

@ -26,7 +26,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> HTML sorting auto-detection example
DataTables HTML sorting auto-detection example
</div>
<h1>Preamble</h1>
@ -159,7 +159,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

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

@ -139,7 +139,7 @@ $.fn.dataTableExt.oPagination.scrolling = {
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> custom pagination plug-in example
DataTables custom pagination plug-in example
</div>
<h1>Preamble</h1>
@ -789,7 +789,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

6
examples/plug-ins/plugin_api.html
View File

@ -53,11 +53,11 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> new API function plug-in example
DataTables new API function plug-in example
</div>
<h1>Preamble</h1>
<p><i>DataTables</i> presents a number of useful API functions to the calling code which can be used to manipulate the table data as required. But there are times when <i>DataTables</i> doesn't provide the API function that you want - so for this <i>DataTables</i> allows a method by which custom API functions can be defined (effectively a plug-in). This is done by adding functions the <b>$.fn.dataTableExt.oApi</b> object, which will be registered by <i>DataTables</i>. Each function is passed a single parameter, the settings object for the table in question.</p>
<p>DataTables presents a number of useful API functions to the calling code which can be used to manipulate the table data as required. But there are times when DataTables doesn't provide the API function that you want - so for this DataTables allows a method by which custom API functions can be defined (effectively a plug-in). This is done by adding functions the <b>$.fn.dataTableExt.oApi</b> object, which will be registered by DataTables. Each function is passed a single parameter, the settings object for the table in question.</p>
<p>In the example below, I present an API function which is used to obtain all of the TR rows which are currently not on display (useful for building a form from the table).</p>
<h1>Live example</h1>
@ -619,7 +619,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

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

@ -51,7 +51,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> custom filtering (range filtering) example
DataTables custom filtering (range filtering) example
</div>
<h1>Preamble</h1>
@ -623,7 +623,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

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

@ -70,7 +70,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> sorting and type detection example
DataTables sorting and type detection example
</div>
<h1>Preamble</h1>
@ -652,7 +652,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about it's API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about it's API properties and methods.</p>
<div id="footer" style="text-align:center;">

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

@ -44,7 +44,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> sorting plug-in example
DataTables sorting plug-in example
</div>
<h1>Preamble</h1>
@ -600,7 +600,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about it's API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about it's API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/server_side/column_ordering.html
View File

@ -31,7 +31,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side column ordering example
DataTables server-side column ordering example
</div>
<h1>Preamble</h1>
@ -174,7 +174,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/server_side/custom_vars.html
View File

@ -32,7 +32,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
DataTables server-side processing example
</div>
<h1>Preamble</h1>
@ -176,7 +176,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/server_side/defer_loading.html
View File

@ -25,7 +25,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example with deferred loading
DataTables server-side processing example with deferred loading
</div>
<h1>Preamble</h1>
@ -228,7 +228,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/server_side/editable.html
View File

@ -35,7 +35,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
DataTables server-side processing example
</div>
<h1>Preamble</h1>
@ -284,7 +284,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

170
examples/server_side/ids.html Normal file
View File

@ -0,0 +1,170 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<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" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/id.php"
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables server-side processing example - automatic row ID addition
</div>
<h1>Preamble</h1>
<p>Often when using server-side processing you will find that it can be useful to have a specific ID on each row (the row ID from the database for example). By assigning the ID you want to apply to each row using the property <b>DT_RowId</b> of the data source object for each row, DataTables will automatically add it for you. Likewise there is a <b>DT_RowClass</b> option which will add your given class. This example shows both and is a trivial modification of the server-side script to add these two options, with no changes on the client-side.</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/ids.php"
} );
} );</pre>
<h1>Other examples</h1>
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</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/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling:
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
<li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
</ul>
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">DataTables &copy; Allan Jardine 2008-2010</span>
</div>
</div>
</body>
</html>

4
examples/server_side/jsonp.html
View File

@ -33,7 +33,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example with JSONP
DataTables server-side processing example with JSONP
</div>
<h1>Preamble</h1>
@ -177,7 +177,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

185
examples/server_side/object_data.html Normal file
View File

@ -0,0 +1,185 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico" />
<title>DataTables example</title>
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.css";
@import "../../media/css/demo_table.css";
</style>
<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" charset="utf-8">
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/objects.php",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform" },
{ "mDataProp": "version" },
{ "mDataProp": "grade" }
]
} );
} );
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big">
DataTables server-side processing example - object based data source
</div>
<h1>Preamble</h1>
<p>The "native" data format that DataTables expects for server-side processing is a 2D array of data (rows by columns). However, this is often not flexible enough for either the server-side environment, or you might want to convey more information in the data source than is necessary to show in the table (row IDs from the database for example). For this 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, and DataTables will look up each property that is specified by the <b>mDataProp</b> property given for each column</p>
<h1>Live example</h1>
<div id="dynamic">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th width="20%">Rendering engine</th>
<th width="25%">Browser</th>
<th width="25%">Platform(s)</th>
<th width="15%">Engine version</th>
<th width="15%">CSS grade</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="5" class="dataTables_empty">Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
<th>Engine version</th>
<th>CSS grade</th>
</tr>
</tfoot>
</table>
</div>
<div class="spacer"></div>
<h1>Initialisation code</h1>
<pre>$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/objects.php",
"aoColumns": [
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "platform" },
{ "mDataProp": "version" },
{ "mDataProp": "grade" }
]
} );
} );</pre>
<h1>Other examples</h1>
<h2>Basic initialisation</h2>
<ul>
<li><a href="../basic_init/zero_config.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enablement</a></li>
<li><a href="../basic_init/table_sorting.html">Sorting data</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column sorting</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/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination styles</a></li>
<li>Scrolling:
<a href="../basic_init/scroll_x.html">Horizontal</a> /
<a href="../basic_init/scroll_y.html">Vertical</a> /
<a href="../basic_init/scroll_xy.html">Both</a> /
<a href="../basic_init/scroll_y_theme.html">Themed</a> /
<a href="../basic_init/scroll_y_infinite.html">Infinite</a>
</li>
<li><a href="../basic_init/language.html">Change language information (internationalisation)</a></li>
<li><a href="../basic_init/themes.html">ThemeRoller themes (Smoothness)</a></li>
</ul>
<h2>Advanced initialisation</h2>
<ul>
<li><a href="../advanced_init/events_pre_init.html">Events (pre initialisation)</a></li>
<li><a href="../advanced_init/events_post_init.html">Events (post initialisation)</a></li>
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
<li><a href="../advanced_init/html_sort.html">Sorting without HTML tags</a></li>
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table controls (sDom)</a></li>
<li><a href="../advanced_init/length_menu.html">Defining length menu options</a></li>
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar (element) around table</a></li>
<li><a href="../advanced_init/highlight.html">Row highlighting with CSS</a></li>
<li><a href="../advanced_init/complex_header.html">Column grouping through col/row spans</a></li>
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
<li><a href="../advanced_init/row_callback.html">Row callback</a></li>
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
<li><a href="../advanced_init/language_file.html">Change language information from a file (internationalisation)</a></li>
</ul>
<h2>Data sources</h2>
<ul>
<li><a href="../data_sources/dom.html">DOM</a></li>
<li><a href="../data_sources/js_array.html">Javascript array</a></li>
<li><a href="../data_sources/ajax.html">Ajax source</a></li>
<li><a href="../data_sources/server_side.html">Server side processing</a></li>
</ul>
<h2>Server-side processing</h2>
<ul>
<li><a href="../server_side/server_side.html">Obtain server-side data</a></li>
<li><a href="../server_side/custom_vars.html">Add extra HTTP variables</a></li>
<li><a href="../server_side/post.html">Use HTTP POST</a></li>
<li><a href="../server_side/column_ordering.html">Custom column ordering (in callback data)</a></li>
<li><a href="../server_side/pipeline.html">Pipelining data (reduce Ajax calls for paging)</a></li>
<li><a href="../server_side/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../server_side/select_rows.html">User selectable rows (multiple rows)</a></li>
</ul>
<h2>API</h2>
<ul>
<li><a href="../api/add_row.html">Dynamically add a new row</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (using "input" elements)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (using "select" elements)</a></li>
<li><a href="../api/highlight.html">Highlight rows and columns</a></li>
<li><a href="../api/row_details.html">Show and hide details about a particular record</a></li>
<li><a href="../api/select_row.html">User selectable rows (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">User selectable rows (single row) and delete rows</a></li>
<li><a href="../api/editable.html">Editable rows (with jEditable)</a></li>
<li><a href="../api/form.html">Submit form with elements in table</a></li>
<li><a href="../api/counter_column.html">Index column (static number column)</a></li>
<li><a href="../api/show_hide.html">Show and hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">API function use in initialisation object (callback)</a></li>
<li><a href="../api/tabs_and_scrolling.html">DataTables scrolling and tabs</a></li>
<li><a href="../api/regex.html">Regular expression filtering</a></li>
</ul>
<h2>Plug-ins</h2>
<ul>
<li><a href="../plug-ins/plugin_api.html">Add custom API functions</a></li>
<li><a href="../plug-ins/sorting_plugin.html">Sorting and type detection</a></li>
<li><a href="../plug-ins/paging_plugin.html">Custom pagination controls</a></li>
<li><a href="../plug-ins/range_filtering.html">Range filtering / custom filtering</a></li>
<li><a href="../plug-ins/dom_sort.html">Live DOM sorting</a></li>
<li><a href="../plug-ins/html_sort.html">Automatic HTML type detection</a></li>
</ul>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">
<span style="font-size:10px;">DataTables &copy; Allan Jardine 2008-2010</span>
</div>
</div>
</body>
</html>

4
examples/server_side/pipeline.html
View File

@ -128,7 +128,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing with pipelining example
DataTables server-side processing with pipelining example
</div>
<h1>Preamble</h1>
@ -369,7 +369,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/server_side/post.html
View File

@ -33,7 +33,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing with POST example
DataTables server-side processing with POST example
</div>
<h1>Preamble</h1>
@ -178,7 +178,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/server_side/row_details.html
View File

@ -64,7 +64,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example with hidden row information
DataTables server-side processing example with hidden row information
</div>
<h1>Preamble</h1>
@ -241,7 +241,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

3
examples/server_side/scripts/id.php
View File

@ -155,8 +155,9 @@
{
$row = array();
// Add the row ID to the object
// Add the row ID and class to the object
$row['DT_RowId'] = 'row_'.$aRow['id'];
$row['DT_RowClass'] = 'grade'.$aRow['grade'];
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{

174
examples/server_side/scripts/objects.php Normal file
View File

@ -0,0 +1,174 @@
<?php
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/
/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( 'engine', 'browser', 'platform', 'version', 'grade' );
/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "id";
/* DB table to use */
$sTable = "ajax";
/* Database connection information */
$gaSql['user'] = "";
$gaSql['password'] = "";
$gaSql['db'] = "";
$gaSql['server'] = "localhost";
/* REMOVE THIS LINE (it just includes my SQL connection user/pass) */
include( $_SERVER['DOCUMENT_ROOT']."/datatables/mysql.php" );
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/
/*
* MySQL connection
*/
$gaSql['link'] = mysql_pconnect( $gaSql['server'], $gaSql['user'], $gaSql['password'] ) or
die( 'Could not open connection to server' );
mysql_select_db( $gaSql['db'], $gaSql['link'] ) or
die( 'Could not select database '. $gaSql['db'] );
/*
* Paging
*/
$sLimit = "";
if ( isset( $_GET['iDisplayStart'] ) && $_GET['iDisplayLength'] != '-1' )
{
$sLimit = "LIMIT ".mysql_real_escape_string( $_GET['iDisplayStart'] ).", ".
mysql_real_escape_string( $_GET['iDisplayLength'] );
}
/*
* Ordering
*/
$sOrder = "";
if ( isset( $_GET['iSortCol_0'] ) )
{
$sOrder = "ORDER BY ";
for ( $i=0 ; $i<intval( $_GET['iSortingCols'] ) ; $i++ )
{
if ( $_GET[ 'bSortable_'.intval($_GET['iSortCol_'.$i]) ] == "true" )
{
$sOrder .= $aColumns[ intval( $_GET['iSortCol_'.$i] ) ]."
".mysql_real_escape_string( $_GET['sSortDir_'.$i] ) .", ";
}
}
$sOrder = substr_replace( $sOrder, "", -2 );
if ( $sOrder == "ORDER BY" )
{
$sOrder = "";
}
}
/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It's possible to do here, but concerned about efficiency
* on very large tables, and MySQL's regex functionality is very limited
*/
$sWhere = "";
if ( isset($_GET['sSearch']) && $_GET['sSearch'] != "" )
{
$sWhere = "WHERE (";
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string( $_GET['sSearch'] )."%' OR ";
}
$sWhere = substr_replace( $sWhere, "", -3 );
$sWhere .= ')';
}
/* Individual column filtering */
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( isset($_GET['bSearchable_'.$i]) && $_GET['bSearchable_'.$i] == "true" && $_GET['sSearch_'.$i] != '' )
{
if ( $sWhere == "" )
{
$sWhere = "WHERE ";
}
else
{
$sWhere .= " AND ";
}
$sWhere .= $aColumns[$i]." LIKE '%".mysql_real_escape_string($_GET['sSearch_'.$i])."%' ";
}
}
/*
* SQL queries
* Get data to display
*/
$sQuery = "
SELECT SQL_CALC_FOUND_ROWS ".str_replace(" , ", " ", implode(", ", $aColumns))."
FROM $sTable
$sWhere
$sOrder
$sLimit
";
$rResult = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
/* Data set length after filtering */
$sQuery = "
SELECT FOUND_ROWS()
";
$rResultFilterTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultFilterTotal = mysql_fetch_array($rResultFilterTotal);
$iFilteredTotal = $aResultFilterTotal[0];
/* Total data set length */
$sQuery = "
SELECT COUNT(".$sIndexColumn.")
FROM $sTable
";
$rResultTotal = mysql_query( $sQuery, $gaSql['link'] ) or die(mysql_error());
$aResultTotal = mysql_fetch_array($rResultTotal);
$iTotal = $aResultTotal[0];
/*
* Output
*/
$output = array(
"sEcho" => intval($_GET['sEcho']),
"iTotalRecords" => $iTotal,
"iTotalDisplayRecords" => $iFilteredTotal,
"aaData" => array()
);
while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( $aColumns[$i] == "version" )
{
/* Special output formatting for 'version' column */
$row[ $aColumns[$i] ] = ($aRow[ $aColumns[$i] ]=="0") ? '-' : $aRow[ $aColumns[$i] ];
}
else if ( $aColumns[$i] != ' ' )
{
/* General output */
$row[ $aColumns[$i] ] = $aRow[ $aColumns[$i] ];
}
}
$output['aaData'][] = $row;
}
echo json_encode( $output );
?>

4
examples/server_side/select_rows.html
View File

@ -47,7 +47,7 @@ $(document).ready(function() {
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing with user selectable rows example
DataTables server-side processing with user selectable rows example
</div>
<h1>Preamble</h1>
@ -205,7 +205,7 @@ $(document).ready(function() {
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">

4
examples/server_side/server_side.html
View File

@ -24,7 +24,7 @@
<body id="dt_example">
<div id="container">
<div class="full_width big">
<i>DataTables</i> server-side processing example
DataTables server-side processing example
</div>
<h1>Preamble</h1>
@ -339,7 +339,7 @@
</ul>
<p>Please refer to the <a href="http://www.datatables.net/"><i>DataTables</i> documentation</a> for full information about its API properties and methods.</p>
<p>Please refer to the <a href="http://www.datatables.net/">DataTables documentation</a> for full information about its API properties and methods.</p>
<div id="footer" style="text-align:center;">