Bootstrap Paginator分页插件使用示例

  一般的pc端或者响应式网页会用到bootstrap，因此也就想着bootstrap是否有分也插件呢，或者说是基于jquery支持的分页功能，这样整体的网站风格便能够统一，又不用自己去写一套分页功能

在使用bootstrap插件的时候，需要导入一下css，js

1     <link href="/static/css/bootstrap.min.css" rel="stylesheet">
2     <script src="/static/js/jquery-2.1.1.min.js"></script>
3     <script src="/static/js/bootstrap.min.js"></script>
4     <script src="/static/js/bootstrap-paginator.js"></script>

其中：bootstrap-paginator.js下载地址：https://github.com/lyonlai/bootstrap-paginator 在GitHub上下载

HTML代码

<div class="form-group">
    <div class="col-md-12 text-right">
        <nav aria-label="Page navigation">
            <ul class="pagination">

            </ul>
        </nav>
    </div>
</div>

javaScript代码

function AjaxPaginator(obj) {
    $.ajax({
        type:'get',
        url: url,
        success/*complete*/: function (data) {
            var options = {
               currentPage: currentPage, //当前页
                totalPages: totalPages, //总页数
                numberOfPages: 5, //设置控件显示的页码数
                bootstrapMajorVersion: 3,//如果是bootstrap3版本需要加此标识，并且设置包含分页内容的DOM元素为UL,如果是bootstrap2版本，则DOM包含元素是DIV
                useBootstrapTooltip: false,//是否显示tip提示框
                itemTexts:function(type,page, current){//文字翻译
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "尾页";
                        case "page":
                            return page;
                    }
                },
                onPageClicked: function (event, originalEvent, type, page) {
           //给每个页眉绑定一个事件，其实就是ajax请求
		$.ajax({
		    ......
		})
                }
            }
            obj.bootstrapPaginator(options);
        }
    })
}

找到dom然后调用方法

AjaxPaginator($('.pagination'));

效果图