Paging

A simple pagination control for your table.

The paging component allows you to easily provide pagination for your table once you start dealing with a large number of rows. This provides a better user experience by not only limiting the number of rows visually displayed but by also providing a significant performance increase by limiting the number of rows that need to be drawn when the plugin initializes, a breakpoint changes, or the window resizes.

Note

See the Getting started - Examples section for examples of this component.

 Options

The below lists all the options for the paging component, these are available in addition to the core options.

General options

 

enabled boolean

Whether or not the component is enabled.

false

By default this component is disabled, no UI or features of this component will be available.

To supply this option through data attributes you must specify the attribute on the table element.

<table data-paging="true">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"paging": {
			"enabled": true
		}
	});
});
 

countFormat string

The string used as a format to generate the count text.

"{CP} of {TP}"

The default format uses the current page and total pages placeholders which are substituted at run time for the actual values. The below lists all available placeholders that you can use when supplying your own format.

  • {CP} - The current page.
  • {TP} - The total number of pages available.
  • {PF} - The first row number of the current page.
  • {PL} - The last row number of the current page.
  • {TR} - The total number of rows available.

To supply this option through data attributes you must specify the attribute on the table element.

<table class="table" data-paging-count-format="{CP} of {TP}">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"paging": {
			"countFormat": "{CP} of {TP}"
		}
	});
});
 

current number

The page number to display when first initialized.

1

By default the current page is the first page.

To supply this option through data attributes you must specify the attribute on the table element.

<table class="table" data-paging-current="3">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"paging": {
			"current": 3
		}
	});
});
 

limit number

The maximum number of page links to display in the pagination control.

This is used to stop the pagination control possibly overflowing with hundreds of page links depending on the number of rows and the page size. It is used to provide consistent number of links regardless of how many pages there might be. Once the total number of pages exceeds this limit additional buttons to navigate the page links will be displayed.

5

To supply this option through data attributes you must specify the attribute on the table element.

<table class="table" data-paging-limit="3">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"paging": {
			"limit": 3
		}
	});
});
 

position string

The position of the pagination control within the paging row.

"center"

The other supported values for this option are "left" and "right"

To supply this option through data attributes you must specify the attribute on the table element.

<table class="table" data-paging-position="right">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"paging": {
			"position": "right"
		}
	});
});
 

size number

The number of rows per page.

10

To supply this option through data attributes you must specify the attribute on the table element.

<table class="table" data-paging-size="20">
	...
</table>

The below shows how to supply the value directly through the options.

jQuery(function($){
	$('.table').footable({
		"paging": {
			"size": 20
		}
	});
});