I've been using "infinite scrolling" for my program that can potentially return large data sets of 30,000+ using server side processing. Works great, other than I'd like a little better performance. From what I understand the Scroller extra is supposed to be a superior replacement for infinite scrolling. Is that true? On the demo, it loads a server-side dataset of 10,000 items very quickly, but I don't know how much processing goes into that ajax file for the demo. Mine will be dynamically generated, so there may be some extra overhead. If there is a perfomance boost with Scroller, I'll continue to look into that option. In my attempts to try it, I've been having a little trouble getting the program to work properly. I think I've disabled all the infinite scrolling option, so as to not have conflicts. I'm a little unclear if there are any changes that need to be made to my server-side script as far as limiting with Scroller vs infinite scrolling. What do I need to change when converting infinite scrolling to Scroller? The following is my datatable initialization (sorry, I have a lot of plugins and things):
oTable = $('#claimTable').dataTable({
"fnDrawCallback": function ( oSettings ) {
applyEditableText($('.editable_text'));
applyEditableSelect($('.editable_select'));
applyEditableDate($('.editable_date'));
if($('input[name="claim_id[]"]').length > 0)
{
$('.select_all').removeAttr('disabled');
$('.deselect_all').removeAttr('disabled');
$('.export').removeAttr('disabled');
}
else
{
$('.select_all').attr('disabled', 'disabled');
$('.deselect_all').attr('disabled', 'disabled');
$('.export').attr('disabled', 'disabled');
}
get_checked_count();
$('input[name="claim_id[]"]').click(function(){
get_checked_count();
});
},
"fnInitComplete": function(){
var oSettings = this.fnSettings();
$('tfoot input:visible').each(function(){
var index = $("tfoot input").index(this);
$(this).val(oSettings.aoPreSearchCols[index].sSearch);
if(this.value == "")
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
});
new FixedColumns(oTable);
},
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "sSortDataType": "dom-text", "aTargets": [ '_all' ] }
],
"bProcessing": false,
"bStateSave": false,
"bServerSide": true,
"sAjaxSource": "/members/get_claim_data.php",
/*"fnServerData": fnDataTablesPipeline,*/
"oScroller": {
"loadingIndicator": true
},
"sDom": 'rT<"clear">itS',
"oTableTools": {
"sSwfPath": "js/swf/copy_cvs_xls.swf",
"aButtons":[
{
"sExtends": "text",
"sButtonText": "Select All",
"fnClick": function(nButton, oConfig, nRow){
$('.checkbox').prop('checked', true);
get_checked_count();
},
"fnInit": function(nButton){
$(nButton).addClass('select_all');
}
},
{
"sExtends": "text",
"sButtonText": "Unselect All",
"fnClick": function(nButton, oConfig, nRow){
$('.checkbox').prop('checked', false);
get_checked_count();
},
"fnInit": function(nButton){
$(nButton).addClass('deselect_all');
}
},
{
"sExtends": "download",
"sButtonText": "Export",
"sUrl": "/members/get_claim_data.php?type=csv"
},
{
"sExtends": "text",
"sButtonText": "Duplicate Selected",
"fnClick": function(nButton, oConfig, nRow){
$('input:checked').each(function(){
row_copy_num = $(this).parent().find('.row_num').html();
var qty = prompt("How many times to copy row #" + row_copy_num + "?", "1");
qty = Number(qty);
if(qty > 0)
window.open('/members/copy_claim_rows.php?claim=' + $(this).val() + '&qty=' + qty, '_blank', 'width=800,height=400,resizable=1');
});
},
"fnInit": function(nButton){
$(nButton).addClass('copy');
}
},
{
"sExtends": "text",
"sButtonText": "Process Selected",
"fnClick": function(nButton, oConfig, nRow){
var claim_ids = $('input[name="claim_id[]"]:checked').serialize();
var row_nums = $('input[name="claim_id[]"]:checked').parent().find('input[name="row_num[]"]').serialize();
$('#error_section').html('');
$.ajax({
type: 'POST',
url: '/members/claims2.php',
data: { claim_ids: claim_ids, row_nums: row_nums },
dataType: "json",
success: function(data){
$('#error_section').append('<div class="ui-corner-all" style="padding: 0 .7em;"></div');
if(!data)
{
$('#error_section div').addClass('ui-state-highlight');
$('#error_section div').append('<p>Information processed succesfully!</p>');
oCache.iCacheLower = -1;
oTable.fnReloadAjax();
}
else
{
$('#error_section div').addClass('ui-state-error');
jQuery.each(data, function(key, val){
$('#error_section div').append('<p><span class="ui-icon ui-icon-alert" style="float: left; margin-right: .3em;"></span><strong>Alert:</strong> ' + val + '</p>');
});
}
}
});
},
"fnInit": function(nButton){
$(nButton).addClass('process');
}
}
]
},
/*"bScrollInfinite": true,
"bScrollCollapse": true,*/
"sScrollY": $(window).height() - 145 + "px",
"sScrollX": "100%",
/*"bPaginate":true,
"aLengthMenu": [[50, 100, 200, 500, 1000], [50, 100, 200, 500, 1000]],*/
/*"iDisplayLength":50,*/
"bFilter":true
});