Server Side Refresh

housleyp

So I looked through the forums and website to find methods of refreshing the server data in my table while still taking into account the current filtering and sorting. I found that fnDraw does exactly what I need. It works greet but has a drawback. While watching the HTTP traffic, I noticed each time I refreshed my table, it would increment the number of requests sent to the server. So the first refresh would send one request...the second refresh would send two simultaneous requests...on and on. This can become an issue when working with very large tables. Anyone know why the fnDraw function is incrementing the number of requests being sent?

GregP

housleyp,

It sounds like the way your are binding your event is causing it to stack. This is a common issue when delegating a listener via jQuery's .click() event, for example.

Assuming you refresh is being done by a button click or another event, you have to make sure that when the new data is returned, you are not binding the event again.

Seeing some sample code would be most helpful! In general, though, if you use .delegate() or .on() (.on() is available in jQuery 1.7+ and consolidates .live(), .delegate() and .bind()) and delegate listening to an element that is not destroyed and returned, you can make sure that you only bind the event once.

---

I realize that's kinda confusing if you're not familiar with binding events, so don't hesitate to ask for clarification or examples. In the meantime, providing a sample of the code that triggers the refresh would be great!

housleyp

Please see the below code for my table. Could you assist with changing the code so it works. Maybe I should read up on .on() and move my event delegations to that function.

[code]
$('#hclogs_table').dataTable({
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
'bStateSave': true,
'sAjaxSource': '?m=t&p=hclogs&type=list_data',
'sDom': '<\'H\'<\'refresh_area\'>f>rt<\'F\'lip><\'clear\'>',
'sPaginationType': 'two_button',
'iDisplayLength': 20,
'aLengthMenu': [[20, 40, 60, 80, 100], [20, 40, 60, 80, 100]],
'aoColumnDefs': [
{ 'bSortable': true, 'aTargets': [0,1,2] },
{ 'sWidth': '135px', 'aTargets': [0,1] }
],
'aaSorting': [[0, 'desc']],
'fnServerData': function(sSource, aoData, fnCallback) {
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
})
},
'fnHeaderCallback': function(nHead, aaData, iStart, iEnd, aiDisplay) {
// Setup refresh area for table \\
$('.refresh_area').addClass('ui-corner-all float_left ui-button')
.html('')
.bind('mouseover', function() {
$(this).addClass('ui-state-hover')
.bind('mouseout', function() {
$(this).removeClass('ui-state-hover')
.unbind('mouseout');
});
})
.bind('click', function() {
$('#hclogs_table').dataTable().fnDraw();
});
},
'oLanguage': { 'sSearch': 'Search all columns:' }
}).columnFilter({
aoColumns: [
{ type: 'date' },
{ type: 'select', values: [ 'status', 'error' ] },
{ type: 'text' }
]
});
[/code]

allan

Remove

[code]
            .bind('click', function() {
                $('#hclogs_table').dataTable().fnDraw();
            });
[/code]

from the header callback. As Greg says it is being added on every draw - hence the problem.

Allan

housleyp

Ahhh.....that fixed it. It did not immediately register that the header callback is ran every redraw.