Difficulty: use Ajax Source Object for some advanced features: Rows Details,....
Difficulty: use Ajax Source Object for some advanced features: Rows Details,....
uline
Posts: 4Questions: 0Answers: 0
Dear Allan,
DataTables have many advanced features, but it quite difficult when we use Ajax Data Source and also use the features such as: show and hide Rows Dettails, Editable Rows,...
I have a difficulty with Row Detail features as below, I think it can not clone "td" nor "th", so it cannot insert the Row Details to the table with ajax source.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
$(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
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] )});
var oTable = $('#example').dataTable({
"sAjaxSource": "data/Ajaxdata.txt", <!--THIS IS THE INSERTED DATA SOURCE-->
"bSort": false,"bFilter":false,"bInfo": false,"bPaginate": false,});
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{this.src = "img/details_open.png"; oTable.fnClose( nTr );}
else
{this.src = "img/details_close.png";oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );} } );
} );
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
[/code]
Please help
Uline
DataTables have many advanced features, but it quite difficult when we use Ajax Data Source and also use the features such as: show and hide Rows Dettails, Editable Rows,...
I have a difficulty with Row Detail features as below, I think it can not clone "td" nor "th", so it cannot insert the Row Details to the table with ajax source.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[1]+' '+aData[4]+'';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';
return sOut;
}
$(document).ready(function() {
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
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] )});
var oTable = $('#example').dataTable({
"sAjaxSource": "data/Ajaxdata.txt", <!--THIS IS THE INSERTED DATA SOURCE-->
"bSort": false,"bFilter":false,"bInfo": false,"bPaginate": false,});
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{this.src = "img/details_open.png"; oTable.fnClose( nTr );}
else
{this.src = "img/details_close.png";oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );} } );
} );
Rendering engine
Browser
Platform(s)
Engine version
CSS grade
[/code]
Please help
Uline
This discussion has been closed.