jQuery/Css Custom Pagination Control

Theams

Demo

This is Small size (with class pagination-sm)

This is Normal size

This is Large size (with class pagination-lg)

Synchronized pagination elements

You can attach multiple paginators to your content and access them via class name. The following example show this case.

Options and events

Options explanation and default values:
• totalPagesthe number of pages (required, checked)
• startPagethe current page that show on start(default: 1)
• visiblePagesmaximum visible pages (default: 5)
• hreftemplate for pagination links (default false)
• hrefVariablevariable name in href template for page number (default {{number}})
• firsttext label (default: 'First')
• prevtext label (default: 'Previous')
• nexttext label (default: 'Next')
• lasttext label (default: 'Last')
• loopcarousel-style pagination (default: false)
• paginationClassthe root style for pagination component (default: 'pagination'). You can use this option to apply your own style

Available event:
• onPageClickcallback function
  Function parameters
  • eventobject
  • pagethe number of page