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/

Copyright © Christos Pontikis https://www.pontikis.net

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

  1. Include bs_pagination css, js and localization file in head section of your page. See code examples.
  2. Create a div in your page, where you want bs_pagination to render and give it an ID (e.g. mypagination )
  3. 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.');
	}
});

data is an object with properties: currentPage and rowsPerPage.