Json & show/hide row details

Quentin

Hello,

I am quite new to javascript and datatables, but i need to deploy a table view with the show/hide functionality.
For the moment, i have this the data in json provided by php code included in the same page.
Everything is working fine, but there is some troubles in the columns heads width, and there are problems with the new column with the show/hide function and others columns.

I want to work with that json data and display some of the data in the details "panel" and not as a column. What is the right way to do this ?

I have this error :
[quote]DataTables warning (table id = 'example'): Requested unknown parameter '12' from the data source for row 0[/quote]

My json is like this one, stored in aDataSet :
[code]
[
[
"620",
"img_620_mol.png",
"ZIDOVUDINE",
"{30516-87-1}",
"C10H13N5O4",
"1-[(2R,4S,5S)-4-azido-5-(hydroxymethyl)oxolan-2-yl]-5-methylpyrimidine-2,4-dione",
"267",
null,
"{J05AF01}",
"{DB00495}",
"{Q5DNL9}",
"ORAL"
]
]
][/code]

My js code :

[code]
$(document).ready(function() {

$('#dynamic').html( '' );
var oTable = $('#example').dataTable( {
"bAutoWidth": false,
"bScrollCollapse": true,
"aaData": aDataSet,
"aoColumnDefs": [
{ "aTargets": [ 0,2 ], "bSortable": false },
{ "fnRender":
function(obj) {
data_arr = obj.aData[ obj.iDataColumn ].slice(1,-1).split(",");
data = "";
for (var i = 0; i < data_arr.length; i++)
{
data = data+data_arr[i]+"
";
}
return data;
},
"aTargets" : [ 3,8,9,10 ],
"bUseRendered": true
},
{ "sClass": "image",
"aTargets": [ 1 ],
"bSortable": false,
"bUseRendered": false,
"fnRender":
function(obj) {
return obj.aData[ obj.iDataColumn ];
}
},
{ "aTargets": [5], "bVisible": false }
],
"aoColumns": [
{ "sTitle": "" },
{ "sTitle": "id" },
{ "sTitle": "2D Structure" },
{ "sTitle": "name" },
{ "sTitle": "cas" },
{ "sTitle": "formula" },
null,
{ "sTitle": "mw", "sType": "numeric" },
{ "sTitle": "c_max", "sType": "numeric" },
{ "sTitle": "atc" },
{ "sTitle": "iddb" },
{ "sTitle": "Targets" },
{ "sTitle": "route" }
]
} );
[/code]

And a pics of the problem is here : http://qud.free.fr/problem.png

Thanks in advance.

Quentin

Switched from aoColumns to aoColumnDefs solved the error, but i have troubles to assign right Titles since it seems that there is a difference between data column and displayed table index due to the first column with the show/hide functionality.

Quentin

Solved all problems by changing previous test code :
[code] $('#example dataTables_scrollHead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
[/code]

by original code

[code] $('#example thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
[/code]

Excuse me for asking/posting such obvious things ;)
And btw, thanks for Datatables !

Quentin

Finally, i am already unable to show/hide details about a row.

I turned to server side, and every thing is working without trying to add code to show/hide details.

Here is the code :
[code]
var rand = <?php echo $_POST['rand']; ?>;
var oTable;

function fnFormatDetails ( nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'FDA :'+aData[10]+'';
sOut += 'EMA :'+aData[11]+'';
sOut += '';

return sOut;
}

$(document).ready(function() {
/*
* Initialse DataTables
*/

oTable = $('#example').dataTable( {
"aLengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../cgi-bin/PHP_include/server_processing.php",
"aoColumns": [
{ "sClass": "center", "bSortable": false },
{ "sName": "id", "sTitle" : "id",
"bVisible": true
},
{ "sName": "img", "sTitle" : "2D",
"bSortable": false, "bSearchable": false,
"sClass" : "image", "bVisible": true,
"fnRender":
function(obj) {
return '';
}
},
{ "sName": "sdf", "sTitle" : "3D", "sClass" : "jmol",
"bSearchable": false, "bVisible": true,
"fnRender":
function(obj) {
return '';
}
},
{ "sName": "name", "sTitle" : "name", "bVisible": true},
{ "sName": "formula", "sTitle" : "formula",
"bVisible": true, "bSortable" : false
},
{ "sName": "cas", "sTitle" : "cas",
"bVisible": true, "bSortable" : false
},
{ "sName": "mw", "sTitle" : "mw", "bVisible": true},
{ "sName": "atc", "sTitle" : "atc",
"bVisible": true, "bSortable": false,
"fnRender":
function(obj) {
data_arr = obj.aData[ obj.iDataColumn ];
if( data_arr != "null"){
data = "";
for (i in data_arr)
{
data = data+''+data_arr[i]+'
';
}
data_arr = data;
}
return data_arr;
},
"bUseRendered": false,
},
{ "sName": "iupac", "sTitle" : "iupac", "bVisible": true},
{ "sName": "c_max", "sTitle" : "cmax", "bVisible": true},
{ "sName": "nda", "sTitle" : "nda",
"bVisible": false, "bSortable": false
},
{ "sName": "ema", "sTitle" : "ema",
"bVisible": false, "bSortable": false
},
{ "sName": "targets", "sTitle" : "targets",
"bVisible": true, "bSortable" : false,
"fnRender":
function(obj) {
data_arr = obj.aData[ obj.iDataColumn ];
if( data_arr != "null"){
data = "";
for (i in data_arr)
{
data = data+''+data_arr[i]+'
';
}
data_arr = data;
}
return data_arr;
}

},
{ "sName": "go_bp", "sTitle" : "go_bp", "bVisible": false, "bSortable": false},
{ "sName": "go_mf", "sTitle" : "go_mf", "bVisible": false, "bSortable": false},
{ "sName": "go_cc", "sTitle" : "go_cc", "bVisible": false, "bSortable": false},
{ "sName": "iddb", "sTitle" : "Drugbank id(s)",
"bVisible": true, "bSortable": false,
"fnRender":
function(obj) {
data_arr = obj.aData[ obj.iDataColumn ];
if( data_arr != "null"){
data = "";
for (i in data_arr)
{
data = data+''+data_arr[i]+'
';
}
data_arr = data;
}
return data_arr;
}

},
{ "sName": "route", "sTitle" : "route", "bVisible": true},
{ "sName": "idttd", "sTitle" : "idttd", "bVisible": false},
{ "sName": "citation", "sTitle" : "citation", "bVisible": false}
]
} );

/* 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 = "..js/DataTables-1.9.1/examples/examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "..js/DataTables-1.9.1/examples/examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );

var tab=<?php echo htmlspecialchars(json_encode($_POST['idList']), ENT_NOQUOTES); ?>;
oTable.fnFilter(tab.join(","), 0, false);
} );
[/code]

I got error
[quote]DataTables warning (table id = 'example'): Requested unknown parameter '20' from the data source for row 0[/quote]

Please help me, or provide me some advices.
I know that the error is telling me that there is a problem with column number but how to fix it ?

jainankit0312

Hi,

Error states that you are not passing values for all the columns while adding the row. If you don't have the data for a particular column, pass a blank string.

Regards,
Ankit

Quentin

Hi Ankit,

i replaced
[code]{ "sClass": "center", "bSortable": false },[/code]

by
[code]
{
"mDataProp": null,
"sDefaultContent": '',
"bSortable": false,
"bSearchable": false
},
[/code]

Now the show/hide functionality is working. But the searching one fail (bad result) when i set "bSearchable" to false (since i don't want to search in this column), and sorting is doing nothing.

I suspect bad "connection" between header column and row column...

Is there something to add ?

jainankit0312

Hi Quentin ,

I am not sure what are you trying to do.

Setting "bSortable": false will not allow you to sort that column. If you want to sort set it to true.

Regards,
Ankit

Quentin

I don't want to sort that column.
But setting it to false is causing problems with other column sort.