Pagination layouts Basic pagination layout examples
Pagination options Pagination sizes and positions
Pager component Simple pager component
Pager options Pager sizes and positions
Default pager sizes
Large, default and small sizes
Rounded pager sizes
Large, default and small sizes
Linked pager sizes
Large, default and small sizes
Dynamic pagination
Based on bootpag.js
plugin
Basic example
Basic example with default options
Flat pagination
Example with flat
pagination
Separated pagination
Example with separated
pagination
Prev/Next buttons
Configurable buttons text
Set starting page
Specify page to show on start
Plugin events
Using .on('page')
click event
TWBS Pagination Another dynamic pagination for Bootstrap
Basic example
Basic example with default options
Flat pagination layout
Example with flat
pagination
Separated pagination
Example with separated
pagination
Prev/Next buttons
Configurable buttons text
Set starting page
Specify page to show on start
Visible pages
Display visible amount of pages
Date paginator Pagination with date picker
A jQuery plugin which takes Twitter Bootstrap's already great pagination component and injects a bit of date based magic. In the process creating a hugely simplified and modularised way of paging date based results in your application.
Example below demonstrates custom item width using itemWidth
option. Default item with is 35px
, you can set any custom width in pixels, total number of days displayed will be calculated based on this value.
Choose whether or not to display the clickable calendar icon visible on selected date using showCalendar
option. By setting to false
you are effectively removing the calendar date select functionality from the user.
Example below demonstrates highlightSelectedDate
plugin option. By setting this option to false
you can choose whether or not to distinguish visually the selected date. Here only today's date is highlighted.