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); });