bootstrap样式的分页插件twbsPagination 简单入门

第一:twbs-pagination的简单介绍
twbs-pagination是一个简单的自适应bootstarp样式分页插件。
他的官网:https://github.com/josecebe/twbs-pagination
第二步:使用他之前 先导入twbspagination,jquery的js文件以及bootstarp的css文件

<script src="../static/assets/vendors/jquery/jquery.js"></script>
<script src="../static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<script src="../static/assets/vendors/twbs-pagination/jquery.twbsPagination.js"></script>

在这里插入图片描述
第三步:如下图

 $(function ($) {
        function loadPage(page){
            $.get('/admin/api/commentsAll.php', {page:page}, function (data) {
                console.log(data);
                var ht = $("#comments_tmpl").render({comments: data});
                $("tbody").html(ht);
            }, 'json');
        }
        loadPage(1);
        $(".pagination").twbsPagination({
            totalPages: 100,
            visiblePages:5,
            startPage:1,
            first:"首页",
            last:"页尾",
            prev:"上一页",
            next:"下一页",
            onPageClick: function (e,page) {
                loadPage(page);
            }
        })
    })


在这里插入图片描述
效果 :
在这里插入图片描述
部分参数说明:

设置显示中文的参数是first: “首页”,last: “未页”, prev: ‘上一页’,next: ‘下一页’,

currentPage:当前页数,totalPages:总共多少页
initiateStartPageClick:初始化时是否执行分页事件 默认为true

和ajax配合使用
在这里插入图片描述

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值