Expandable detail when iam click it will show detail but less one row

Expandable detail when iam click it will show detail but less one row

perlindoperlindo Posts: 1Questions: 0Answers: 0
edited December 2012 in General
when iam click open expandable it will show detail colomn but less one row...

[code]

/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';

sOut += ' ';
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";

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

$('#data_tbl_tools tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );

/*
* Initialse DataTables, with no sorting on the 'details' column
*/
$('#data_tbl_tools').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [[0, '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
*/
$('#data_tbl_tools tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* 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' );
}
} );
} );


[/code]

there may be two or id function with the following script

[code]
$(function() {
$('.data_tbl').dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": " _MENU_Entries per page:",
},
"sDom": '<"table_top"fl<"clear">>,<"table_content"t>,<"table_bottom"p<"clear">>'

});
$("div.table_top select").addClass('tbl_length');
$(".tbl_length").chosen({
disable_search_threshold: 4
});

});


$(document).ready( function() {

$('#data_tbl_tools').dataTable({

"sPaginationType": "full_numbers",


"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": " _MENU_Entries per page:",
},
"sDom": '<"table_top"fl<"clear">>,<"tbl_tools"CT<"clear">>,<"table_content"t>,<"table_bottom"p<"clear">>',

"oTableTools": {

"sSwfPath": "swf/copy_cvs_xls_pdf.swf",
"aButtons": [

"copy",
"print", {
"sExtends": "xls",
"sButtonText": "xls",
"sTitle": "Laporan Keuangan",

}, {
"sExtends": "csv",
"sButtonText": "csv ",
"sTitle": "Laporan Keuangan",

},
{
"sExtends": "pdf",
"sButtonText": "pdf ",
"sTitle": "Laporan Keuangan",
"sPdfOrientation": "landscape",
"mColumns": "visible"
},
{
"sExtends": "ajax",
"sButtonText": "Tambah DIPA ",
"fnClick": function ( nButton, oConfig, oFlash ) {
window.open('adddipa.php','mywindow','width=500,height=400,scroll=no');
}
},

{
"sExtends": "ajax",
"sButtonText": "Tambah SKOM ",
"fnClick": function ( nButton, oConfig, oFlash ) {
window.open('addskom.php','mywindow','width=500,height=470,scroll=no');
}
},
{
"sExtends": "ajax",
"sButtonText": "Tambah NPBM ",
"fnClick": function ( nButton, oConfig, oFlash ) {
window.open('addnpbm.php','mywindow','width=500,height=450,scroll=no');
}
}
,
{
"sExtends": "ajax",
"sButtonText": "Tambah SKOP ",
"fnClick": function ( nButton, oConfig, oFlash ) {
window.open('addskop.php','mywindow','width=500,height=500,scroll=no');
}
},
{
"sExtends": "ajax",
"sButtonText": "Tambah NPBP ",
"fnClick": function ( nButton, oConfig, oFlash ) {
window.open('addnpbp.php','mywindow','width=500,height=550,scroll=no');
}
}

]
}
} );
$("div.table_top select").addClass('tbl_length');
$(".tbl_length").chosen({
disable_search_threshold: 4
});

});



$(function() {
var oTable = $('#action_tbl').dataTable({

"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": " _MENU_Entries per page:",
},
"sDom": '<"table_top"fl<"clear">>,<"table_content"t>,<"table_bottom"p<"clear">>'

});
$("div.table_top select").addClass('tbl_length');
$(".tbl_length").chosen({
disable_search_threshold: 4
});

});

$(function() {

$('.data_editable').dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"oLanguage": {
"sLengthMenu": " _MENU_Entries per page:",
},
"sDom": '<"table_top"fl<"clear">>,<"table_content"t>,<"table_bottom"p<"clear">>'
/*
"fnDrawCallback": function () {
$('.data_editable tbody td').editable();
},*/

});
$("div.table_top select").addClass('tbl_length');
$(".tbl_length").chosen({
disable_search_threshold: 4
});
/* Apply the jEditable handlers to the table */
$('.data_editable td').editable( '../examples_support/editable_ajax.php', {
"callback": function( sValue, y ) {
var aPos = oTable.fnGetPosition( this );
oTable.fnUpdate( sValue, aPos[0], aPos[1] );
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
}
} );

});


$(function() {

$('.data_tbl_search').dataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bSort": false,
"bInfo": false,
"bAutoWidth": true,
"oLanguage": {
"sLengthMenu": " _MENU_Entries per page:",
},
"sDom": '<"table_top"fl<"clear">>,<"table_content"t>'

});



});


[/code]

this is the result screenshot http://img10.imageshack.us/img10/200/datatable.jpg

please help me... Thanks
This discussion has been closed.