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'));
效果图








  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值