Unbind Datatables Scroller on a Table that is less than 1 data set
Unbind Datatables Scroller on a Table that is less than 1 data set
Hi,
I'm using datatables in a project that involves massive json data sets. We are using the Scroller functionality by specifying our object as follows below. However, some of the datasets that we get back are small; smaller that a single set of data. Since we're specifying only 500px for scrolling, we get a data set each time of about 80 records.
In situations where the dataset is smaller than 80, we're getting a weird problem where dataTables will try to do another ajax call when the user scrolls to the bottom of the table. This refreshes the data and pops the user back to the top of the scroll, which is bad.
How can I unbind the scroller listener if the datasize is smaller? Can I completely unbind datatables?
Also, we're seeing very visible and disorienting document redrawing when datatables loads the new dataset to append/prepend. The prepend always seems very small, and scrolling up causes an almost immediate ajax call and redraw. Scrolling down is ok, but when a call is made, vertical positioning of the table elements changes and everything is redrawn and it's hard to see where you were in the dataset before the new call was made.
Any help would be appreciated. Unfortunately, as this project is private, I cannot link to a live example.
var treeJson = new Object();
var dataTable = $('table#familyTree').dataTable({
"sScrollY": "500px",
"bPaginate": true,
"sDom": "rtiS",
"oLanguage" : {"sInfo" : ""},
"bLengthChange": false,
"bDeferRender": true,
"aaSorting": sortArray,
"bProcessing": true,
"bFilter": false,
"bServerSide": true,
"iScrollLoadGap": 200,
"bScrollCollapse": true,
"sAjaxSource":'familyTreeData.html?companyId='+familyTree.id,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource+'&view='+familyTree.viewId+'&'+$('form#refinement').serialize(),
"data": aoData,
"success": function(data){
familyTree.treeSize = data["iTotalRecords"];
$('#familyTreeSize').html(data["iTotalRecords"]);
if(data.refinement) {
for(var i in data.refinement) {
$('#'+i).html(data.refinement[i]);
}
}
fnCallback(data);
if(familyTree.treeSize < 102){
}
},
error: function(xhr,error){
familyTree.handleError(error,1);
}
} );
}
I'm using datatables in a project that involves massive json data sets. We are using the Scroller functionality by specifying our object as follows below. However, some of the datasets that we get back are small; smaller that a single set of data. Since we're specifying only 500px for scrolling, we get a data set each time of about 80 records.
In situations where the dataset is smaller than 80, we're getting a weird problem where dataTables will try to do another ajax call when the user scrolls to the bottom of the table. This refreshes the data and pops the user back to the top of the scroll, which is bad.
How can I unbind the scroller listener if the datasize is smaller? Can I completely unbind datatables?
Also, we're seeing very visible and disorienting document redrawing when datatables loads the new dataset to append/prepend. The prepend always seems very small, and scrolling up causes an almost immediate ajax call and redraw. Scrolling down is ok, but when a call is made, vertical positioning of the table elements changes and everything is redrawn and it's hard to see where you were in the dataset before the new call was made.
Any help would be appreciated. Unfortunately, as this project is private, I cannot link to a live example.
var treeJson = new Object();
var dataTable = $('table#familyTree').dataTable({
"sScrollY": "500px",
"bPaginate": true,
"sDom": "rtiS",
"oLanguage" : {"sInfo" : ""},
"bLengthChange": false,
"bDeferRender": true,
"aaSorting": sortArray,
"bProcessing": true,
"bFilter": false,
"bServerSide": true,
"iScrollLoadGap": 200,
"bScrollCollapse": true,
"sAjaxSource":'familyTreeData.html?companyId='+familyTree.id,
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource+'&view='+familyTree.viewId+'&'+$('form#refinement').serialize(),
"data": aoData,
"success": function(data){
familyTree.treeSize = data["iTotalRecords"];
$('#familyTreeSize').html(data["iTotalRecords"]);
if(data.refinement) {
for(var i in data.refinement) {
$('#'+i).html(data.refinement[i]);
}
}
fnCallback(data);
if(familyTree.treeSize < 102){
}
},
error: function(xhr,error){
familyTree.handleError(error,1);
}
} );
}
This discussion has been closed.
Replies