Bootstrap Pagination demo - Basic setup

Easily navigate pages from pagination section. Go directly to any page using input box. Give page number and press Enter. Set rows per page, using input box.

Apply several themes on the fly using [Themes ] from main menu.

Get the code from [Code ] tab.

<!--  It is a good idea to bundle all CSS in one file. The same with JS -->

<!--  JQUERY -->
<script type="text/javascript" src="/path/to/jquery.min.js"></script>

<!--  BOOTSTRAP -->
<link rel="stylesheet" type="text/css" href="/path/to/bootstrap.min.css">
<script type="text/javascript" src="/path/to/bootstrap.min.js"></script>

<!--  PAGINATION plugin -->
<link rel="stylesheet" type="text/css" href="/path/to/jquery.bs_pagination.min.css">
<script type="text/javascript" src="/path/to/jquery.bs_pagination.min.js"></script>
<script type="text/javascript" src="/path/to/bs_pagination/localization/en.min.js"></script>
<!--  Just create a div and give it an ID -->

<div id="demo_pag1"></div>
$(function() {

	$("#demo_pag1").bs_pagination({
		totalPages: 100
	});

});

More demos (Coming soon)

  • Basic setup
  • Direct URL in links (SEO friendly)
  • Events