Virtual Scrolling and AJAX Issues
Virtual Scrolling and AJAX Issues
I am trying to implement Virtual Scrolling and after a long while, I got it to work where AJAX is invoked when scrolling down to get the next set of records. What I am not seeing is AJAX being invoked when I scroll up. It seems to me that all I am doing is slowly dumping all of the database content onto DT which would defeat the purpose as this will eventually overload the browser.
Below is my code. Please let me know what I am missing. Note that server_processing.php is a version similar to the one posted on this site.
[code]
oTable = $('#tblPeople').dataTable({
"iDisplayLength": 50,
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px",
"bPaginate": true,
"sAjaxSource": "server_processing.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
console.log('ajax');
aoData.push( { "name": "action", "value": "INIT",} );
$.getJSON( sSource, aoData, function (json) {
console.log('Ajax called');
fnCallback(json)
} );
},
"aoColumns": aoColumns,
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td:eq(' + NAME_COL + ')', nRow).attr('id', 'emp_' + aData.id);
$('td:eq(' + NAME_COL + ')', nRow).attr('image-exists-token', aData.image_exists);
$('td:eq(' + NAME_COL + ')', nRow).addClass('people-finder-name-link');
return nRow;
},
"bServerSide": true,
"sDom": 'rtiS',
"oScroller": {
"loadingIndicator": true
},
"bDeferRender": true
} );
[/code]
Below is my code. Please let me know what I am missing. Note that server_processing.php is a version similar to the one posted on this site.
[code]
oTable = $('#tblPeople').dataTable({
"iDisplayLength": 50,
"bScrollInfinite": true,
"bScrollCollapse": true,
"sScrollY": "200px",
"bPaginate": true,
"sAjaxSource": "server_processing.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
console.log('ajax');
aoData.push( { "name": "action", "value": "INIT",} );
$.getJSON( sSource, aoData, function (json) {
console.log('Ajax called');
fnCallback(json)
} );
},
"aoColumns": aoColumns,
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td:eq(' + NAME_COL + ')', nRow).attr('id', 'emp_' + aData.id);
$('td:eq(' + NAME_COL + ')', nRow).attr('image-exists-token', aData.image_exists);
$('td:eq(' + NAME_COL + ')', nRow).addClass('people-finder-name-link');
return nRow;
},
"bServerSide": true,
"sDom": 'rtiS',
"oScroller": {
"loadingIndicator": true
},
"bDeferRender": true
} );
[/code]
This discussion has been closed.
Replies
Thanks