mirror of
https://github.com/DataTables/DataTables.git
synced 2025-02-19 17:54:14 +01:00
Update - examples: Improve descriptions of examples and refer to the new extensions where appropriate
This commit is contained in:
parent
588e78f92b
commit
7811a69f30
@ -1 +1 @@
|
||||
e56fa325bfc0d0d6a38dd77a0b32d56920e4ebc6
|
||||
b6074edaa3dda5b9c45287a6ab8efdf065ac23cb
|
||||
|
@ -644,7 +644,7 @@ $(document).ready(function() {
|
||||
<li class="active"><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -5,7 +5,7 @@
|
||||
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
|
||||
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
|
||||
|
||||
<title>DataTables example - Complex headers (rowspan / colspan)</title>
|
||||
<title>DataTables example - Complex headers with column visibility</title>
|
||||
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
|
||||
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
|
||||
@ -35,19 +35,20 @@ $(document).ready(function() {
|
||||
<body class="dt-example">
|
||||
<div class="container">
|
||||
<section>
|
||||
<h1>DataTables example <span>Complex headers (rowspan / colspan)</span></h1>
|
||||
<h1>DataTables example <span>Complex headers with column visibility</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>Complex headers (using colspan / rowspan) can be used to group columns of similar information in DataTables, creating a very powerful visual effect.</p>
|
||||
<p>Complex headers (using <code>colspan</code> / <code>rowspan</code>) can be used to group columns of similar information in DataTables, creating a very powerful
|
||||
visual effect.</p>
|
||||
|
||||
<p>In addition to the basic behaviour, DataTables can also take 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 allows the <a href=
|
||||
<p>In addition to the basic behaviour, DataTables can also take <code>colspan</code> and <code>rowspan</code>s into account when working with hidden columns. The
|
||||
<code>colspan</code> and <code>rowspan</code> attributes for each cell are automatically calculated and rendered on the page for you. This allows the <a href=
|
||||
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> option and <a href=
|
||||
"//datatables.net/reference/api/column().visible()"><code class="api" title="DataTables API method">column().visible()</code></a> method to take into account
|
||||
rowspan / colspan cells, drawing the header correctly.</p>
|
||||
<code>rowspan</code> / <code>colspan</code> cells, drawing the header correctly.</p>
|
||||
|
||||
<p>Note that each column must have at least one unique cell (i.e. a cell without colspan) so DataTables can use that cell to detect the column and use it to apply
|
||||
ordering.</p>
|
||||
<p>Note that each column must have at least one unique cell (i.e. a cell without <code>colspan</code>) so DataTables can use that cell to detect the column and use
|
||||
it to apply ordering.</p>
|
||||
|
||||
<p>The example below shows a header spanning multiple cells over the contact information, with one of the columns that the span covers being hidden.</p>
|
||||
</div>
|
||||
@ -636,7 +637,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li class="active"><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li class="active"><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -19,7 +19,7 @@
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
|
||||
$.extend( $.fn.dataTable.defaults, {
|
||||
$.extend( true, $.fn.dataTable.defaults, {
|
||||
"searching": false,
|
||||
"ordering": false
|
||||
} );
|
||||
@ -540,7 +540,7 @@ $(document).ready(function() {
|
||||
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.extend( $.fn.dataTable.defaults, {
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$.extend( true, $.fn.dataTable.defaults, {
|
||||
"searching": false,
|
||||
"ordering": false
|
||||
} );
|
||||
@ -628,7 +628,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -44,10 +44,12 @@ $(document).ready(function() {
|
||||
|
||||
<div class="info">
|
||||
<p>As is described by the basic DOM positioning example you can use the <a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"DataTables initialisation option">dom</code></a> initialisation parameter to move DataTables features around the table to where you want them. In addition to
|
||||
this, you can also use <a href="//datatables.net/reference/option/dom"><code class="option" title="DataTables initialisation option">dom</code></a> to create
|
||||
multiple instances of these table controls. Simply include the feature's identification letter where you want it to appear, as many times as you wish, and the
|
||||
controls will all sync up (note that obviously the table ('t') should be included only once).</p>
|
||||
"DataTables initialisation option">dom</code></a> initialisation parameter to move DataTables features around the table to where you want them.</p>
|
||||
|
||||
<p>In addition to this, you can also use <a href="//datatables.net/reference/option/dom"><code class="option" title=
|
||||
"DataTables initialisation option">dom</code></a> to create multiple instances of these table controls. Simply include the feature's identification letter where
|
||||
you want it to appear, as many times as you wish, and the controls will all sync up (note that obviously the table (<code class="string" title="String">t</code>)
|
||||
should be included only once).</p>
|
||||
|
||||
<p>This is shown in the demo below where for four key build-in features are duplicated above and below the table.</p>
|
||||
</div>
|
||||
@ -635,7 +637,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li class="active"><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -638,7 +638,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -643,7 +643,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -20,11 +20,11 @@
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
var table = $('#example').DataTable();
|
||||
|
||||
$('#example tbody').on('click', 'tr', function () {
|
||||
var name = $('td', this).eq(0).text();
|
||||
alert( 'You clicked on '+name+'\'s row' );
|
||||
var data = table.row( this ).data();
|
||||
alert( 'You clicked on '+data[0]+'\'s row' );
|
||||
} );
|
||||
} );
|
||||
|
||||
@ -42,7 +42,9 @@ $(document).ready(function() {
|
||||
as they are needed (i.e. when paging only the visible elements are actually available in the DOM). As such, this can lead to the odd hiccup when working with
|
||||
events.</p>
|
||||
|
||||
<p>One of the best ways of dealing with this is through the use of delegated events with jQuery's <code>on</code> method, as shown in this example.</p>
|
||||
<p>One of the best ways of dealing with this is through the use of delegated events with jQuery's <code>on</code> method, as shown in this example. This example
|
||||
also uses the DataTables <a href="//datatables.net/reference/api/row().data()"><code class="api" title="DataTables API method">row().data()</code></a> method to
|
||||
retrieve information about the selected row - the row's data so we can show it in the <code>alert</code> message in this case.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -539,11 +541,11 @@ $(document).ready(function() {
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable();
|
||||
var table = $('#example').DataTable();
|
||||
|
||||
$('#example tbody').on('click', 'tr', function () {
|
||||
var name = $('td', this).eq(0).text();
|
||||
alert( 'You clicked on '+name+'\'s row' );
|
||||
var data = table.row( this ).data();
|
||||
alert( 'You clicked on '+data[0]+'\'s row' );
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
@ -625,7 +627,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -625,7 +625,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -48,9 +48,8 @@ $(document).ready(function() {
|
||||
</ul>
|
||||
|
||||
<p>This example shows the use of <code>data-sort</code> and <code>data-filter</code> attributes. In this case the first column has been formatted so the first name
|
||||
has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it
|
||||
(<code>/y</code>) the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain
|
||||
numeric data.</p>
|
||||
has abbreviated, but the full name is still searchable (search for "Bruno" for example). Additionally, although the last column contains non-numeric data in it,
|
||||
the column will correctly order numerically as the <code>data-sort</code> / <code>data-order</code> attribute is set on the column with plain numeric data.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -628,7 +627,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li class="active"><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -626,7 +626,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li class="active"><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -43,7 +43,7 @@
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -624,7 +624,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -626,7 +626,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li class="active"><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -56,12 +56,12 @@ $(document).ready(function() {
|
||||
<p>In the example shown here, the data read from each row in the table is read into a Javascript object with the structure:</p>
|
||||
<pre>
|
||||
<code class="multiline language-js">{
|
||||
"name": "...",
|
||||
"position": "...",
|
||||
"office": "...",
|
||||
"age": "...",
|
||||
"name": "...",
|
||||
"position": "...",
|
||||
"office": "...",
|
||||
"age": "...",
|
||||
"start_date": "...",
|
||||
"salary": "..."
|
||||
"salary": "..."
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
@ -653,7 +653,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li class="active"><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -637,7 +637,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -689,7 +689,7 @@ tr.group:hover {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -646,7 +646,7 @@ $(document).ready(function() {
|
||||
<li><a href="./column_render.html">Column rendering</a></li>
|
||||
<li><a href="./length_menu.html">Page length options</a></li>
|
||||
<li><a href="./dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -192,7 +192,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -53,6 +53,8 @@ $(document).ready(function() {
|
||||
<p>The example below shows <a href="//datatables.net/reference/option/ajax.dataSrc"><code class="option" title=
|
||||
"DataTables initialisation option">ajax.dataSrc</code></a> being used as a string to get the data from a different source property, in this case <code class=
|
||||
"string" title="String">demo</code> but it could be any value, included a nested property by using standard dotted Javascript object notation.</p>
|
||||
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -176,7 +178,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -197,7 +197,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -166,7 +166,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -191,7 +191,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -62,6 +62,8 @@ $(document).ready(function() {
|
||||
}
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -190,7 +192,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -206,7 +206,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -199,7 +199,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -58,6 +58,8 @@ $(document).ready(function() {
|
||||
]
|
||||
</code>
|
||||
</pre>
|
||||
|
||||
<p>For more details on loading a DataTable with Ajax data, please refer to the <a href="https://datatables.net/manual/ajax">Ajax section of the manual</a>.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -178,7 +180,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -52,12 +52,17 @@ $(document).ready(function() {
|
||||
<p>New rows can be added to a DataTable very easily using the <a href="//datatables.net/reference/api/row.add()"><code class="api" title=
|
||||
"DataTables API method">row.add()</code></a> API method. Simply call the API function with the data that is to be used for the new row (be it an array or object).
|
||||
Multiple rows can be added using the <a href="//datatables.net/reference/api/rows.add()"><code class="api" title="DataTables API method">rows.add()</code></a>
|
||||
method (note the plural).</p>
|
||||
method (note the plural). Data can be likewise be updated with the <a href="//datatables.net/reference/api/row().data()"><code class="api" title=
|
||||
"DataTables API method">row().data()</code></a> and <a href="//datatables.net/reference/api/row().remove()"><code class="api" title=
|
||||
"DataTables API method">row().remove()</code></a> methods.</p>
|
||||
|
||||
<p>Note that in order to see the new row in the table you must call the <a href="//datatables.net/reference/api/draw()"><code class="api" title=
|
||||
"DataTables API method">draw()</code></a> method, which is easily done through the chaining that the DataTables API makes use of.</p>
|
||||
|
||||
<p>This example shows a single row being added each time the button below is clicked upon.</p>
|
||||
|
||||
<p>The <a href="https://editor.datatables.net/">Editor extension</a> adds full table editing controls, including creating, editing and deleting rows, to a
|
||||
DataTable.</p>
|
||||
</div><button id="addRow">Add new row</button>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -190,7 +195,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -637,7 +637,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -646,7 +646,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -1660,7 +1660,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -654,7 +654,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -670,7 +670,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -675,7 +675,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -727,7 +727,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -274,7 +274,7 @@ tr.shown td.details-control {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -46,8 +46,8 @@ $(document).ready(function() {
|
||||
"DataTables API method">rows().data()</code></a> method can then be used to get the data for the selected rows. In this case it is simply counting the number of
|
||||
selected rows, but much more complex interactions can easily be developed.</p>
|
||||
|
||||
<p>If you are looking for a more complete row selection option <a href="http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete
|
||||
API for selecting rows and acting upon those selected rows.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
</div><button id="button">Row count</button>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -633,7 +633,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -56,8 +56,8 @@ $(document).ready(function() {
|
||||
with <code>false</code> as its first parameter. This will redraw the table keeping the current paging (without the <code>false</code> parameter the paging would be
|
||||
reset to the first page).</p>
|
||||
|
||||
<p>If you are looking for a more complete row selection option <a href="http://datatables.net/extras/tabletools">TableTools for DataTables</a> provides a complete
|
||||
API for selecting rows and acting upon those selected rows.</p>
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
</div><button id="button">Delete selected row</button>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -649,7 +649,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -54,8 +54,8 @@ $(document).ready(function() {
|
||||
title="DataTables API method">columns()</code></a> method to select multiple columns and then using the <a href=
|
||||
"//datatables.net/reference/api/columns().visible()"><code class="api" title="DataTables API method">columns().visible()</code></a> method to set their state.</p>
|
||||
|
||||
<p>If you are looking for a more complete column visibility interaction controls <a href="http://datatables.net/extras/colvis">ColVis for DataTables</a> provides a
|
||||
complete interface for allowing the user to show and hide columns in the table.</p>
|
||||
<p>If you are looking for a more complete column visibility interaction controls, check out the <a href="https://datatables.net/extras/buttons">Buttons extension
|
||||
for DataTables</a> provides a comprehensive module for column visibility control.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
@ -652,7 +652,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -635,7 +635,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -633,7 +633,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -620,7 +620,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -683,7 +683,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -618,7 +618,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -37,7 +37,8 @@ $(document).ready(function() {
|
||||
<div class="info">
|
||||
<p>Often you may want to have your table resize dynamically with the page. Typically this is done by assigning <code>width:100%</code> in your CSS, but this
|
||||
presents a problem for Javascript since it can be very hard to get that relative size rather than the absolute pixels. As such, if you apply the <code>width</code>
|
||||
attribute to the HTML table tag, it will be used as the width for the table (overruling any CSS styles).</p>
|
||||
attribute to the HTML table tag or inline width style (<code>style="width:100%"</code>), it will be used as the width for the table (overruling any CSS
|
||||
styles).</p>
|
||||
|
||||
<p>This example shows a table with <code>width="100%"</code> and the container is also flexible width, so as the window is resized, the table will also resize
|
||||
dynamically.</p>
|
||||
@ -620,7 +621,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -44,7 +44,8 @@ $(document).ready(function() {
|
||||
|
||||
<div class="info">
|
||||
<p>There are times when you might find it useful to display only a sub-set of the information that was available in the original table. For example you might want
|
||||
to reduce the amount of data shown on screen to make it clearer for the user. This is done through the <a href=
|
||||
to reduce the amount of data shown on screen to make it clearer for the user (consider also using the <a href=
|
||||
"https://datatables.net/extensions/responsive">Responsive extension</a> for this). This is done through the <a href=
|
||||
"//datatables.net/reference/option/columns.visible"><code class="option" title="DataTables initialisation option">columns.visible</code></a> column option.</p>
|
||||
|
||||
<p>The column that is hidden is still part of the table and can be made visible through the <code>api column().visible()</code> API method at a future time if you
|
||||
@ -643,7 +644,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -628,7 +628,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -578,7 +578,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -337,7 +337,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -790,7 +790,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -787,7 +787,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -628,7 +628,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -628,7 +628,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -622,7 +622,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -33,9 +33,10 @@ $(document).ready(function() {
|
||||
<h1>DataTables example <span>Zero configuration</span></h1>
|
||||
|
||||
<div class="info">
|
||||
<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function.</p>
|
||||
<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function:
|
||||
<code>$().DataTable();</code>.</p>
|
||||
|
||||
<p>Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this example.</p>
|
||||
<p>Searching, ordering and paging goodness will be immediately added to the table, as shown in this example.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -613,7 +614,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -165,7 +165,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -615,7 +615,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -20,78 +20,56 @@
|
||||
|
||||
|
||||
var dataSet = [
|
||||
['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'],
|
||||
['Trident','Internet Explorer 6','Win 98+','6','A'],
|
||||
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
|
||||
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
|
||||
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
|
||||
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
|
||||
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
|
||||
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
|
||||
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
|
||||
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
|
||||
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
|
||||
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
|
||||
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
|
||||
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
|
||||
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
|
||||
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
|
||||
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
|
||||
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
|
||||
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
|
||||
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
|
||||
['Webkit','Safari 1.2','OSX.3','125.5','A'],
|
||||
['Webkit','Safari 1.3','OSX.3','312.8','A'],
|
||||
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
|
||||
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
|
||||
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
|
||||
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
|
||||
['Webkit','S60','S60','413','A'],
|
||||
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
|
||||
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
|
||||
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
|
||||
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
|
||||
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
|
||||
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
|
||||
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
|
||||
['Presto','Opera for Wii','Wii','-','A'],
|
||||
['Presto','Nokia N800','N800','-','A'],
|
||||
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
|
||||
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
|
||||
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
|
||||
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
|
||||
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
|
||||
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
|
||||
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
|
||||
['Misc','NetFront 3.1','Embedded devices','-','C'],
|
||||
['Misc','NetFront 3.4','Embedded devices','-','A'],
|
||||
['Misc','Dillo 0.8','Embedded devices','-','X'],
|
||||
['Misc','Links','Text only','-','X'],
|
||||
['Misc','Lynx','Text only','-','X'],
|
||||
['Misc','IE Mobile','Windows Mobile 6','-','C'],
|
||||
['Misc','PSP browser','PSP','-','C'],
|
||||
['Other browsers','All others','-','-','U']
|
||||
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
|
||||
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
|
||||
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
|
||||
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
|
||||
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
|
||||
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
|
||||
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
|
||||
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
|
||||
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
|
||||
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
|
||||
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
|
||||
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
|
||||
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
|
||||
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
|
||||
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
|
||||
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
|
||||
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
|
||||
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
|
||||
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
|
||||
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
|
||||
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
|
||||
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
|
||||
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
|
||||
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
|
||||
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
|
||||
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
|
||||
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
|
||||
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
|
||||
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
|
||||
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
|
||||
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
|
||||
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
|
||||
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
|
||||
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
|
||||
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
|
||||
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
|
||||
];
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
|
||||
|
||||
$('#example').DataTable( {
|
||||
"data": dataSet,
|
||||
"columns": [
|
||||
{ "title": "Engine" },
|
||||
{ "title": "Browser" },
|
||||
{ "title": "Platform" },
|
||||
{ "title": "Version", "class": "center" },
|
||||
{ "title": "Grade", "class": "center" }
|
||||
data: dataSet,
|
||||
columns: [
|
||||
{ title: "Name" },
|
||||
{ title: "Position" },
|
||||
{ title: "Office" },
|
||||
{ title: "Extn." },
|
||||
{ title: "Start date" },
|
||||
{ title: "Salary" }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
|
||||
|
||||
@ -109,11 +87,13 @@ $(document).ready(function() {
|
||||
initialisation object, passing in an array of data to be used (like all other DataTables handled data, this can be arrays or objects using the <a href=
|
||||
"//datatables.net/reference/option/columns.data"><code class="option" title="DataTables initialisation option">columns.data</code></a> option).</p>
|
||||
|
||||
<p>A <code><table></code> must be available on the page for DataTables to use. This examples shows the element being added by Javascript and then
|
||||
initialising the DataTable with a set of data from a Javascript array.</p>
|
||||
<p>A <code class="tag" title="HTML tag">table</code> must be available on the page for DataTables to use. This examples shows an empty <code class="tag" title=
|
||||
"HTML tag">table</code> element being initialising as a DataTable with a set of data from a Javascript array. The columns in the table are dynamically created
|
||||
based on the <a href="//datatables.net/reference/option/columns.title"><code class="option" title="DataTables initialisation option">columns.title</code></a>
|
||||
configuration option.</p>
|
||||
</div>
|
||||
|
||||
<div id="demo"></div>
|
||||
<table id="example" class="display" width="100%"></table>
|
||||
|
||||
<ul class="tabs">
|
||||
<li class="active">Javascript</li>
|
||||
@ -126,78 +106,56 @@ $(document).ready(function() {
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">var dataSet = [
|
||||
['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'],
|
||||
['Trident','Internet Explorer 6','Win 98+','6','A'],
|
||||
['Trident','Internet Explorer 7','Win XP SP2+','7','A'],
|
||||
['Trident','AOL browser (AOL desktop)','Win XP','6','A'],
|
||||
['Gecko','Firefox 1.0','Win 98+ / OSX.2+','1.7','A'],
|
||||
['Gecko','Firefox 1.5','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Firefox 2.0','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Firefox 3.0','Win 2k+ / OSX.3+','1.9','A'],
|
||||
['Gecko','Camino 1.0','OSX.2+','1.8','A'],
|
||||
['Gecko','Camino 1.5','OSX.3+','1.8','A'],
|
||||
['Gecko','Netscape 7.2','Win 95+ / Mac OS 8.6-9.2','1.7','A'],
|
||||
['Gecko','Netscape Browser 8','Win 98SE+','1.7','A'],
|
||||
['Gecko','Netscape Navigator 9','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Mozilla 1.0','Win 95+ / OSX.1+',1,'A'],
|
||||
['Gecko','Mozilla 1.1','Win 95+ / OSX.1+',1.1,'A'],
|
||||
['Gecko','Mozilla 1.2','Win 95+ / OSX.1+',1.2,'A'],
|
||||
['Gecko','Mozilla 1.3','Win 95+ / OSX.1+',1.3,'A'],
|
||||
['Gecko','Mozilla 1.4','Win 95+ / OSX.1+',1.4,'A'],
|
||||
['Gecko','Mozilla 1.5','Win 95+ / OSX.1+',1.5,'A'],
|
||||
['Gecko','Mozilla 1.6','Win 95+ / OSX.1+',1.6,'A'],
|
||||
['Gecko','Mozilla 1.7','Win 98+ / OSX.1+',1.7,'A'],
|
||||
['Gecko','Mozilla 1.8','Win 98+ / OSX.1+',1.8,'A'],
|
||||
['Gecko','Seamonkey 1.1','Win 98+ / OSX.2+','1.8','A'],
|
||||
['Gecko','Epiphany 2.20','Gnome','1.8','A'],
|
||||
['Webkit','Safari 1.2','OSX.3','125.5','A'],
|
||||
['Webkit','Safari 1.3','OSX.3','312.8','A'],
|
||||
['Webkit','Safari 2.0','OSX.4+','419.3','A'],
|
||||
['Webkit','Safari 3.0','OSX.4+','522.1','A'],
|
||||
['Webkit','OmniWeb 5.5','OSX.4+','420','A'],
|
||||
['Webkit','iPod Touch / iPhone','iPod','420.1','A'],
|
||||
['Webkit','S60','S60','413','A'],
|
||||
['Presto','Opera 7.0','Win 95+ / OSX.1+','-','A'],
|
||||
['Presto','Opera 7.5','Win 95+ / OSX.2+','-','A'],
|
||||
['Presto','Opera 8.0','Win 95+ / OSX.2+','-','A'],
|
||||
['Presto','Opera 8.5','Win 95+ / OSX.2+','-','A'],
|
||||
['Presto','Opera 9.0','Win 95+ / OSX.3+','-','A'],
|
||||
['Presto','Opera 9.2','Win 88+ / OSX.3+','-','A'],
|
||||
['Presto','Opera 9.5','Win 88+ / OSX.3+','-','A'],
|
||||
['Presto','Opera for Wii','Wii','-','A'],
|
||||
['Presto','Nokia N800','N800','-','A'],
|
||||
['Presto','Nintendo DS browser','Nintendo DS','8.5','C/A<sup>1</sup>'],
|
||||
['KHTML','Konqureror 3.1','KDE 3.1','3.1','C'],
|
||||
['KHTML','Konqureror 3.3','KDE 3.3','3.3','A'],
|
||||
['KHTML','Konqureror 3.5','KDE 3.5','3.5','A'],
|
||||
['Tasman','Internet Explorer 4.5','Mac OS 8-9','-','X'],
|
||||
['Tasman','Internet Explorer 5.1','Mac OS 7.6-9','1','C'],
|
||||
['Tasman','Internet Explorer 5.2','Mac OS 8-X','1','C'],
|
||||
['Misc','NetFront 3.1','Embedded devices','-','C'],
|
||||
['Misc','NetFront 3.4','Embedded devices','-','A'],
|
||||
['Misc','Dillo 0.8','Embedded devices','-','X'],
|
||||
['Misc','Links','Text only','-','X'],
|
||||
['Misc','Lynx','Text only','-','X'],
|
||||
['Misc','IE Mobile','Windows Mobile 6','-','C'],
|
||||
['Misc','PSP browser','PSP','-','C'],
|
||||
['Other browsers','All others','-','-','U']
|
||||
[ "Tiger Nixon", "System Architect", "Edinburgh", "5421", "2011/04/25", "$320,800" ],
|
||||
[ "Garrett Winters", "Accountant", "Tokyo", "8422", "2011/07/25", "$170,750" ],
|
||||
[ "Ashton Cox", "Junior Technical Author", "San Francisco", "1562", "2009/01/12", "$86,000" ],
|
||||
[ "Cedric Kelly", "Senior Javascript Developer", "Edinburgh", "6224", "2012/03/29", "$433,060" ],
|
||||
[ "Airi Satou", "Accountant", "Tokyo", "5407", "2008/11/28", "$162,700" ],
|
||||
[ "Brielle Williamson", "Integration Specialist", "New York", "4804", "2012/12/02", "$372,000" ],
|
||||
[ "Herrod Chandler", "Sales Assistant", "San Francisco", "9608", "2012/08/06", "$137,500" ],
|
||||
[ "Rhona Davidson", "Integration Specialist", "Tokyo", "6200", "2010/10/14", "$327,900" ],
|
||||
[ "Colleen Hurst", "Javascript Developer", "San Francisco", "2360", "2009/09/15", "$205,500" ],
|
||||
[ "Sonya Frost", "Software Engineer", "Edinburgh", "1667", "2008/12/13", "$103,600" ],
|
||||
[ "Jena Gaines", "Office Manager", "London", "3814", "2008/12/19", "$90,560" ],
|
||||
[ "Quinn Flynn", "Support Lead", "Edinburgh", "9497", "2013/03/03", "$342,000" ],
|
||||
[ "Charde Marshall", "Regional Director", "San Francisco", "6741", "2008/10/16", "$470,600" ],
|
||||
[ "Haley Kennedy", "Senior Marketing Designer", "London", "3597", "2012/12/18", "$313,500" ],
|
||||
[ "Tatyana Fitzpatrick", "Regional Director", "London", "1965", "2010/03/17", "$385,750" ],
|
||||
[ "Michael Silva", "Marketing Designer", "London", "1581", "2012/11/27", "$198,500" ],
|
||||
[ "Paul Byrd", "Chief Financial Officer (CFO)", "New York", "3059", "2010/06/09", "$725,000" ],
|
||||
[ "Gloria Little", "Systems Administrator", "New York", "1721", "2009/04/10", "$237,500" ],
|
||||
[ "Bradley Greer", "Software Engineer", "London", "2558", "2012/10/13", "$132,000" ],
|
||||
[ "Dai Rios", "Personnel Lead", "Edinburgh", "2290", "2012/09/26", "$217,500" ],
|
||||
[ "Jenette Caldwell", "Development Lead", "New York", "1937", "2011/09/03", "$345,000" ],
|
||||
[ "Yuri Berry", "Chief Marketing Officer (CMO)", "New York", "6154", "2009/06/25", "$675,000" ],
|
||||
[ "Caesar Vance", "Pre-Sales Support", "New York", "8330", "2011/12/12", "$106,450" ],
|
||||
[ "Doris Wilder", "Sales Assistant", "Sidney", "3023", "2010/09/20", "$85,600" ],
|
||||
[ "Angelica Ramos", "Chief Executive Officer (CEO)", "London", "5797", "2009/10/09", "$1,200,000" ],
|
||||
[ "Gavin Joyce", "Developer", "Edinburgh", "8822", "2010/12/22", "$92,575" ],
|
||||
[ "Jennifer Chang", "Regional Director", "Singapore", "9239", "2010/11/14", "$357,650" ],
|
||||
[ "Brenden Wagner", "Software Engineer", "San Francisco", "1314", "2011/06/07", "$206,850" ],
|
||||
[ "Fiona Green", "Chief Operating Officer (COO)", "San Francisco", "2947", "2010/03/11", "$850,000" ],
|
||||
[ "Shou Itou", "Regional Marketing", "Tokyo", "8899", "2011/08/14", "$163,000" ],
|
||||
[ "Michelle House", "Integration Specialist", "Sidney", "2769", "2011/06/02", "$95,400" ],
|
||||
[ "Suki Burks", "Developer", "London", "6832", "2009/10/22", "$114,500" ],
|
||||
[ "Prescott Bartlett", "Technical Author", "London", "3606", "2011/05/07", "$145,000" ],
|
||||
[ "Gavin Cortez", "Team Leader", "San Francisco", "2860", "2008/10/26", "$235,500" ],
|
||||
[ "Martena Mccray", "Post-Sales support", "Edinburgh", "8240", "2011/03/09", "$324,050" ],
|
||||
[ "Unity Butler", "Marketing Designer", "San Francisco", "5384", "2009/12/09", "$85,675" ]
|
||||
];
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );
|
||||
|
||||
$('#example').DataTable( {
|
||||
"data": dataSet,
|
||||
"columns": [
|
||||
{ "title": "Engine" },
|
||||
{ "title": "Browser" },
|
||||
{ "title": "Platform" },
|
||||
{ "title": "Version", "class": "center" },
|
||||
{ "title": "Grade", "class": "center" }
|
||||
data: dataSet,
|
||||
columns: [
|
||||
{ title: "Name" },
|
||||
{ title: "Position" },
|
||||
{ title: "Office" },
|
||||
{ title: "Extn." },
|
||||
{ title: "Start date" },
|
||||
{ title: "Salary" }
|
||||
]
|
||||
} );
|
||||
} );
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
@ -278,7 +236,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -168,7 +168,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -63,7 +63,7 @@
|
||||
<li><a href="./advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="./advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="./advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="./advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="./advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="./advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="./advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="./advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -662,7 +662,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -1724,7 +1724,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -672,7 +672,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -656,7 +656,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -650,7 +650,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -183,7 +183,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -252,7 +252,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -48,16 +48,8 @@ $(document).ready(function() {
|
||||
be configured using the <a href="//datatables.net/reference/option/idSrc"><code class="option" title="DataTables initialisation option">idSrc</code></a> option),
|
||||
DataTables will automatically add it for you (note that this will work for Ajax and Javascript loaded data as well as for server-side processing).</p>
|
||||
|
||||
<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions:</p>
|
||||
|
||||
<ul class="markdown">
|
||||
<li>{string} <code>DT_RowId</code> - Add an ID to the <code class="tag" title="HTML tag">tr</code> element</li>
|
||||
<li>{string} <code>DT_RowClass</code> - Add a class name to the <code class="tag" title="HTML tag">tr</code> element</li>
|
||||
<li>{object} <code>DT_RowData</code> - Add HTML5 <em>data-</em> attributes to the <code class="tag" title="HTML tag">tr</code> element. This is an object of
|
||||
key / value pairs which are assigned as data attributes to the <code class="tag" title="HTML tag">tr</code> element.</li>
|
||||
<li>{object} <code>DT_RowAttr</code> - Add attributes to the <code class="tag" title="HTML tag">tr</code> element. This is an object of key / value pairs which
|
||||
are assigned as attributes to the <code class="tag" title="HTML tag">tr</code> element.</li>
|
||||
</ul>
|
||||
<p>In addition to <code>DT_RowId</code> there are other properties which perform similar actions - please refer to the <a href=
|
||||
"https://datatables.net/manual/server-side">server-side processing section of the manual</a> for full details.</p>
|
||||
|
||||
<p>This example below shows <code>DT_RowId</code> being used to add information to the table. In addition objects are used as the data source for the rows.</p>
|
||||
</div>
|
||||
@ -190,7 +182,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -175,7 +175,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -180,7 +180,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -412,7 +412,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -191,7 +191,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -292,7 +292,7 @@ tr.details td.details-control {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -63,6 +63,9 @@ $(document).ready(function() {
|
||||
|
||||
<p>This is shown in this demo, which uses a unique ID assigned to the TR element (this is done automatically through the use of the <code>DT_RowId</code> special
|
||||
property returned as part of the object given by the server for each row) to track which rows are selected and reselect them is appropriate on a draw.</p>
|
||||
|
||||
<p>If you are looking for a more complete and easier to use row selection option, check out the <a href="https://datatables.net/extras/select">Select extension</a>
|
||||
provides an API that is fully integrated with DataTables for selecting rows and acting upon those selected rows.</p>
|
||||
</div>
|
||||
|
||||
<table id="example" class="display" cellspacing="0" width="100%">
|
||||
@ -205,7 +208,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -167,7 +167,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -620,7 +620,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -609,7 +609,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -610,7 +610,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -624,7 +624,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -21,10 +21,7 @@
|
||||
<script type="text/javascript" language="javascript" class="init">
|
||||
|
||||
$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
scrollY: 200,
|
||||
paging: false
|
||||
} );
|
||||
$('#example').DataTable();
|
||||
} );
|
||||
|
||||
</script>
|
||||
@ -540,10 +537,7 @@ $(document).ready(function() {
|
||||
<div class="tabs">
|
||||
<div class="js">
|
||||
<p>The Javascript shown below is used to initialise the table shown in this example:</p><code class="multiline language-js">$(document).ready(function() {
|
||||
$('#example').DataTable( {
|
||||
scrollY: 200,
|
||||
paging: false
|
||||
} );
|
||||
$('#example').DataTable();
|
||||
} );</code>
|
||||
|
||||
<p>In addition to the above code, the following Javascript library files are loaded for use in this example:</p>
|
||||
@ -627,7 +621,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -610,7 +610,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -623,7 +623,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -609,7 +609,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -610,7 +610,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -609,7 +609,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
@ -609,7 +609,7 @@ $(document).ready(function() {
|
||||
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
|
||||
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
|
||||
<li><a href="../advanced_init/dom_multiple_elements.html">Multiple table control elements</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers (rowspan / colspan)</a></li>
|
||||
<li><a href="../advanced_init/complex_header.html">Complex headers with column visibility</a></li>
|
||||
<li><a href="../advanced_init/object_dom_read.html">Read HTML to data objects</a></li>
|
||||
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes - cell data</a></li>
|
||||
<li><a href="../advanced_init/html5-data-options.html">HTML5 data-* attributes - table options</a></li>
|
||||
|
Loading…
x
Reference in New Issue
Block a user