标签：
要引用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>标签；
属性值如下：
totalPages the number of pages (required, checked)//总分页数startPage the current page that show on start(default: 1)//默认开始分页的页数visiblePages maximum visible pages (default: 5) //显示的分页个数href template for pagination links (default false)hrefVariable variable name in href template for page number (default {{number}})first text label (default: ‘First‘)prev text label (default: ‘Previous‘)next text label (default: ‘Next‘)last text label (default: ‘Last‘)loop carousel-style pagination (default: false)paginationClass the root style for pagination component (default: ‘pagination‘). You can use this option to apply your own style
事件如下：
onPageClick callback function
event objectpage the 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/
标签：
原文地址：http://www.cnblogs.com/housh/p/4424021.html
