[SOLVED]Issue with row details
[SOLVED]Issue with row details
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 !
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 !
This discussion has been closed.
Replies
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.)
(don't know if it's helping)
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 !)