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

New: child row API methods for showing / hiding child rows

Browse Source 
- 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 2013-05-07 17:56:07 +01:00
parent ed34f7972d
commit bd804fdcb8
7 changed files with 222 additions and 479 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

507
examples/api/row_details.html
View File

@ -8,67 +8,63 @@
<style type="text/css" title="currentStyle">
@import "../../media/css/demo_page.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>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
sOut += '<tr><td>Rendering engine:</td><td>'+aData[1]+' '+aData[4]+'</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
/* Formatting function for row details */
function format ( data ) {
return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
'<tr><td>Rendering engine:</td><td>'+data.engine+' '+data.grade+'</td></tr>' +
'<tr><td>Link to source:</td><td>Could provide a link here</td></tr>' +
'<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>' +
'</table>';
}
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '<img src="../examples_support/details_open.png">';
nCloneTd.className = "center";
$('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
$('#example tbody tr').each( function () {
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 ] }
var table = $('#example').DataTable( {
"ajax": "../ajax/sources/objects.txt",
"columns": [
{
"sortable": false,
"className": 'icon',
"defaultContent": ''
},
{ "data": "engine" },
{ "data": "browser" },
{ "data": "platform" },
{ "data": "version" },
{ "data": "grade" }
],
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* 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 );
"sorting": [[1, 'asc']],
initComplete: function () {
// @todo this should be done automatically by DT for Ajax src
table.columns.adjust();
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
} );
// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.icon', function () {
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">
<thead>
<tr>
<th></th>
<th>Rendering engine</th>
<th>Browser</th>
<th>Platform(s)</th>
@ -95,411 +92,7 @@
<th>CSS grade</th>
</tr>
</thead>
<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>
<tbody></tbody>
</table>
</div>
<div class="spacer"></div>

2
media/src/api/api.columns.js
View File

@ -118,6 +118,8 @@ _api.register( 'columns().visible()', function ( vis ) {
_fnDrawHead( settings, settings.aoHeader );
_fnDrawHead( settings, settings.aoFooter );
_fnCallbackFire( settings, null, 'column-visibility', [settings, column, vis] );
_fnSaveState( settings );
} );
} );

9
media/src/api/api.core.js
View File

@ -548,6 +548,13 @@ _Api.prototype = /** @lends DataTables.Api */{
_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
i, ien,
heir = name.split('.'),
@ -562,7 +569,7 @@ _Api.register = function ( name, val )
}
return null;
};
for ( i=0, ien=heir.length ; i<ien ; i++ ) {
method = heir[i].indexOf('()') !== -1;
key = method ?

145
media/src/api/api.row.js
View File

@ -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;
} );
}());
}());

9
media/src/core/core.columns.js
View File

@ -78,7 +78,14 @@ function _fnColumnOptions( oSettings, iCol, oOptions )
oCol.sType = oOptions.sType;
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 );
_fnMap( oCol, oOptions, "sWidth", "sWidthOrig" );

10
media/src/core/core.draw.js
View File

@ -399,16 +399,6 @@ function _fnDraw( oSettings )
anRows.push( nRow );
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

19
media/src/core/core.support.js
View File

@ -171,22 +171,21 @@ function _fnCallbackReg( oSettings, sStore, fn, sName )
* @param {array} aArgs Array of arguments to pass to the callback function / trigger
* @memberof DataTable#oApi
*/
function _fnCallbackFire( oSettings, sStore, sTrigger, aArgs )
function _fnCallbackFire( settings, callbackArr, event, args )
{
var aoStore = oSettings[sStore];
var aRet =[];
var ret = [];
for ( var i=aoStore.length-1 ; i>=0 ; i-- )
{
aRet.push( aoStore[i].fn.apply( oSettings.oInstance, aArgs ) );
if ( callbackArr ) {
ret = $.map( settings[callbackArr].slice().reverse(), function (val, i) {
return val.fn.apply( settings.oInstance, args );
} );
}
if ( sTrigger !== null )
{
$(oSettings.oInstance).trigger(sTrigger, aArgs);
if ( event !== null ) {
$(settings.oInstance).trigger(event, args);
}
return aRet;
return ret;
}