Bootstrap Paginator是一款基于Bootstrap的js分页插件，功能很丰富，个人觉得这款插件已经无可挑剔了。它提供了一系列的参数用来支持用户的定制，提供了公共的方法可随时获得插件状态的改变，以及事件来监听用户的动作。目前经过测试的浏览器包括： Firefox 5+, Chrome 14+, Safari 5+, Opera 11.6+ and IE 7+。

官网地址：http://bootstrappaginator.org/

DownloadVisit Project in GitHub

它的使用和其他Bootstrap内置的插件一样，需要引入如下文件：

view sourceprint?

1.<link href="css/bootstrap.css" rel="stylesheet">

2.<script type="text/javascript" src="js/jquery-1.8.1.js"></script>

3.<script type="text/javascript" src="js/bootstrap-paginator.js"></script>

注意：jquery要使用1.8版本以上的。

入门实例

效果：

• <<

• <

• 1

• 2

• 3

• 4

• 5

• >

• >>

   

代码

view sourceprint?

01.<div id="example"></div>

02.<script type='text/javascript'>

03.var options = {

04.currentPage: 4,

05.totalPages: 10,

06.numberOfPages:5

07.}

08. 

09.$('#example').bootstrapPaginator(options);

10.</script><span style="font-family:'sans serif, tahoma, verdana, helvetica';"><span style="white-space:normal;"> </span></span>

只需要简单的一句即可：$('#example').bootstrapPaginator(options)将id为'example'的dom元素设置为分页组件，同时传入一些定制参数。currentPage设置当前页码，totalPages设置共多少页，numberOfPages设置显示的页码数。

组件结构

组件结构如上图包括5中类型的操作按钮，如：首页(first)、尾页(last)、上一页(prev)、下一页(next) 、以及页(page)。当然这是默然的结构，我们可通过参数对结构及样式进行定制。

参数

    Default:
    {
        animation: true,
        html: true,
        placement: 'top',
        selector: false,
        title: "",
        container: false }

公共命令

另外该插件还提供了几个公共的命令，可以通过如下方法调用，如：$('#example').bootstrapPaginator("show",3) 调用show命令、$('#example').bootstrapPaginator("getPages") 调用getPages命令

事件Events

Bootstrap Paginator 提供了俩个事件：page-clicked和page-changed。这俩个事件作为参数使用，分别对应onPageClicked和onPageChanged。

另外，demo就不写了，建议大家上官网，官网对于每个参数、命令、事件 都提供了实例，在通过参考上面的文档就比较好理解了。

 var options = {
            currentPage: 3,
            totalPages: 10,
            pageUrl: function(type, page, current){                return "http://example.com/list/page/"+page;

            }
        }

        $('#example').bootstrapPaginator(options);