Scroller Extension Not Working
Scroller Extension Not Working
rostrom
Posts: 2Questions: 2Answers: 0
I'm unable to get the Scroller Extension to work. Instead, the results are simply paginated without actually scrolling. It's as if Scroller is not being registered in datatables. Any ideas what I could be missing? The documentation seems straight forward, but its simply just not working.
I've created an isolated environment to test the functionality using the code provided in the snippets of the Client Side processing, to no avail (link here). I am on datatables version 1.10 and scroller version 1.3. Snippets below:
HTML: scroller_test.php
echo <<<HTML
<script src="resources/js/scroller_test/main.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.8/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/scroller/1.3.0/css/scroller.dataTables.min.css">
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>First name</th>
<th>Last name</th>
<th>ZIP / Post code</th>
<th>Country</th>
</tr>
</thead>
</table>
HTML;
js: resources/js/scroller_test/main.js
define(
[
'datatable_1_10'
],
function() {
var data = [];
for ( var i=0 ; i<50000 ; i++ ) {
data.push( [ i, i, i, i, i ] );
}
$('#example').DataTable({
data: data,
deferRender: true,
scrollY: 200,
scrollCollapse: true,
scroller: true
});
}
);
Note: "datatable_1_10" (in the define) is a loader which includes datatables and the extensions for responsive and scroller, all of which of being included properly and can be correctly seen in Chrome dev tools under Network and Source)