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