DataTables Scroller odd result
This appears to show a weird interaction between Scroller, serverSide, and scrollCollapse. On the initial draw only 9 lines are displayed. Scrolling down 50 lines resolves the problem.
HTML
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/scroller/1.3.0/css/scroller.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.9/js/dataTables.bootstrap.js"></script>
<script src="//cdn.datatables.net/scroller/1.3.0/js/dataTables.scroller.min.js"></script>
<table class="table table-striped table-bordered table-condensed" id="shipment">
<thead>
<tr>
<th>Date</th>
<th>Status</th>
<th>Carrier</th>
<th>Reference</th>
<th>Notes</th>
</tr>
</thead>
</table>
JavaScript
$(document).ready(function() {
$('#shipment').dataTable({
lengthChange:false,
paging:true,
serverSide:true,
scrollCollapse:true,
scroller:true,
scrollY:400,
ajax: function (data, callback, settings) {
var out = [];
for (var i=data.start, ien=data.start + data.length; i < ien ; i++) {
out.push([ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5']);
}
setTimeout(function () {
callback({draw: data.draw, data: out, recordsTotal: 5000000, recordsFiltered: 5000000});
}, 50);
}
});
});