fnOpenClose > fnFormatDetails load() external content into div
fnOpenClose > fnFormatDetails load() external content into div
Hi,
I´m having a datatable with detaildata that is shown via fnOpenClose.
I need a possibility to load external content as detaildata just on click demand from the database with an ajax function like load().
I tried with creating an div and loading into, but this is not working:
[code]
function fnFormatDetails (nTr) {
var iIndex=oTable.fnGetPosition( nTr );
var aData=oTable.fnSettings().aoData[iIndex]._aData;
var sOut = '';
$("#detail"+aData[1]).load("/detail.php?id="+aData[1]);
return sOut;
}
/* Event handler function */
function fnOpenClose (oSettings) {
$("td img.openclose", oTable.fnGetNodes()).each(function () {
$(this).click(function () {
var nTr=this.parentNode.parentNode;
if(this.src.match('details_close')) {
/* This row is already open - close it */
this.src="/img/tables/details_open.png";
this.title="details";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove=$(nTr).next()[0];
nRemove.parentNode.removeChild(nRemove);
}
else if(this.src.match('details_open')) {
/* Open this row */
this.src="/img/tables/details_close.png";
this.title="close details";
oTable.fnOpen(nTr,fnFormatDetails(nTr),'.');
}
});
});
[/code]
I tried to find info about this in the forum and I thought I read about sometime in the past. But I couldn´t find actually...
Is there any chance to load() external detail info with fnOpenClose?
Regards
achlan
I´m having a datatable with detaildata that is shown via fnOpenClose.
I need a possibility to load external content as detaildata just on click demand from the database with an ajax function like load().
I tried with creating an div and loading into, but this is not working:
[code]
function fnFormatDetails (nTr) {
var iIndex=oTable.fnGetPosition( nTr );
var aData=oTable.fnSettings().aoData[iIndex]._aData;
var sOut = '';
$("#detail"+aData[1]).load("/detail.php?id="+aData[1]);
return sOut;
}
/* Event handler function */
function fnOpenClose (oSettings) {
$("td img.openclose", oTable.fnGetNodes()).each(function () {
$(this).click(function () {
var nTr=this.parentNode.parentNode;
if(this.src.match('details_close')) {
/* This row is already open - close it */
this.src="/img/tables/details_open.png";
this.title="details";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove=$(nTr).next()[0];
nRemove.parentNode.removeChild(nRemove);
}
else if(this.src.match('details_open')) {
/* Open this row */
this.src="/img/tables/details_close.png";
this.title="close details";
oTable.fnOpen(nTr,fnFormatDetails(nTr),'.');
}
});
});
[/code]
I tried to find info about this in the forum and I thought I read about sometime in the past. But I couldn´t find actually...
Is there any chance to load() external detail info with fnOpenClose?
Regards
achlan
This discussion has been closed.
Replies
:(
[code]
function fnFormatDetails ( nTr )
{
var aData = Table_list_project.fnGetData( nTr );
var id_progetto=aData[1]; // table -> first column value
$.ajax({
type:"POST",
url: 'includes/__ajax_gear/_get_details_progetti.php',
cache: false,
data:'id_proj='+id_progetto,
success: function(msg)
{
Table_list_project.fnOpen( nTr, msg, 'details' );
}
});
return '';
}
[/code]
then OpenClose ....
[code]
/* Event handler function */
function fnOpenClose ( oSettings )
{
$('td img', Table_list_project.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_open') )
{
// This row is already open - close it
this.src = "images/icons/details_close.png";
// fnClose doesn't do anything for server-side processing - do it ourselves :-)
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else
{
// Open this row
this.src = "images/icons/details_open.png";
Table_list_project.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}
[/code]
... in dataTable settings
[code]
.
.
.
,
"fnDrawCallback": fnOpenClose,
.
.
.
[/code]
... remains a small problem :( during the closing table hangs a few pixels high that contains the function return value fnFormatDetails !
paky
great. it just works!
I use it like this:
[code]
function fnFormatDetails ( nTr ) {
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
$.ajax({
type: "POST",
url: "detail.php",
cache: false,
data:'w='+aData[1],
success: function(msg) {
oTable.fnOpen( nTr, msg, 'details' );
}
});
return "";
}
[/code]
I´m having no problems/bugs with this
thanks for your code!
Regards,
achlan.
achlan your table (of details) is grey border-color ?
Hi and thanks for suggestion to psjandhyala ;)
I don´t have a table in there. I´ll build an jqueryui accordeon to load different separate new data in this area on click.
I´m having absolutely no problems by closing the detail view. maybe you should try it for testing with a blank detail php page without css?
Now return blank value...
If I set :
[code]
function fnFormatDetails ( nTr ) {
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;
$.ajax({
type: "POST",
url: "detail.php",
cache: false,
data:'w='+aData[1],
success: function(msg) {
oTable.fnOpen( nTr, msg, 'details' );
}
});
return 'hello world';
}
[/code]
after close details remains open table a second with 'Hello world' inside !
The first works fine !!!!
when I open a detail view, the navigation paging shows only the same page number by clicking to another page. I can navigate to the next page, but the "active" number is still the same.
And when I jump to the first page, some random detail views are opened automatically. really strange...
Error: jQuery.fn.dataTableExt is undefined
in: ......./jquery/jquery.dataTables.js
row: 482
Something disturbes parts of the main functionality of datatables...
This Message is thrown by clicking the navigation