美文网首页
前端分页插件twbsPagination(非AJAX)

前端分页插件twbsPagination(非AJAX)

作者: BrightHeart | 来源:发表于2018-08-30 18:09 被阅读0次

    1. 引入twbsPagination的js

    <!--版本不要太新-->
    <script src="/plugins/page/jquery.twbsPagination.min.js"></script>
    

    2. Table下加入分页区域,使用BootStrap样式

    <!--使用BootStrap样式-->
    <div class="box-footer">
             <ul id="pagination-demo" class="pagination pull-right"></ul>
    </div>
    

    3. 书写twbsPagination的js

     $(function () {
            $("#pagination-demo").twbsPagination({
                totalPages:[[${pageInfo.pages}]],  //总页数
                hideOnlyOnePage: true,  //当总数为一页时,不显示分页
                visiblePages:7,  //设置最多显示的页码数(例如有20页,当前第1页,则显示1 - 7页)
                currentPage:[[${pageInfo.pageNum}]],  //设置当前的页码
                first:'首页',
                last:'末页',
                prev:'上一页',
                next:'下一页',
                href:"/bug/myNote?pageNum={{number}}"
            })
        })
    

    相关文章

      网友评论

          本文标题:前端分页插件twbsPagination(非AJAX)

          本文链接:https://www.haomeiwen.com/subject/rrpdwftx.html