要引用bootstrap.css,jquery.js,jquery.twbsPagination.js
效果图如下：
代码如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>bootstrap分页控件</title> <link href="/bootstrap/dist/css/bootstrap.css" rel="stylesheet" /> <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> <script src="/bootstrap/dist/js/jquery.twbsPagination.js"></script> <script> $(function () { $('#pagination-demo').twbsPagination({ totalPages: 35, visiblePages: 7, version: '1.1', onPageClick: function (event, page) { console.log(page); } }); }) </script> </head> <body> <ul id="pagination-demo" class="pagination-sm"></ul> </body> </html>
需要在body里面加入 <ul id="pagination-demo" class="pagination-sm"></ul>标签；
属性值如下：
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 (defaultfalse)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
事件如下：
onPageClickcallback function- Function parameters
eventobjectpagethe number of page
链接如下：
http://sc.chinaz.com/jiaoben/140116364930.htm
http://www.html580.com/?iS7x59Uk
https://github.com/esimakin/twbs-pagination
http://esimakin.github.io/twbs-pagination/