mirror of
https://github.com/DataTables/DataTables.git
synced 2024-12-01 13:24:10 +01:00
New: child row API methods for showing / hiding child rows
- Showing and hiding details about a row in a child row is very useful and proven to be a popular part of DataTables. This commit provides that ability in the new API and extends it. It also fully modularises the child rows aspects, so it could be removed from the core without effecting any other aspects (it may be moved into a seperate file in future). - This will effectively replace fnOpen, fnClose and fnIsOpen - Added methods: - row( selector, opts ).child() - row( selector, opts ).child( str, class ) - row( selector, opts ).child( str, class ).show() - row( selector, opts ).child( str, class ).hide() - row( selector, opts ).child.show() - row( selector, opts ).child.hide() - row( selector, opts ).child.isShown() - Note that unlike the old API you need to specify the data first, and then use the show() method to show the child row. This allows the details rows to be configured before they are actually shown. - Additionally multiple child rows can be attached to a parent (pass `str` (from above) as an array to use this feature. API plug-ins could use this ability to show fully nested tables. - Not just a string can be passed in now, but also a TR node which will actually be used (rather than put into a nested row), any other type of node (which will be inserted into a wrapper row/cell) or a jQuery object.
This commit is contained in:
Allan Jardine
parent
ed34f7972d
commit
bd804fdcb8
@ -8,67 +8,63 @@
|
|||||||
<style type="text/css" title="currentStyle">
|
<style type="text/css" title="currentStyle">
|
||||||
@import "../../media/css/demo_page.css";
|
@import "../../media/css/demo_page.css";
|
||||||
@import "../../media/css/demo_table.css";
|
@import "../../media/css/demo_table.css";
|
||||||
|
|
||||||
|
|
||||||
|
tr td.icon {
|
||||||
|
background: url('../examples_support/details_open.png') no-repeat center center;
|
||||||
|
}
|
||||||
|
tr.shown td.icon {
|
||||||
|
background: url('../examples_support/details_close.png') no-repeat center center;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
|
||||||
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
|
||||||
<script type="text/javascript" charset="utf-8">
|
<script type="text/javascript" charset="utf-8">
|
||||||
/* Formating function for row details */
|
/* Formatting function for row details */
|
||||||
function fnFormatDetails ( oTable, nTr )
|
function format ( data ) {
|
||||||
{
|
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
|
||||||
var aData = oTable.fnGetData( nTr );
|
'<tr><td>Rendering engine:</td><td>'+data.engine+' '+data.grade+'</td></tr>' +
|
||||||
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
|
'<tr><td>Link to source:</td><td>Could provide a link here</td></tr>' +
|
||||||
sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
|
'<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>' +
|
||||||
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
|
'</table>';
|
||||||
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
|
|
||||||
sOut += '</table>';
|
|
||||||
|
|
||||||
return sOut;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
/*
|
var table = $('#example').DataTable( {
|
||||||
* Insert a 'details' column to the table
|
"ajax": "../ajax/sources/objects.txt",
|
||||||
*/
|
"columns": [
|
||||||
var nCloneTh = document.createElement( 'th' );
|
{
|
||||||
var nCloneTd = document.createElement( 'td' );
|
"sortable": false,
|
||||||
nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
|
"className": 'icon',
|
||||||
nCloneTd.className = "center";
|
"defaultContent": ''
|
||||||
|
},
|
||||||
$('#example thead tr').each( function () {
|
{ "data": "engine" },
|
||||||
this.insertBefore( nCloneTh, this.childNodes[0] );
|
{ "data": "browser" },
|
||||||
} );
|
{ "data": "platform" },
|
||||||
|
{ "data": "version" },
|
||||||
$('#example tbody tr').each( function () {
|
{ "data": "grade" }
|
||||||
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
|
|
||||||
} );
|
|
||||||
|
|
||||||
/*
|
|
||||||
* Initialse DataTables, with no sorting on the 'details' column
|
|
||||||
*/
|
|
||||||
var oTable = $('#example').dataTable( {
|
|
||||||
"aoColumnDefs": [
|
|
||||||
{ "bSortable": false, "aTargets": [ 0 ] }
|
|
||||||
],
|
],
|
||||||
"aaSorting": [[1, 'asc']]
|
"sorting": [[1, 'asc']],
|
||||||
});
|
initComplete: function () {
|
||||||
|
// @todo this should be done automatically by DT for Ajax src
|
||||||
/* Add event listener for opening and closing details
|
table.columns.adjust();
|
||||||
* Note that the indicator for showing which row is open is not controlled by DataTables,
|
|
||||||
* rather it is done here
|
|
||||||
*/
|
|
||||||
$('#example tbody td img').live('click', function () {
|
|
||||||
var nTr = $(this).parents('tr')[0];
|
|
||||||
if ( oTable.fnIsOpen(nTr) )
|
|
||||||
{
|
|
||||||
/* This row is already open - close it */
|
|
||||||
this.src = "../examples_support/details_open.png";
|
|
||||||
oTable.fnClose( nTr );
|
|
||||||
}
|
}
|
||||||
else
|
} );
|
||||||
{
|
|
||||||
/* Open this row */
|
// Add event listener for opening and closing details
|
||||||
this.src = "../examples_support/details_close.png";
|
$('#example tbody').on('click', 'td.icon', function () {
|
||||||
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
|
var tr = $(this).parents('tr');
|
||||||
|
var row = table.row( tr );
|
||||||
|
|
||||||
|
if ( row.child.isShown() ) {
|
||||||
|
// This row is already open - close it
|
||||||
|
row.child.hide();
|
||||||
|
tr.removeClass('shown');
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
// Open this row
|
||||||
|
row.child( format(row.data()) ).show();
|
||||||
|
tr.addClass('shown');
|
||||||
}
|
}
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
@ -88,6 +84,7 @@
|
|||||||
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
|
<th></th>
|
||||||
<th>Rendering engine</th>
|
<th>Rendering engine</th>
|
||||||
<th>Browser</th>
|
<th>Browser</th>
|
||||||
<th>Platform(s)</th>
|
<th>Platform(s)</th>
|
||||||
@ -95,411 +92,7 @@
|
|||||||
<th>CSS grade</th>
|
<th>CSS grade</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody></tbody>
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 4.0</td>
|
|
||||||
<td>Win 95+</td>
|
|
||||||
<td class="center">4</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 5.0</td>
|
|
||||||
<td>Win 95+</td>
|
|
||||||
<td class="center">5</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 5.5</td>
|
|
||||||
<td>Win 95+</td>
|
|
||||||
<td class="center">5.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet
|
|
||||||
Explorer 6</td>
|
|
||||||
<td>Win 98+</td>
|
|
||||||
<td class="center">6</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>Internet Explorer 7</td>
|
|
||||||
<td>Win XP SP2+</td>
|
|
||||||
<td class="center">7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Trident</td>
|
|
||||||
<td>AOL browser (AOL desktop)</td>
|
|
||||||
<td>Win XP</td>
|
|
||||||
<td class="center">6</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 1.0</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 1.5</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 2.0</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Firefox 3.0</td>
|
|
||||||
<td>Win 2k+ / OSX.3+</td>
|
|
||||||
<td class="center">1.9</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Camino 1.0</td>
|
|
||||||
<td>OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Camino 1.5</td>
|
|
||||||
<td>OSX.3+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Netscape 7.2</td>
|
|
||||||
<td>Win 95+ / Mac OS 8.6-9.2</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Netscape Browser 8</td>
|
|
||||||
<td>Win 98SE+</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Netscape Navigator 9</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.0</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.1</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.2</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.2</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.3</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.3</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.4</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.4</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.5</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.6</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">1.6</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.7</td>
|
|
||||||
<td>Win 98+ / OSX.1+</td>
|
|
||||||
<td class="center">1.7</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Mozilla 1.8</td>
|
|
||||||
<td>Win 98+ / OSX.1+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Seamonkey 1.1</td>
|
|
||||||
<td>Win 98+ / OSX.2+</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Gecko</td>
|
|
||||||
<td>Epiphany 2.20</td>
|
|
||||||
<td>Gnome</td>
|
|
||||||
<td class="center">1.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 1.2</td>
|
|
||||||
<td>OSX.3</td>
|
|
||||||
<td class="center">125.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 1.3</td>
|
|
||||||
<td>OSX.3</td>
|
|
||||||
<td class="center">312.8</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 2.0</td>
|
|
||||||
<td>OSX.4+</td>
|
|
||||||
<td class="center">419.3</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>Safari 3.0</td>
|
|
||||||
<td>OSX.4+</td>
|
|
||||||
<td class="center">522.1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>OmniWeb 5.5</td>
|
|
||||||
<td>OSX.4+</td>
|
|
||||||
<td class="center">420</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>iPod Touch / iPhone</td>
|
|
||||||
<td>iPod</td>
|
|
||||||
<td class="center">420.1</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Webkit</td>
|
|
||||||
<td>S60</td>
|
|
||||||
<td>S60</td>
|
|
||||||
<td class="center">413</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 7.0</td>
|
|
||||||
<td>Win 95+ / OSX.1+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 7.5</td>
|
|
||||||
<td>Win 95+ / OSX.2+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 8.0</td>
|
|
||||||
<td>Win 95+ / OSX.2+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 8.5</td>
|
|
||||||
<td>Win 95+ / OSX.2+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 9.0</td>
|
|
||||||
<td>Win 95+ / OSX.3+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 9.2</td>
|
|
||||||
<td>Win 88+ / OSX.3+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera 9.5</td>
|
|
||||||
<td>Win 88+ / OSX.3+</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Opera for Wii</td>
|
|
||||||
<td>Wii</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Nokia N800</td>
|
|
||||||
<td>N800</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Presto</td>
|
|
||||||
<td>Nintendo DS browser</td>
|
|
||||||
<td>Nintendo DS</td>
|
|
||||||
<td class="center">8.5</td>
|
|
||||||
<td class="center">C/A<sup>1</sup></td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>KHTML</td>
|
|
||||||
<td>Konqureror 3.1</td>
|
|
||||||
<td>KDE 3.1</td>
|
|
||||||
<td class="center">3.1</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>KHTML</td>
|
|
||||||
<td>Konqureror 3.3</td>
|
|
||||||
<td>KDE 3.3</td>
|
|
||||||
<td class="center">3.3</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>KHTML</td>
|
|
||||||
<td>Konqureror 3.5</td>
|
|
||||||
<td>KDE 3.5</td>
|
|
||||||
<td class="center">3.5</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Tasman</td>
|
|
||||||
<td>Internet Explorer 4.5</td>
|
|
||||||
<td>Mac OS 8-9</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Tasman</td>
|
|
||||||
<td>Internet Explorer 5.1</td>
|
|
||||||
<td>Mac OS 7.6-9</td>
|
|
||||||
<td class="center">1</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Tasman</td>
|
|
||||||
<td>Internet Explorer 5.2</td>
|
|
||||||
<td>Mac OS 8-X</td>
|
|
||||||
<td class="center">1</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>NetFront 3.1</td>
|
|
||||||
<td>Embedded devices</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeA">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>NetFront 3.4</td>
|
|
||||||
<td>Embedded devices</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">A</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>Dillo 0.8</td>
|
|
||||||
<td>Embedded devices</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>Links</td>
|
|
||||||
<td>Text only</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeX">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>Lynx</td>
|
|
||||||
<td>Text only</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">X</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>IE Mobile</td>
|
|
||||||
<td>Windows Mobile 6</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeC">
|
|
||||||
<td>Misc</td>
|
|
||||||
<td>PSP browser</td>
|
|
||||||
<td>PSP</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">C</td>
|
|
||||||
</tr>
|
|
||||||
<tr class="gradeU">
|
|
||||||
<td>Other browsers</td>
|
|
||||||
<td>All others</td>
|
|
||||||
<td>-</td>
|
|
||||||
<td class="center">-</td>
|
|
||||||
<td class="center">U</td>
|
|
||||||
</tr>
|
|
||||||
</tbody>
|
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
<div class="spacer"></div>
|
<div class="spacer"></div>
|
||||||
|
|||||||
@ -118,6 +118,8 @@ _api.register( 'columns().visible()', function ( vis ) {
|
|||||||
_fnDrawHead( settings, settings.aoHeader );
|
_fnDrawHead( settings, settings.aoHeader );
|
||||||
_fnDrawHead( settings, settings.aoFooter );
|
_fnDrawHead( settings, settings.aoFooter );
|
||||||
|
|
||||||
|
_fnCallbackFire( settings, null, 'column-visibility', [settings, column, vis] );
|
||||||
|
|
||||||
_fnSaveState( settings );
|
_fnSaveState( settings );
|
||||||
} );
|
} );
|
||||||
} );
|
} );
|
||||||
|
|||||||
@ -548,6 +548,13 @@ _Api.prototype = /** @lends DataTables.Api */{
|
|||||||
|
|
||||||
_Api.register = function ( name, val )
|
_Api.register = function ( name, val )
|
||||||
{
|
{
|
||||||
|
if ( $.isArray( name ) ) {
|
||||||
|
for ( var j=0, jen=name.length ; j<jen ; j++ ) {
|
||||||
|
_Api.register( name[j], val );
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
var
|
var
|
||||||
i, ien,
|
i, ien,
|
||||||
heir = name.split('.'),
|
heir = name.split('.'),
|
||||||
@ -562,7 +569,7 @@ _Api.register = function ( name, val )
|
|||||||
}
|
}
|
||||||
return null;
|
return null;
|
||||||
};
|
};
|
||||||
|
|
||||||
for ( i=0, ien=heir.length ; i<ien ; i++ ) {
|
for ( i=0, ien=heir.length ; i<ien ; i++ ) {
|
||||||
method = heir[i].indexOf('()') !== -1;
|
method = heir[i].indexOf('()') !== -1;
|
||||||
key = method ?
|
key = method ?
|
||||||
|
|||||||
@ -63,5 +63,150 @@ _api.register( 'row().remove()', function () {
|
|||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
|
||||||
|
var details_add = function ( ctx, row, data, klass )
|
||||||
|
{
|
||||||
|
// Convert to array of TR elements
|
||||||
|
var rows = [];
|
||||||
|
var addRow = function ( r, k ) {
|
||||||
|
if ( ! r.nodeName || r.nodeName.toUpperCase() !== 'tr' ) {
|
||||||
|
r = $('<tr><td></td></tr>').find('td').html( r ).parent();
|
||||||
|
}
|
||||||
|
|
||||||
|
$('td', r).addClass( k )[0].colSpan = _fnVisbleColumns( ctx );
|
||||||
|
rows.push( r[0] );
|
||||||
|
};
|
||||||
|
|
||||||
|
if ( $.isArray( data ) || data instanceof $ ) {
|
||||||
|
for ( var i=0, ien=data.length ; i<ien ; i++ ) {
|
||||||
|
addRow( data[i], klass );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
addRow( data, klass );
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( row._details ) {
|
||||||
|
row._details.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
row._details = $(rows);
|
||||||
|
|
||||||
|
// If the children were already shown, that state should be retained
|
||||||
|
if ( row._detailsShow ) {
|
||||||
|
row._details.insertAfter( row.nTr );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var details_display = function ( show ) {
|
||||||
|
var ctx = this.context;
|
||||||
|
|
||||||
|
if ( ctx.length && this.length ) {
|
||||||
|
var row = ctx[0].aoData[ this[0] ];
|
||||||
|
|
||||||
|
if ( row._details ) {
|
||||||
|
row._detailsShow = show;
|
||||||
|
if ( show ) {
|
||||||
|
row._details.insertAfter( row.nTr );
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
row._details.remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
details_events( ctx[0] );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
var details_events = function ( settings )
|
||||||
|
{
|
||||||
|
var table = $(settings.nTable);
|
||||||
|
|
||||||
|
table.off('draw.DT_details');
|
||||||
|
table.off('column-visibility.DT_details');
|
||||||
|
|
||||||
|
if ( _pluck( settings.aoData, '_details' ).length > 0 ) {
|
||||||
|
// On each draw, insert the required elements into the document
|
||||||
|
table.on('draw.DT_details', function () {
|
||||||
|
table.find('tbody tr').each( function () {
|
||||||
|
// Look up the row index for each row and append open row
|
||||||
|
var rowIdx = _fnNodeToDataIndex( settings, this );
|
||||||
|
var row = settings.aoData[ rowIdx ];
|
||||||
|
|
||||||
|
if ( row._detailsShow ) {
|
||||||
|
row._details.insertAfter( this );
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
} );
|
||||||
|
|
||||||
|
// Column visibility change - update the colspan
|
||||||
|
table.on( 'column-visibility.DT_details', function ( e, settings, idx, vis ) {
|
||||||
|
// Update the colspan for the details rows (note, only if it already has
|
||||||
|
// a colspan)
|
||||||
|
var row, visible = _fnVisbleColumns( settings );
|
||||||
|
|
||||||
|
for ( var i=0, ien=settings.aoData.length ; i<ien ; i++ ) {
|
||||||
|
row = settings.aoData[i];
|
||||||
|
|
||||||
|
if ( row._details ) {
|
||||||
|
row._details.children('td[colspan]').attr('colspan', visible );
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} );
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// data can be:
|
||||||
|
// tr
|
||||||
|
// string
|
||||||
|
// jQuery or array of any of the above
|
||||||
|
_api.register( 'row().child()', function ( data, klass ) {
|
||||||
|
var ctx = this.context;
|
||||||
|
|
||||||
|
if ( ! data ) {
|
||||||
|
// get
|
||||||
|
return ctx.length && this.length ?
|
||||||
|
ctx[0].aoData[ this[0] ]._details :
|
||||||
|
undefined;
|
||||||
|
}
|
||||||
|
else if ( ctx.length && this.length ) {
|
||||||
|
// set
|
||||||
|
details_add( ctx[0], ctx[0].aoData[ this[0] ], data, klass );
|
||||||
|
}
|
||||||
|
|
||||||
|
return this;
|
||||||
|
} );
|
||||||
|
|
||||||
|
_api.register( ['row().child.show()', 'row().child().show()'], function () {
|
||||||
|
details_display.call( this, true );
|
||||||
|
} );
|
||||||
|
|
||||||
|
_api.register( ['row().child.hide()', 'row().child().hide()'], function () {
|
||||||
|
details_display.call( this, false );
|
||||||
|
} );
|
||||||
|
|
||||||
|
_api.register( 'row().child.isShown()', function () {
|
||||||
|
var ctx = this.context;
|
||||||
|
|
||||||
|
if ( ctx.length && this.length ) {
|
||||||
|
// _detailsShown as false or undefined will fall through to return false
|
||||||
|
return ctx[0].aoData[ this[0] ]._detailsShow || false;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
} );
|
||||||
|
|
||||||
|
}());
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}());
|
}());
|
||||||
|
|
||||||
|
|||||||
@ -78,7 +78,14 @@ function _fnColumnOptions( oSettings, iCol, oOptions )
|
|||||||
oCol.sType = oOptions.sType;
|
oCol.sType = oOptions.sType;
|
||||||
oCol._bAutoType = false;
|
oCol._bAutoType = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// `class` is a reserved word in Javascript, so we need to provide
|
||||||
|
// the ability to use a valid name for the camel case input
|
||||||
|
if ( oOptions.className && ! oOptions.sClass )
|
||||||
|
{
|
||||||
|
oOptions.sClass = oOptions.className;
|
||||||
|
}
|
||||||
|
|
||||||
$.extend( oCol, oOptions );
|
$.extend( oCol, oOptions );
|
||||||
_fnMap( oCol, oOptions, "sWidth", "sWidthOrig" );
|
_fnMap( oCol, oOptions, "sWidth", "sWidthOrig" );
|
||||||
|
|
||||||
|
|||||||
@ -399,16 +399,6 @@ function _fnDraw( oSettings )
|
|||||||
|
|
||||||
anRows.push( nRow );
|
anRows.push( nRow );
|
||||||
iRowCount++;
|
iRowCount++;
|
||||||
|
|
||||||
/* If there is an open row - and it is attached to this parent - attach it on redraw */
|
|
||||||
for ( var k=0 ; k<iOpenRows ; k++ )
|
|
||||||
{
|
|
||||||
if ( nRow == oSettings.aoOpenRows[k].nParent )
|
|
||||||
{
|
|
||||||
anRows.push( oSettings.aoOpenRows[k].nTr );
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
else
|
else
|
||||||
|
|||||||
@ -171,22 +171,21 @@ function _fnCallbackReg( oSettings, sStore, fn, sName )
|
|||||||
* @param {array} aArgs Array of arguments to pass to the callback function / trigger
|
* @param {array} aArgs Array of arguments to pass to the callback function / trigger
|
||||||
* @memberof DataTable#oApi
|
* @memberof DataTable#oApi
|
||||||
*/
|
*/
|
||||||
function _fnCallbackFire( oSettings, sStore, sTrigger, aArgs )
|
function _fnCallbackFire( settings, callbackArr, event, args )
|
||||||
{
|
{
|
||||||
var aoStore = oSettings[sStore];
|
var ret = [];
|
||||||
var aRet =[];
|
|
||||||
|
|
||||||
for ( var i=aoStore.length-1 ; i>=0 ; i-- )
|
if ( callbackArr ) {
|
||||||
{
|
ret = $.map( settings[callbackArr].slice().reverse(), function (val, i) {
|
||||||
aRet.push( aoStore[i].fn.apply( oSettings.oInstance, aArgs ) );
|
return val.fn.apply( settings.oInstance, args );
|
||||||
|
} );
|
||||||
}
|
}
|
||||||
|
|
||||||
if ( sTrigger !== null )
|
if ( event !== null ) {
|
||||||
{
|
$(settings.oInstance).trigger(event, args);
|
||||||
$(oSettings.oInstance).trigger(sTrigger, aArgs);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return aRet;
|
return ret;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user