[SOLVED]Issue with row details

reno

First, the debug of my Datatables ==> http://debug.datatables.net/ibawux

Second, the example of what i try to do ==> https://datatables.net/release-datatables/examples/server_side/row_details.html

Third, my code:

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

/* 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
*/
$('#vehicule tbody td img').on('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' );
var aData = oTable.fnGetData( nTr );
det_vehicules(aData[6]);
}
} );

==> I've added the call of function det_vehicule() for injecting data into my div(#cont_detailsX).
I've do it this way coz details are complexes and big amount of data, like information about vehicule(level of gaz, oil, ... + model + mecanic + ...), history of location, history of dammages, ... And adding all of this into hidden column was not the more convenient way to do it.

Now my issue:

I get an issue with details row, this ting work very well for the record who are showed on the page at loading.
In practice i can only show details for 10 first row (if show 10 is set) or 25 first row (if show 25 is set), ...

If i go next/previous page, details are not loaded for record on next/previous page.

If show 10 record is set, then i set it to 25, 10first record will have details, and others will not.

Someone can help me?

Thx in advance, have a great day all !

allan

Sounds and looks like the top FAQ: http://datatables.net/faqs#events .

Allan

reno

Thanks for our answer allan.

But can u provide me a bit more support?

I read the section into faq and links over pre-initialisation (i already use .on event, .click was deprecated).
But still confuse, what modifications should i do to my code to make it work?
I try to adapt code given on this ==> http://datatables.net/examples/advanced_init/events_pre_init.html

But apparently, i don't know how to do it...

my datatables are init like that:


/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
nocache = Math.random();
var aData = oTable.fnGetData( nTr );
var 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";

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

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



/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#vehicule').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] }
],
"aaSorting": [],
"iDisplayLength": 25,
"aoColumns": [
/* DETAILS */ null,
/* MARQUE */ null,
/* MODELE */ null,
/* PLAQUE */ null,
/* CARBURANT */ null,
/* REMARQUES */ null,
/* ID_VEHICULE */ { "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
*/
$('#vehicule tbody td img').on('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' );
var aData = oTable.fnGetData( nTr );
det_vehicules(aData[6]);
}
} );
} );


Anyway thanks a lot for ur answer, i'll continue to dig into this way. But if u can help me a little further, i don't say no :).

(and sorry for my english, but it's not my firstlanguage.)

reno

I try your bookmarklet "Visual Event", and no event on the row who aren't show at the loading of page.

(don't know if it's helping)

reno

Should i obligatory use server-side processing to make it work?

reno

Ok i made it work ! (With client-side processing !)

For the ones who need the trick i just move the event listener before init my Datatables and now all works fine !

Great day to all ! (and again, thx allan, u put me on the good way, and ur bookmarklet was quite usefull !)