When should i bind the my own event into datatable?

cezs

Hi Allan,

Had to say datatable was superb plugin. Nice work!
I start working on ajax and javascript recently, so question i am asking might dump...please forgive me on that.

I use datatable to display some grid data from DB. I am using server side data by ajax call. The datatable will auto reload for every 10 second. I am using setInterval and fnDraw(false) to do that. I set the parameter for fnDraw to false is becoz i wan to remain the sort, filter and paging after the datatable auto reload. And currently i bind all my event at fnHeaderCallback - for header hover, highlight; fnRowCallback - for row highlight, selected, hover; fnFooterCallback - for table column filter and fnInitComplete - for global filter(drop down list outside datatable to filter data inside datatable)

My problem is before i add in auto reload the datatable looks nice on all the function and event i added. After auto reload added, the memory increase dramatically for 2mb per refresh. Digging at google only knows that memory leaks at my function.

I wonder at i binding the event at the right place as i mention above? Well the datatable re-binding all the custom event i did for each and every draw in auto reload?

thx,

cezs

allan

Hi cezs,

I would suggest using live events (as shown here http://datatables.net/release-datatables/examples/advanced_init/events_live.html ) rather than static events since you are likely to run into memory issues (unless you unbind your events of course). This way isn't a single initialisation and should be much cleaner.

Allan

cezs

Hi Allan,

Thanks for the tips previously. It help with live to attach the event i want. The datatable work fine. Memory remain at 70k++ kb everything it reload.

But my client doesn't want to see the data with pagination. They want the data to be loaded when they view the page. I set the iDisplayLength to -1 to display all the data in DB at once and I am using server-side processing. All the sorting and paging (previously) was done at back end server side. Now with 1000 record the table take about 15 second to display ( I am not sure whether is browser render or javascript populating.) I just see the processing box at the header forever.

I am having an auto reload function for interval of every 15 second (using fnDraw(false) function). User unable to interact with the datatable because datatable block all click and scrolling while datatable reload. It seems like the datatable keep on processing and nothing can be done at user.

The data might increase in future. My problem now is how to make the process faster?
I am using datatable 1.7.6 adn jQuery 1.5.1

I don't have a link to my page but some code snap below:

[code]
var Table = {
arrData: null,
timer: null,
objTable: null,
exists: false,

fnTableInit:function () {
this.objTable = jQuery('#example').dataTable({
"bFilter": true,
"sDom": 'T<"clear spacer"><"H"lr>t<"F"ip><"clear spacer">T',
"bProcessing": true,
"aaSorting": [],
"bJQueryUI": true,
"sScrollY": 450,
"aoColumns": [
{ "sName": "FieldA", "sClass": "center", "sWidth": "80px" },
{ "sName": "FieldB", "sClass": "center", "sWidth": "90px" },
{ "sName": "FieldC", "sClass": "center", "sWidth": "130px" },
{ "sName": "FieldD", "sClass": "center", "sWidth": "130px" },
{ "sName": "FieldE", "sClass": "center", "sWidth": "70px" },
{ "sName": "FieldF", "sClass": "center", "sWidth": "135px" },
{ "sName": "FieldG", "bVisible": false, "bSortable": false, "sWidth": "0px" },
{ "sName": "FieldH", "sClass": "right", "sWidth": "115px" },
{ "sName": "FieldI", "sClass": "right", "sWidth": "115px" },
{ "sName": "FieldJ", "sClass": "center", "sWidth": "90px" },
{ "sName": "FieldK", "sClass": "center", "sWidth": "295px" },
{ "sName": "FieldL", "sClass": "center", "sWidth": "80px" }
],
"bAutoWidth": false,
"bScrollCollapse": true,
"iDisplayLength": -1,
"iDisplayStart": 0,
// "iDisplayEnd": 25,
"aLengthMenu": [[-1], ['All']],
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "getDataTable.aspx",
"fnServerData": Table.fnDETableDataBind(["FieldA", "FieldB", "FieldC", "FieldD", "FieldE", "FieldF", "FieldG", "FieldH", "FieldI", "FieldJ", "FieldK", "FieldL"]),
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
jQuery(nRow).addClass(aData[14]);

if (Table.arrData != null && Table.arrData.length > 0){
if (Table.arrData[Table.arrData.length-1] == aData[aData.length-1]){
jQuery(nRow).addClass('ui-state-active');
Table.exists = true;
}
}

return nRow;
},
"fnDrawCallback": function () {
Button.fnFuncButtonDisableEvent();
Button.fnProcessButtonDisableEvent();
if (DDLBusDate.busdate == GetActiveBusDate.busdate){
if (!Table.exists){
BtnA.fnEnable();
BtnB.fnEnable();
} else {
Button.fnButtonEnableEvent();
BtnA.fnEnable();
BtnB.fnEnable();
}
}
},
"fnInitComplete": function () {
Table.fnHeaderEvent();
Table.fnRowEvent();
Table.fnFooterEvent();
Table.fnBusDateFilter();
Table.arrData = '';
}
});


},

fnRowEvent:function () {
//add event for click, highlist and mouseover
},

fnBusDateFilter:function(){
//drop down filter for busines date
},

fnFooterEvent:function () {
var objTFoot = jQuery('tfoot input');

objTFoot.each( function () {
objTFoot.unbind('keyup');
objTFoot.bind('keyup', function (e) {
objTable.fnFilter( this.value, objTFoot.index(this) );
});
} );


objTFoot.focus( function () {
if (this.value == this.title){
this.className = "";
this.value = "";
}
} );

objTFoot.blur( function () {
if ( this.value == "" )
{
this.className = "search_init";
this.value = this.title;
}
} );
},

fnHeaderEvent:function () {
//header event for click, mouseover and highlight
},

fnAutoReload:function (clearTimer) {
if (clearTimer){
clearTimeout(Table.timer);
}
Table.timer = setTimeout( function(){
Table.objTable.fnDraw(false);
Table.fnAutoReload(true);
}, 15000);
},

fnStopReload:function () {
clearTimeout(Table.timer);
},

fnDETableDataBind:function( aElements )
{
return function ( sSource, aoData, fnCallback ) {
Table.exists = false;
aoData.push ( { "name": "businessdata", "value": (DDLBusDate.busdate == null) ? "" : DDLBusDate.busdate } );

jQuery.ajax( {
"dataType": "json",
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json) {
var a = [], formatData, inner;

for ( var i=0, iLen=json.aaData.length ; i