I'm trying to load data dynamically on scroll with DATATABLE plugin with jquery without pagination. I've a more than 3000 rows in my database and it take a long time to load so i want to load 200 rowsof these data when the user scroll the table at the end.
Here is my javascript code
<script src="{{asset('backend/js/demo/datatables-demo.js')}}"></script>
<script>
$('#user-dataTable').DataTable( {
"bInfo": false, //Dont display info e.g. "Showing 1 to 4 of 4 entries"
"paging": false,//Dont want paging
"bPaginate": false,//Dont want paging
} );
</script>
Think You !
You need to get new record on scroll event
$(function() {
var $mytable = $("#myTable");
var page = 10;
var count = 10; //initial number of rows
var max = 500; //max number of rows (just for demo)
var $datatable = $mytable.DataTable({
"paging": false,
"bFilter": false
}); //init the datatable and return a refence to it
//listen for scroll and resize and custom 'fetchmore' events
$(window).bind('scroll resize fetchmore', function() {
var viewportHeight = window.innerHeight;
var scrolltop = $(window).scrollTop();
var bottomOfTable = $mytable.offset().top + $mytable.outerHeight();
//console.log(viewportHeight, scrolltop, bottomOfTable);
if ($(window).scrollTop() + viewportHeight >= bottomOfTable) {
if (count < max) {
//console.log("Fetch more data!");
load_more();
$(window).trigger("fetchmore"); //keep triggering this event until we've filled the viewport
}
}
});
function load_more() {
//fetch more data here
for(var i = 0;i<= page;i++){
count++;
$datatable.row.add([
count + '.1',
count + '.2 (new loaded)'
]).draw(false);
}
}
//trigger initial fetch
$(window).trigger("fetchmore");
});<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
</head>
<body>
<table id="myTable" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1</td>
<td>1.2 (initial row)</td>
</tr>
<tr>
<td>2.1</td>
<td>2.2 (initial row)</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2 (initial row)</td>
</tr>
</tbody>
</table>
</body>