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

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;