/* This sample does not work in jsfiddle because server data. */ document.addEventListener("DOMContentLoaded", function() { new FancyGrid({ title: 'Server Paging and Sorting', renderTo: 'container', width: 700, height: 400, data: { proxy: { url: '/ajax/paging.php', reader: { root: 'items' } } }, defaults: { type: 'string', width: 100, resizable: true, sortable: true }, paging: true, columns: [{ index: 'company', locked: true, title: 'Company' }, { index: 'name', title: 'Name' }, { index: 'surname', title: 'Sur Name' }, { index: 'age', width: 60, title: 'Age', type: 'number' }, { index: 'position', locked: true, ellipsis: true, title: 'Position', width: 150 }] }); });
<script src="https://cdn.fancygrid.com/fancy.min.js"></script> <div id="container"></div>