DeferRender does not work with more than 5000 + ajax lines for table / Scroller (dataTables)

My datatables table has an ajax / json data source, and I'm trying to implement a scroller / deferred rendering and it seems to be doing nothing. Download speed is exactly the same as before adding the scroller.

Heres my datatables init:

var dTable = $('#resultTable').dataTable({
    "oLanguage": { "sSearch": "Filter All Rows By:",
                    "sInfo": "Showing _START_ to _END_ of _TOTAL_ Hospitals",
                    "sProcessing":     "Please be patient while hospital data is retrieved...  <img style='margin-bottom:5px;' height='30px' width='30px' src='load/wheel.png'/>"
    },
     "columnDefs": [ {
            "searchable": false,
            "orderable": false,
            "targets": 0
     }
    ],
    "processing": true,
    "bDeferRender": true,
    "Dom": '<"clear">lfrtipTS',
    "order": [],
    "scrollY":        "600px",
    "scrollCollapse": true,
    "bLengthChange": false,
    "bPaginate": false,
    "sScrollX": "100%",
    "sScrollXInner": "100%",
    "ajax": {
            "url": "query/query_providerlist.php?recordnum=<?php echo $recordnum ?>&prvdrnum=<?php echo $num ?>&prvdrname=<?php echo $name ?>&cbsa=<?php echo $cbsa ?>&urbanrural=<?php echo $urbanrural ?>&ownertype=<?php echo $ownertype ?>&prvdrstrt=<?php echo $prvdrstrt ?>&prvdrcity=<?php echo $prvdrcity ?>&prvdrstate=<?php echo $state ?>&county=<?php echo $county ?>&prvdrzip=<?php echo $prvdrzip ?>",
            "dataType": "json"
        },
        "aoColumns": [
            {"data": null, "bSortable":false},
            {"data": "provider_num"},
            {"data": "provider_name",
             "mRender": function ( data, type, row ) {
             return '<a href="#provmodal" data-toggle="modal" class="push" id='+row.id+'>'+row.provider_name+'</a>'; 
             }
            },
            {"data": "state"},
            {"data": "city"},
            {"data": "street"},
            {"data": "county"},
            {"data": "zip", "sClass": "rightAlign"},
            {"data": "cbsa", "sClass": "rightAlign"}
        ],
    fnDrawCallback : function( oSettings ) {
       $(this).find('tbody tr').each(function(index) {
         $(this).find('td').first(0).text(index+1);
       });
     }
    });

Not sure what I'm doing wrong to initialize deferRender / Scroller, but I know that it does not work, because at the bottom of my table it says Displaying 1 to 5,684 of 5,684 entries, and I know that the scroller should make it say something like that displaying 1 to x(based on table height) of 5,684 entries.

Any advice would be great.

early

+4
source share

All Articles