Function in fnDrawCallback firing two, three and even four time after filtering and pagination

Doywan

Hi, i'm playing around with Datatables, and so far so good. For a specific project i've to open an area fill with info outside the table. Here what i've done. (i'm french, sorry for my english)

If you click on a tr, tr get a style and the info div is open. Then if you click on the same tr, info div closed and tr is strip of style or if you click on another tr, info div closed, previous tr is strip of style, current tr get style and info div is reopen. And of course, if the table is redraw, all tr are strip of my styles and the info div is closed. Here the light versions of the JS and the fiddle (in this version the info div is empty with just a background color). http://jsfiddle.net/25rrV/3/

[code]$('table').unbind('keypress').dataTable({
"sPaginationType": "full_numbers",
"fnDrawCallback": function () {

if ($('#fiche-wrap').width() > 0) {
$('#fiche-wrap').animate({
width: '0px'
}, 200);
$('#fiche-wrap').html('');
$('.clicked').removeClass('clicked');
$('.blurry').removeClass('blurry');
}

var setH = $('#cumulex').height();
$('#fiche-wrap').height(setH - 10);
$('#fiche').height(setH - 20);

$('tbody tr').click(function () {
$('#fiche-wrap').animate({
width: '0px'
}, 200);
if ($(this).hasClass('clicked')) {
$('.clicked').removeClass('clicked');
$('.blurry').removeClass('blurry');
} else {
$('.clicked').removeClass('clicked');
$('.blurry').removeClass('blurry');
$('#fiche-wrap').animate({
width: '310px'
}, 200);
$('tbody tr').addClass('blurry');
$(this).removeClass('blurry');
$(this).addClass('clicked');
$(this).find('td').addClass('clicked');
}
});
}
});[/code]

This work fine on init, but the problems begin when you filter something (either with the select display or the search input) or change page. In this cases my onclick function contain in fnDrawCallback is fired two to four time, messing the purpose of it. If the function is run two time, first the tr i click on get styles, the info div open, but on the second run tr is strip of styles and the info div is closed. Why such a behaviour ? I don't understand.

I've tested fnSetFilteringDelay, it solve the problem if i enter a search, but if i delete my search, here we go again... Then i've test mRender, setTimeout, condition to firing the click function... Nothing work, i'm going to have a nervous breack down, i don't understand why it get fired multiple time. Someone, please help ?

Doywan

Ok, a pause was the solution... Don't overthink it, the response was simple, use the Api : http://datatables.net/faqs#events . With a post-initialisation all work fine. If someone need it, that how i solve this :

[code]
var oTable = $('table').unbind('keypress').dataTable({
"sPaginationType": "full_numbers",
"fnDrawCallback": function () {

if ($('#fiche-wrap').width() > 0) {
$('#fiche-wrap').animate({
width: '0px'
}, 200);
$('#fiche-wrap').html('');
$('.clicked').removeClass('clicked');
$('.blurry').removeClass('blurry');
}

var setH = $('#cumulex').height();
$('#fiche-wrap').height(setH - 10);
$('#fiche').height(setH - 20);
}
});

oTable.$('tr').click( function () {

$('#fiche-wrap').animate({
width: '0px'
}, 200);
if ($(this).hasClass('clicked')) {
$('.clicked').removeClass('clicked');
$('.blurry').removeClass('blurry');
} else {
$('.clicked').removeClass('clicked');
$('.blurry').removeClass('blurry');
$('#fiche-wrap').animate({
width: '310px'
}, 200);
$('tbody tr').addClass('blurry');
$(this).removeClass('blurry');
$(this).addClass('clicked');
$(this).find('td').addClass('clicked');
}
});
[/code]