How to expand all rows when the page onload?

oceanblue

I successfully implemented the show/hide rows datatable which is the same example as "DataTables server-side processing example with hidden row information". However, the example only shows when user clicks then all of the hidden rows get expanded. When page gets loaded the first time, all of the hidden rows collapsed.

Can someone give me an example if I want all of the hidden rows get expanded when the page gets loaded? I would like to have an expanded rows when the page gets loaded.

Thanks for any feedback!

skyetech

I've been searching for this too. Our users want to print a page without needing to open each row to show the 'notes' or 'comments' fields.

allan

You'd just need to call fnOpen on all TR elements. You could do something like:

[code]
oTable.$('tr').each( function () {
oTable.fnOpen( this, content, class );
} );
[/code]

Allan

skyetech

I haven't figured out where to put this in my code.
[code]var oTable;
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Your Comments:'+aData[1]+'';
sOut += '';

return sOut;
}

$(document).ready(function() {
var rmaid = $.url().param('rmaid');

if(rmaid != null) {
setupTable();
getReport($(this).data("object"));
oTable.fnDraw();
}

function setupTable() {
if (oTable != null) {
$('#mydt').empty();
oTable.fnDestroy();
}
}

/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' );
var nCloneTd = document.createElement( 'td' );
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

/* $('#mydt thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
*/
$('#mydt tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

function getReport(objDef) {
var settings = {
"bJQueryUI": true,
"bAutoWidth": false,
"iDisplayLength": 50,
"sPaginationType": "full_numbers",
"sDom": '<"H"T<"clear">iplfr>t<"F"ip>',
"aLengthMenu": [[10, 20, 30, 50, -1], [10, 20, 30, 50, "All"]],
"sSearch": '',
"oLanguage": {
"sLengthMenu": "Page length: _MENU_",
"sSearch": "Filter:",
},
"bProcessing": true,
"aaSorting": [[ 1, "asc" ]],
"sAjaxSource": 'ajax/account-rma-items.asp',
"fnServerData": function ( sSource, aoData, fnCallback ) {
/* Add some extra data to the sender */
aoData.push( { "name": "rmaid", "value": rmaid } );
$.getJSON( sSource, aoData, function (json) {
fnCallback(json);
} );
},
"aoColumnDefs": [
{ "aTargets": [0], "bVisible": true, "bSearchable": false, "bSortable": false, "fnRender": image_link},
{ "aTargets": [1], "bSearchable": true, "bSortable": true},
{ "aTargets": [2], "bSearchable": true, "bSortable": true},
{ "aTargets": [3], "bSearchable": true, "bSortable": true},
{ "aTargets": [4], "bSearchable": true, "bSortable": true},
{ "aTargets": [5], "bSearchable": true, "bSortable": true},
{ "aTargets": [6], "bSearchable": true, "bSortable": true},
{ "aTargets": [7], "bSearchable": true, "bSortable": false},
{ "aTargets": [8], "bSearchable": true, "bSortable": true}
],
"oTableTools": {
"sSwfPath": "/css/dtimages/swf/copy_cvs_xls_pdf.swf",
"aButtons": [
"copy",
"print",
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
}
]
}
}
oTable = $("#mydt").dataTable(settings);


}

function image_link(oObj) {
return "";
}

/* 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
*/
$('#mydt 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 = "images/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "images/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );



} );





Serial #
Manufacturer
Model
Problem
Network/App
Settings
Under
Contract
Included
Send Replacement
















[/code]

allan

After the table has been initialised! Its actually probably easier for you to run through all TR nodes and activate the 'click' function on them, since that will then change the icon state for you as well.

Allan

skyetech

I'm too stupid to figure this out. Need a little more hand holding please.

mmcw

Allan:


"After the table has been initialised! Its actually probably easier for you to run through all TR nodes and activate the 'click' function on them, since that will then change the icon state for you as well.

Allan"

How to do that?

Michel