bootstrap实现分页

bootstrap分页功能

写前端都会面临的一个问题就是分页，如果是纯js分页也是可以的，只是可能代码量比较大，所以今天写一个关于用bootstrap框架分页的例子，希望以后可以帮助到一些对这方面比较头疼的码农。

先看看渲染图

 

页面HTML:

需要引入bootstrap和jquery
<script src="/static/js/jquery-2.1.0.min.js" th:src="@{/js/jquery-2.1.0.min.js}"></script>
<script src="/static/bootstrap3.3.7/js/bootstrap.min.js" th:src="@{/bootstrap3.3.7/js/bootstrap.min.js}"></script>
<link rel="stylesheet" href="/static/bootstrap3.3.7/css/bootstrap.min.css" th:href="@{/bootstrap3.3.7/css/bootstrap.min.css}">

.....
<!--分页-->
<div style="display: flex;justify-content: center;">
    <ul class="pagination" id="page">
    </ul>
</div>
.....

分页JS:

<!--分页-->
<script th:inline="javascript">
    $(function(){
        //当前页码
        var page = [[${page}]];
        //总页码
        var pageCount = [[${pageCount}]];
        //如果是第一页,则禁用上一页的连接
        if(page==1){
            $("#page").append("<li><a href='/blog/page?page=1' style='cursor:pointer;pointer-events: none'>&laquo;</a></li>");
        }else{
            $("#page").append("<li><a href='/blog/page?page="+(page-1)+"'>&laquo;</a></li>");
        }
　　　　　//每页显示5个页码
        var ym =Math.floor((page-1)/5)*5;
        for(var i=1;i<6;i++){
            ym = ym+i;
            var url='/blog/page?page='+ym+'&limit=4';
            if(ym==page){
                $("#page").append("<li  class='active'><a href='"+url+"'>"+ym+"</a></li>");
            }else{
                $("#page").append("<li><a href='"+url+"'>"+ym+"</a></li>");
            }
            ym =Math.floor((page-1)/5)*5;
        }

　　　　　//如果是最后一页,则禁用下一页的连接

        if(page==pageCount){

            $("#page").append("<li><a href='#' style='cursor:pointer;pointer-events: none'>&raquo;</a></li>");
        }else{
            $("#page").append("<li><a href='/blog/page?page="+(page+1)+"'>&raquo;</a></li>");
        }
　　}）

这样就可以使用bootstrap实现一个简单的分页功能了