bootstrap实现分页

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 >


    <ul class="pagination" >


    </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\' 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=\'#\' cursor:pointer;pointer-events: none\'>&raquo;</a></li>");


        }else{


            $("#page").append("<li><a href=\'/blog/page?page="+(page+1)+"\'>&raquo;</a></li>");


        }


}）

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