rooty/DataTables
1
0
Fork 0
mirror of https://github.com/DataTables/DataTables.git synced 2024-12-10 22:24:10 +01:00
Code Issues Releases Activity
e8bd8b21bc
DataTables/examples/server_side/row_details.html

436 lines
18 KiB
HTML
Raw Normal View History

New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
Dev: Change the viewport meta tag to not fix the width
2014-03-04 09:51:50 +01:00
<meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<title>DataTables example - Row details</title>
Dev fix: Need to get the media path before setting the linclude library paths
2013-12-19 15:04:37 +01:00
<link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="../resources/demo.css">
<style type="text/css" class="init">
td.details-control {
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
}
</style>
Dev fix: Need to get the media path before setting the linclude library paths
2013-12-19 15:04:37 +01:00
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init">
function format ( d ) {
return 'Full name: '+d.first_name+' '+d.last_name+'<br>'+
'Salary: '+d.salary+'<br>'+
'The child row can contain any data you wish, including links, images, inner tables etc.';
}
$(document).ready(function() {
var dt = $('#example').DataTable( {
"processing": true,
"serverSide": true,
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
"ajax": "scripts/ids-objects.php",
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
"columns": [
{
"class": "details-control",
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
"orderable": false,
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
"data": null,
"defaultContent": ""
},
{ "data": "first_name" },
{ "data": "last_name" },
{ "data": "position" },
{ "data": "office" }
],
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
"order": [[1, 'asc']]
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
} );
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#example tbody').on( 'click', 'tr td:first-child', function () {
Merge branch 'master' of github.com:DataTables/DataTablesSrc
2014-05-30 12:10:36 +02:00
var tr = $(this).closest('tr');
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
var row = dt.row( tr );
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
var idx = $.inArray( tr.attr('id'), detailRows );
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// Remove from the 'open' array
detailRows.splice( idx, 1 );
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
}
} );
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td:first-child').trigger( 'click' );
} );
} );
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
} );
</script>
</head>
<body class="dt-example">
<div class="container">
<section>
Update: Improved responsivness for examples CSS
2014-03-14 13:32:46 +01:00
<h1>DataTables example <span>Row details</span></h1>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<div class="info">
<p>This example shows the use of DataTables' ability to show and hide child rows which are attached to
a parent row in the host table. This is often used to show additional information about a row,
particularly when you wish to convey more information about a row than there is space for in the host
table.</p>
<p>The example below shows server-side processing being used with the first column having an event
listener attached to it which will toggle the child row's display. This is set up using <a href=
Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes
2013-12-19 15:03:24 +01:00
"//datatables.net/reference/option/columns.data"><code class="option" title=
Dev: Updates for Editor development Update: Show software tag in the markdown links for the documentation
2014-03-14 13:33:02 +01:00
"DataTables initialisation option">columns.data<span>DT</span></code></a> and <a href=
Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes
2013-12-19 15:03:24 +01:00
"//datatables.net/reference/option/columns.defaultContent"><code class="option" title=
Dev: Updates for Editor development Update: Show software tag in the markdown links for the documentation
2014-03-14 13:33:02 +01:00
"DataTables initialisation option">columns.defaultContent<span>DT</span></code></a>, in combination
with CSS to show an empty cell with a background image which can be clicked upon.</p>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes
2013-12-19 15:03:24 +01:00
<p>The event handler makes use of the <a href="//datatables.net/reference/api/row().child"><code class=
Dev: Updates for Editor development Update: Show software tag in the markdown links for the documentation
2014-03-14 13:33:02 +01:00
"api" title="DataTables API method">row().child<span>DT</span></code></a> methods to firstly check if a
row is already displayed, and if so hide it, if not show it. The content of the child row is, in this
example, defined by the <code>formatDetails()</code> function, but you would replace that with whatever
you wanted to show the content required, possibly including, for example, an Ajax call to the server to
obtain the extra information to show. Note that the format details function has access to the full data
source object for the row, including information that is not actually shown in the table (the salary
parameter for example).</p>
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
<p>Furthermore, this example shows a small difference from the <a href=
"../api/row_details.html">client-side row details example</a> in that to have rows automatically reopen
when the table is redrawn, we need to track a unique identifier for each row - in this case the row
<code>id</code>. This is required because in server-side processing mode rows are automatically
destroyed and recreated on each draw.</p>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</div>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
</tr>
</thead>
<tfoot>
<tr>
<th></th>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
</tr>
</tfoot>
</table>
<ul class="tabs">
<li class="active">Javascript</li>
<li>HTML</li>
<li>CSS</li>
<li>Ajax</li>
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<li>Server-side script</li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</ul>
<div class="tabs">
<div class="js">
Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes
2013-12-19 15:03:24 +01:00
<p>The Javascript shown below is used to initialise the table shown in this
example:</p><code class="multiline brush: js;">function format ( d ) {
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
return 'Full name: '+d.first_name+' '+d.last_name+'&lt;br&gt;'+
'Salary: '+d.salary+'&lt;br&gt;'+
'The child row can contain any data you wish, including links, images, inner tables etc.';
}
$(document).ready(function() {
var dt = $('#example').DataTable( {
&quot;processing&quot;: true,
&quot;serverSide&quot;: true,
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
&quot;ajax&quot;: &quot;scripts/ids-objects.php&quot;,
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
&quot;columns&quot;: [
{
&quot;class&quot;: &quot;details-control&quot;,
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
&quot;orderable&quot;: false,
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
&quot;data&quot;: null,
&quot;defaultContent&quot;: &quot;&quot;
},
{ &quot;data&quot;: &quot;first_name&quot; },
{ &quot;data&quot;: &quot;last_name&quot; },
{ &quot;data&quot;: &quot;position&quot; },
{ &quot;data&quot;: &quot;office&quot; }
],
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
&quot;order&quot;: [[1, 'asc']]
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
} );
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// Array to track the ids of the details displayed rows
var detailRows = [];
$('#example tbody').on( 'click', 'tr td:first-child', function () {
Merge branch 'master' of github.com:DataTables/DataTablesSrc
2014-05-30 12:10:36 +02:00
var tr = $(this).closest('tr');
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
var row = dt.row( tr );
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
var idx = $.inArray( tr.attr('id'), detailRows );
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
if ( row.child.isShown() ) {
tr.removeClass( 'details' );
row.child.hide();
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// Remove from the 'open' array
detailRows.splice( idx, 1 );
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
}
else {
tr.addClass( 'details' );
row.child( format( row.data() ) ).show();
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// Add to the 'open' array
if ( idx === -1 ) {
detailRows.push( tr.attr('id') );
}
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
}
} );
New: eq() API method to reduce an API instance to just a single context and result set for the plural methods. Fix: Row details events were itterating over non-DataTables rows creating a Javascript error Fix: Example - Server-side processing row details example updated to be able to restore the details row on a redraw. Update: Documentation - Most examples which used `flatten()` are more correct to use the new `eq()` method, so they have been updated. - This set of changes is based on the discussion in thread 19377. While working on the fix, I realised that the use of flatten() is too broad, so the new `eq()` function is introduced. It is similar to the jQuery eq() method in that it reduces the instance to just the selected index, although in DataTables this is both the context and the result set. Its a small addition, but I think it will provide to be very useful
2014-02-11 12:04:50 +01:00
// On each draw, loop over the `detailRows` array and show any child rows
dt.on( 'draw', function () {
$.each( detailRows, function ( i, id ) {
$('#'+id+' td:first-child').trigger( 'click' );
} );
} );
Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes
2013-12-19 15:03:24 +01:00
} );</code>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<p>In addition to the above code, the following Javascript library files are loaded for use in this
example:</p>
<ul>
Dev fix: Need to get the media path before setting the linclude library paths
2013-12-19 15:04:37 +01:00
<li><a href="../../media/js/jquery.js">../../media/js/jquery.js</a></li>
<li><a href="../../media/js/jquery.dataTables.js">../../media/js/jquery.dataTables.js</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</ul>
</div>
<div class="table">
<p>The HTML shown below is the raw HTML table element, before it has been enhanced by
DataTables:</p>
</div>
<div class="css">
<div>
<p>This example uses a little bit of additional CSS beyond what is loaded from the library
files (below), in order to correctly display the table. The additional CSS used is shown
Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes
2013-12-19 15:03:24 +01:00
below:</p><code class="multiline brush: js;">td.details-control {
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
background: url('../resources/details_open.png') no-repeat center center;
cursor: pointer;
}
tr.details td.details-control {
background: url('../resources/details_close.png') no-repeat center center;
Site: Updates based on my work for the DataTables site. Mostly minor changes to styling, naming or docs fixes
2013-12-19 15:03:24 +01:00
}</code>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</div>
<p>The following CSS library files are loaded for use in this example to provide the styling of the
table:</p>
<ul>
<li><a href=
Dev fix: Need to get the media path before setting the linclude library paths
2013-12-19 15:04:37 +01:00
"../../media/css/jquery.dataTables.css">../../media/css/jquery.dataTables.css</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</ul>
</div>
<div class="ajax">
<p>This table loads data by Ajax. The latest data that has been loaded is shown below. This data
will update automatically as any additional data is loaded.</p>
</div>
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<div class="php">
<p>The script used to perform the server-side processing for this table is shown below. Please note
that this is just an example script using PHP. Server-side processing scripts can be written in any
language, using <a href="//datatables.net/manual/server-side">the protocol described in the
DataTables documentation</a>.</p>
</div>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</div>
</section>
</div>
<section>
<div class="footer">
<div class="gradient"></div>
<div class="liner">
<h2>Other examples</h2>
<div class="toc">
<div class="toc-group">
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<h3><a href="../basic_init/index.html">Basic initialisation</a></h3>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<ul class="toc">
<li><a href="../basic_init/zero_configuration.html">Zero configuration</a></li>
<li><a href="../basic_init/filter_only.html">Feature enable / disable</a></li>
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
<li><a href="../basic_init/table_sorting.html">Default ordering (sorting)</a></li>
<li><a href="../basic_init/multi_col_sort.html">Multi-column ordering</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../basic_init/multiple_tables.html">Multiple tables</a></li>
<li><a href="../basic_init/hidden_columns.html">Hidden columns</a></li>
<li><a href="../basic_init/complex_header.html">Complex headers (rowspan and
colspan)</a></li>
<li><a href="../basic_init/dom.html">DOM positioning</a></li>
<li><a href="../basic_init/flexible_width.html">Flexible table width</a></li>
<li><a href="../basic_init/state_save.html">State saving</a></li>
<li><a href="../basic_init/alt_pagination.html">Alternative pagination</a></li>
<li><a href="../basic_init/scroll_y.html">Scroll - vertical</a></li>
<li><a href="../basic_init/scroll_x.html">Scroll - horizontal</a></li>
<li><a href="../basic_init/scroll_xy.html">Scroll - horizontal and vertical</a></li>
<li><a href="../basic_init/scroll_y_theme.html">Scroll - vertical with jQuery UI
ThemeRoller</a></li>
New: `language.decimal` option. This option can be used to tell DataTables which character is used as a decimal place in the table's data, so that number which are formatted using characters other than a dot as the decimal place can be correctly detected and sorted. - A large part of the world uses the comma as a decimal place, so it makes sense to have this option built-in directly to DataTables, rather than needing to use plu-in sorting types as before: http://en.wikipedia.org/wiki/Decimal_mark - However, the decimal place character cannot be detected automatically since there are far to many ambiguities. As such, a new `language.decimal` option is defined which is passed through to the type detection functions. The type detection functions can then use that character to alter their detection functions to transform numbers into the dot formatted equivilent for parsing in Javascript. - The numeric sorting methods have been bundled together in the function `_addNumericSort` which is called when a character is given for the decimal mark, adding the sorting functions required specifically for that mark. This means that any character at all can be added, while keeping the table's sort performance as it was. - Code size in increased a little for this new feature, but a lot of work has been done to keep it to a minimum (while still optimising for the most common use case of a dot decimal place), and this is a good feature to have in DataTables' core code. - All required documentation added and updated. - Special thanks to Tobias Bäthge for suggesting and sponsoring this feature.
2014-02-10 18:07:22 +01:00
<li><a href="../basic_init/comma-decimal.html">Language - Comma decimal place</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../basic_init/language.html">Language options</a></li>
</ul>
</div>
<div class="toc-group">
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<h3><a href="../advanced_init/index.html">Advanced initialisation</a></h3>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<ul class="toc">
Examples: Add HTML5 data-* attribute example - DataTables 1.10 has the ability to source data for filtering and sorting from HTML5 data-* attributes. This example shows that ability
2013-10-16 16:33:34 +02:00
<li><a href="../advanced_init/events_live.html">DOM / jQuery events</a></li>
<li><a href="../advanced_init/dt_events.html">DataTables events</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../advanced_init/column_render.html">Column rendering</a></li>
Examples: Add HTML5 data-* attribute example - DataTables 1.10 has the ability to source data for filtering and sorting from HTML5 data-* attributes. This example shows that ability
2013-10-16 16:33:34 +02:00
<li><a href="../advanced_init/length_menu.html">Page length options</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<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>
Examples: Add HTML5 data-* attribute example - DataTables 1.10 has the ability to source data for filtering and sorting from HTML5 data-* attributes. This example shows that ability
2013-10-16 16:33:34 +02:00
<li><a href="../advanced_init/html5-data-attributes.html">HTML5 data-* attributes</a></li>
<li><a href="../advanced_init/language_file.html">Language file</a></li>
<li><a href="../advanced_init/defaults.html">Setting defaults</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../advanced_init/row_callback.html">Row created callback</a></li>
Examples: Add HTML5 data-* attribute example - DataTables 1.10 has the ability to source data for filtering and sorting from HTML5 data-* attributes. This example shows that ability
2013-10-16 16:33:34 +02:00
<li><a href="../advanced_init/row_grouping.html">Row grouping</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../advanced_init/footer_callback.html">Footer callback</a></li>
Examples: Add HTML5 data-* attribute example - DataTables 1.10 has the ability to source data for filtering and sorting from HTML5 data-* attributes. This example shows that ability
2013-10-16 16:33:34 +02:00
<li><a href="../advanced_init/dom_toolbar.html">Custom toolbar elements</a></li>
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
<li><a href="../advanced_init/sort_direction_control.html">Order direction sequence
control</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</ul>
</div>
<div class="toc-group">
<h3><a href="../styling/index.html">Styling</a></h3>
<ul class="toc">
<li><a href="../styling/display.html">Base style</a></li>
<li><a href="../styling/no-classes.html">Base style - no styling classes</a></li>
<li><a href="../styling/row-border.html">Base style - row borders</a></li>
<li><a href="../styling/cell-border.html">Base style - cell borders</a></li>
<li><a href="../styling/hover.html">Base style - hover</a></li>
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
<li><a href="../styling/order-column.html">Base style - order-column</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../styling/stripe.html">Base style - stripe</a></li>
<li><a href="../styling/jqueryUI.html">jQuery UI ThemeRoller</a></li>
<li><a href="../styling/bootstrap.html">Bootstrap</a></li>
<li><a href="../styling/foundation.html">Foundation</a></li>
</ul>
</div>
<div class="toc-group">
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<h3><a href="../data_sources/index.html">Data sources</a></h3>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<ul class="toc">
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<li><a href="../data_sources/dom.html">HTML (DOM) sourced data</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../data_sources/ajax.html">Ajax sourced data</a></li>
<li><a href="../data_sources/js_array.html">Javascript sourced data</a></li>
<li><a href="../data_sources/server_side.html">Server-side processing</a></li>
</ul>
</div>
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<div class="toc-group">
<h3><a href="../api/index.html">API</a></h3>
<ul class="toc">
<li><a href="../api/add_row.html">Add rows</a></li>
<li><a href="../api/multi_filter.html">Individual column filtering (text inputs)</a></li>
<li><a href="../api/multi_filter_select.html">Individual column filtering (select
inputs)</a></li>
<li><a href="../api/highlight.html">Highlighting rows and columns</a></li>
<li><a href="../api/row_details.html">Child rows (show extra / detailed
information)</a></li>
<li><a href="../api/select_row.html">Row selection (multiple rows)</a></li>
<li><a href="../api/select_single_row.html">Row selection and deletion (single
row)</a></li>
<li><a href="../api/form.html">Form inputs</a></li>
<li><a href="../api/counter_columns.html">Index column</a></li>
<li><a href="../api/show_hide.html">Show / hide columns dynamically</a></li>
<li><a href="../api/api_in_init.html">Using API in callbacks</a></li>
<li><a href="../api/tabs_and_scrolling.html">Scrolling and jQuery UI tabs</a></li>
<li><a href="../api/regex.html">Filtering API (regular expressions)</a></li>
</ul>
</div>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<div class="toc-group">
<h3><a href="../ajax/index.html">Ajax</a></h3>
<ul class="toc">
<li><a href="../ajax/simple.html">Ajax data source (arrays)</a></li>
<li><a href="../ajax/objects.html">Ajax data source (objects)</a></li>
<li><a href="../ajax/deep.html">Nested object data (objects)</a></li>
<li><a href="../ajax/objects_subarrays.html">Nested object data (arrays)</a></li>
Merge branch 'master' of github.com:DataTables/DataTablesSrc
2014-01-14 16:51:06 +01:00
<li><a href="../ajax/orthogonal-data.html">Orthogonal data</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<li><a href="../ajax/null_data_source.html">Generated content for a column</a></li>
<li><a href="../ajax/custom_data_property.html">Custom data source property</a></li>
<li><a href="../ajax/custom_data_flat.html">Flat array data source</a></li>
<li><a href="../ajax/defer_render.html">Deferred rendering for speed</a></li>
</ul>
</div>
<div class="toc-group">
Site: Updates based on feedback from `tangerine`
2014-01-17 17:45:14 +01:00
<h3><a href="./index.html">Server-side</a></h3>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
<ul class="toc active">
<li><a href="./simple.html">Server-side processing</a></li>
<li><a href="./custom_vars.html">Custom HTTP variables</a></li>
<li><a href="./post.html">POST data</a></li>
<li><a href="./ids.html">Automatic addition of row ID attributes</a></li>
<li><a href="./object_data.html">Object data source</a></li>
<li class="active"><a href="./row_details.html">Row details</a></li>
<li><a href="./select_rows.html">Row selection</a></li>
<li><a href="./jsonp.html">JSONP data source for remote domains</a></li>
<li><a href="./defer_loading.html">Deferred loading of data</a></li>
<li><a href="./pipeline.html">Pipelining data to reduce Ajax calls for paging</a></li>
</ul>
</div>
<div class="toc-group">
<h3><a href="../plug-ins/index.html">Plug-ins</a></h3>
<ul class="toc">
<li><a href="../plug-ins/api.html">API plug-in methods</a></li>
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
<li><a href="../plug-ins/sorting_auto.html">Ordering plug-ins (with type
detection)</a></li>
<li><a href="../plug-ins/sorting_manual.html">Ordering plug-ins (no type
detection)</a></li>
Fix: Example for range filtering was attaching to the wrong parameter - should be `$.fn.dataTable.ext.search`
2014-02-10 18:06:57 +01:00
<li><a href="../plug-ins/range_filtering.html">Custom filtering - range search</a></li>
Updated: Update examples and documentation for the change in committed in cdc6399 to make naming more consistent
2013-11-12 20:18:51 +01:00
<li><a href="../plug-ins/dom_sort.html">Live DOM ordering</a></li>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
</ul>
</div>
</div>
<div class="epilogue">
<p>Please refer to the <a href="http://www.datatables.net">DataTables documentation</a> for full
information about its API properties and methods.<br>
Additionally, there are a wide range of <a href="http://www.datatables.net/extras">extras</a> and
<a href="http://www.datatables.net/plug-ins">plug-ins</a> which extend the capabilities of
DataTables.</p>
<p class="copyright">DataTables designed and created by <a href=
Fix: When in server-side processing mode, the processing display was being removed too early on click to sort column. - Fixed DataTables/DataTables 259
2014-01-03 10:56:57 +01:00
"http://www.sprymedia.co.uk">SpryMedia Ltd</a> &#169; 2007-2014<br>
New - examples: Examples updated and restyled for DataTables 1.10 - Additional information and better layout for examples. See the src repo for more information.
2013-10-16 13:13:30 +02:00
DataTables is licensed under the <a href="http://www.datatables.net/mit">MIT license</a>.</p>
</div>
</div>
</div>
</section>
</body>
</html>
Reference in New Issue Copy Permalink