Tabulator Table Scrolling Load
Ajax request on scroll.
HTML
<link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
<body>
<h1>Table</h1>
<div id="example-table"></div>
</body>
CSS
div {
max-height: 200px;
}
JavaScript
var table = new Tabulator("#example-table", {
placeholder: null,
ajaxURL: 'https://jsonplaceholder.typicode.com/photos',
ajaxContentType: "json",
progressiveLoad: "scroll",
layout: "fitColumns",
columns: [{
title: "Id",
field: "id",
width: 150
},
{
title: "Album",
field: "albumId",
width: 150
},
{
title: "Title",
field: "title",
width: 150
},
],
initialSort: [{
column: "id",
dir: "asc"
}],
// Hack response to look like pagination response
ajaxResponse: (url, params, response) => {
let modResponse = {};
modResponse.data = response;
modResponse.last_page = 5;
return modResponse;
},
// Hack request to use albumId instead of page
ajaxURLGenerator: (url, config, params) => {
return url + "?albumId=" + params.page;
},
})