Server Side Refresh
Server Side Refresh
housleyp
Posts: 5Questions: 0Answers: 0
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?
This discussion has been closed.
Replies
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!
[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]
[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