Bootstrap Pagination docs

bs_pagination is a jQuery pagination plugin, based on Twitter Bootstrap.

Code structure according to official jQuery plugin authoring guide.

Created for Bootstrap 3, but it is also compatible with Bootstrap 2 (bootstrap_version option)

Compatible with modern web browsers. Tested with: Google Chrome, Mozilla Firefox, Microsoft Internet Explorer >= 8, Android browser.

PROJECT HOME: https://labs.pontikis.net/bs_pagination

DEMO: https://labs.pontikis.net/bs_pagination/demo

DOCUMENTATION: https://labs.pontikis.net/bs_pagination/docs

SUPPORT FORUM: https://www.pontikis.net/bbs

SOURCE REPOSITORY: https://github.com/pontikis/bs_pagination

JQUERY PLUGIN REGISTRY: https://plugins.jquery.com/bs_pagination/

License MIT

Requires

Current Release 1.0.2 (09 May 2014) Download here.

CHANGELOG here.

Features

Created for Bootstrap 3 (Bootstrap 2 supported)
Responsive web design
Fully configurable
Pagination using text links
Go to page functionality (using input box)
Rows per page functionality (using input box)
Support of real URLs (SEO friendly)
Multiple instances in same page
Localization

How to use `bs_pagination`

Include bs_pagination css, js and localization file in head section of your page. See code examples.
Create a div in your page, where you want bs_pagination to render and give it an ID (e.g. mypagination )

In your javascript code, add

$("#mypagination").bs_pagination({
	// your options here - see below or code examples
})

Options

$("#element_id").bs_pagination({
	currentPage: 1,
	rowsPerPage: 10,
	maxRowsPerPage: 100,
	totalPages: 100,
	totalRows: 0,

	visiblePageLinks: 5,

	showGoToPage: true,
	showRowsPerPage: true,
	showRowsInfo: true,
	showRowsDefaultInfo: true,

	directURL: false, // or a function with current page as argument
	disableTextSelectionInNavPane: true, // disable text selection and double click

	bootstrap_version: "3",

	// bootstrap 3
	containerClass: "well",

	mainWrapperClass: "row",

	navListContainerClass: "col-xs-12 col-sm-12 col-md-6",
	navListWrapperClass: "",
	navListClass: "pagination pagination_custom",
	navListActiveItemClass: "active",

	navGoToPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space",
	navGoToPageIconClass: "glyphicon glyphicon-arrow-right",
	navGoToPageClass: "form-control small-input",

	navRowsPerPageContainerClass: "col-xs-6 col-sm-4 col-md-2 row-space",
	navRowsPerPageIconClass: "glyphicon glyphicon-th-list",
	navRowsPerPageClass: "form-control small-input",

	navInfoContainerClass: "col-xs-12 col-sm-4 col-md-2 row-space",
	navInfoClass: "",

	// element IDs
	nav_list_id_prefix: "nav_list_",
	nav_top_id_prefix: "top_",
	nav_prev_id_prefix: "prev_",
	nav_item_id_prefix: "nav_item_",
	nav_next_id_prefix: "next_",
	nav_last_id_prefix: "last_",

	nav_goto_page_id_prefix: "goto_page_",
	nav_rows_per_page_id_prefix: "rows_per_page_",
	nav_rows_info_id_prefix: "rows_info_",

	onChangePage: function() { // returns page_num and rows_per_page after a link has clicked
	},
	onLoad: function() { // returns page_num and rows_per_page on plugin load
	}
});

Methods

getVersion

var version = $("#element_id").bs_pagination('getVersion');

getDefaults

$("#element_id").bs_pagination('getDefaults');

getOption

$("#element_id").bs_pagination('getOption', 'option_name');

getAllOptions

$("#element_id").bs_pagination('getAllOptions');

destroy

$("#element_id").bs_pagination('destroy');

setRowsInfo

$("#element_id").bs_pagination('setRowsInfo', 'info_html');

Events

onChangePage

$("#element_id").bs_pagination({
	onChangePage: function(event, data) {
		// your code here e.g.
		console.log('Current page is: ' + currentPage.col + '. ' + rowsPerPage + ' are displayed per page.');
	}
});

data is an object with properties: currentPage and rowsPerPage.

onLoad

$("#element_id").bs_pagination({
	onLoad: function(event, data) {
		// your code here e.g.
		console.log('Current page is: ' + currentPage.col + '. ' + rowsPerPage + ' are displayed per page.');
	}
});