Paging the rows
You can limit the number of visible rows with the
max method. If the table contains more rows, a Pager will be created. An
equivalent method size also fixes the height of the Table so that the pager
(footer) never jump up and down.
-
$.getJSON('assets/rowdata.json', function(json) { ts.ui.get('#example9', table => { table.cols([ { label: 'ID', type: 'ts-number' }, { label: 'Name', flex: 2 }, { label: 'Price', type: 'ts-number'} ]); table.rows(json).max(5); }); });
You can track the page with the onpage method, if for some reason you need
that.
table.onpage = function(index) {
console.log(index); // called whenever the user changes page
};
You can set the max and total method to show pager status in the
footer.
-
$.getJSON('assets/rowdata.json', function(json) { ts.ui.get('#example10', table => { table.cols([ { label: 'ID', type: 'ts-number' }, { label: 'Name', flex: 2 }, { label: 'Price', type: 'ts-number'} ]); table.rows(json).max(5).total(json.length); }); });
If you would like to manage paging yourself, because you have a billion products and don't want to fetch them all at once, you can create your own pager.
-
var popup = ts.ui.Notification; ts.ui.get('#big-data-table', table => { table.max(10).cols([ { label: 'ID', type: 'ts-number' }, { label: 'Name', flex: 2 }, { label: 'Price', type: 'ts-number'} ]); table.pager({ pages: 5, page: 0, onselect: loadpage }); function loadpage(index) { var url = 'assets/page-' + index + '.json'; $.getJSON(url, function(json) { var n = json.length; popup.success('Loaded ' + n + ' rows'); table.rows(json); }); } loadpage(0); });
If you need to update the index later on, for example to support history navigation, it is
recommended that you change the
page property of the existing Pager instead of initializing a whole new
Pager. You can just call the same method without arguments.
mytable.pager().page = 23;
If you would like to manage paging by yourself and show page status, you need to set
total and number, which are the total of items in the table and
the number of items of a page.
-
var popup = ts.ui.Notification; ts.ui.get('#page-status-table', table => { table.max(10).cols([ { label: 'ID', type: 'ts-number' }, { label: 'Name', flex: 2 }, { label: 'Price', type: 'ts-number'} ]); table.pager({ pages: 5, page: 0, number: 10, total: 50, onselect: loadpage }); function loadpage(index) { var url = 'assets/page-' + index + '.json'; $.getJSON(url, function(json) { var n = json.length; popup.success('Loaded ' + n + ' rows'); table.rows(json); }); } loadpage(0); });