bootstrap分页插件用jquery

要引用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

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 object
- page 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/

bootstrap分页插件 用jquery

Options and events

bootstrap分页插件用jquery