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
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
[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.