I'm checking if datatables and editor plugin match the requirement for my project...
... thanks in advance
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[0]+' '+aData[1]+' '+aData[2]+'';
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() {
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";
/* 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 = "sites/all/modules/mymodule/js/datatables/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "sites/all/modules/mymodule/js/datatables/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
[/code]
If you are using objects as the data source for the rows, as it appears you are doing, then yes, you would use the object properties rather than array access.
Replies
Yes it should be quite possible. Can you show us the code you are using so we can advise?
Also, I note that your trial license of Editor expired towards the end of last month. How have you found the trial?
Regards,
Allan
... thanks in advance
[code]
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Rendering engine:'+aData[0]+' '+aData[1]+' '+aData[2]+'';
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() {
/*
* Insert a 'details' column to the table
*/
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 editor = new $.fn.dataTable.Editor( {
"ajaxUrl": "sites/all/modules/mymodule/js/datatables/extras/Editor/examples/php/parameters.php",
"domTable": "#example",
"idSrc" : "id",
"fields": [/*{
"label": "id:",
"name": "id",
},*/ {
"label": "a:",
"name": "a"
}, {
"label": "b:",
"name": "b"
}, {
"label": "c:",
"name": "c"
}
]
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[1, 'asc']],
"sDom": "Tlfrtip",
"sAjaxSource": "sites/all/modules/mymodule/js/datatables/extras/Editor/examples/php/parameters.php",
"aoColumns": [
{
"sClass": "open_close",
"bSortable": false,
"bSearchable": false,
"sDefaultContent": ''
},
{ "mData": "id" },
{ "mData": "a" },
{ "mData": "b" },
{ "mData": "c" }
],
"oTableTools": {
"sRowSelect": "multi",
"aButtons": [
{ "sExtends": "editor_create", "editor": editor },
{ "sExtends": "editor_edit", "editor": editor },
{ "sExtends": "editor_remove", "editor": editor }
]
}
});
/*
* Column Sorting
*/
$('#example').dataTable().columnFilter(
{
aoColumns: [ null,
null,
{ type: "text", bRegex: true, bSmart: true }
]
}
);
/* 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 = "sites/all/modules/mymodule/js/datatables/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "sites/all/modules/mymodule/js/datatables/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
[/code]
The "iRow" value seems to be correct (the same value if i delete the aoColumns), but fnGetData return undefined.
Just aData[0] value is not undefined, it contains
""
[code]
this.fnGetData = function( mRow, iCol )
{
var oSettings = _fnSettingsFromNode( this[DataTable.ext.iApiIndex] );
if ( mRow !== undefined )
{
var iRow = mRow;
if ( typeof mRow === 'object' )
{
var sNode = mRow.nodeName.toLowerCase();
if (sNode === "tr" )
{
iRow = _fnNodeToDataIndex(oSettings, mRow);
alert(iRow);
}
else if ( sNode === "td" )
{
iRow = _fnNodeToDataIndex(oSettings, mRow.parentNode);
iCol = _fnNodeToColumnIndex( oSettings, iRow, mRow );
}
}
if ( iCol !== undefined )
{
return _fnGetCellData( oSettings, iRow, iCol, '' );
}
return (oSettings.aoData[iRow]!==undefined) ?
oSettings.aoData[iRow]._aData : null;
}
return _fnGetDataMaster( oSettings );
};
[/code]
Allan