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.
bs_pagination
bs_pagination
css, js and localization file in
head
section of your page.
See
code
examples.
div
in your page, where you want bs_pagination
to render and give it an ID (e.g. mypagination )
$("#mypagination").bs_pagination({ // your options here - see below or code examples })
$("#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 } });
var version = $("#element_id").bs_pagination('getVersion');
$("#element_id").bs_pagination('getDefaults');
$("#element_id").bs_pagination('getOption', 'option_name');
$("#element_id").bs_pagination('getAllOptions');
$("#element_id").bs_pagination('destroy');
$("#element_id").bs_pagination('setRowsInfo', 'info_html');
$("#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
.
$("#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
.