bootstrap+jq实现简单的分页

1.心理路程

新手上路，最近做了几个项目都涉及到分页，但是每次做完分页之后都没有归纳出自己的一套通用的分页实现，导致每次做分页的时候都需要花费时间去重新写一个，为什么不使用分页插件呢？原因是（1）自己实现一个扩展性比较好（2）能够加强对jq的使用（3）分页插件太多了，不想去深究了。

综上，打算将这次项目中自己所做的分页实现作为以后的通用模板，当然我会不断的优化更新的。所以前期虽然实现了简单的分页，但是可能代码杂乱无章，我也是在不断进步中，多多指教。

话不多说，直接上代码！

PS:为了积极性，先放张成品图

2.代码实现

2.1导包

需要导入的包是bootstrap的css和js文件，外加一个jquery.js文件，这里自行百度下载即可。

关于IDEA搭建SSM项目的教程看这里

IDEA2017创建SpringMVC4+Spring4+mybatis3+Maven3的web项目

2.2 html

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-default">
                <div class="panel-body">
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover userListTable">
                            <thead>
                            <tr>
                                <th>用户id</th>
                                <th>用户名</th>
                                <th>角色名称</th>
                                <th>邮箱</th>
                                <th>手机号</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>

                    </div>
                </div>
                <!--分页栏-->
                <div id="pagination">
                    
                </div>
            </div>
        </div>
    </div>

2.3 userList.js

//注意：若将代码写到$(function(){})中，则里面的所有方法都不是全局的，故此a标签中的onclick调用不到里面的方法！！！。
//总记录数
var totalNum = 0;

//总页数
var totalPage = 0;

//默认每页显示数
var avageNum = 1;

//默认显示第一页
var currentPage = 1;


getUserList(currentPage,avageNum);
initPagination(totalNum,totalPage);

//与后台交互获取数据，异步加载到页面上
function getUserList(pageNum,pageSize){
    currentPage = pageNum;
    $(".panel-body table tbody").html(" ");
    $.ajax({
        url:"../../user/userList.do",
        method:"get",
        data:{"pageNum":pageNum,"pageSize":pageSize},
        async:false,
        success:function(data){
            if (data.success){
                var length = data.data.list.length;
                totalNum = data.data.total;
                totalPage = data.data.pages;
                for(var  i = 0;i<length;i++){
                    var userId = data.data.list[i].userId;
                    var userName = data.data.list[i].userName;
                    var roleLength = data.data.list[i].roleList.length;
                    var roleName = " ";
                    for(var j=0;j<roleLength;j++){
                        roleName = data.data.list[i].roleList[j].roleName + " " + roleName;
                    }
                    var email = data.data.list[i].userEmail;
                    var phone = data.data.list[i].userPhone;
                    var status = data.data.list[i].userStatus;
                    $(".userListTable tbody").append(
                        '<tr>'+
                        '<td>'+userId+'</td>'+
                        '<td>'+userName+'</td>'+
                        '<td>'+roleName+'</td>'+
                        '<td>'+email+'</td>'+
                        '<td>'+phone+'</td>'+
                        '<td><button type="button" class="btn btn-success btn-default">角色分配</button><button type="button" class="btn btn-default btn-danger">禁止登陆</button></td>'+
                        '</tr>'
                    )
                }
            }
        }
    });
}

//初始化分页栏
function initPagination(totalPage,totalNum) {
    $('#pagination').html(" ");
    $('#pagination').append(
        '<ul class="pagination" style="display:inline;">' +
        '<span style="float: right;">每页显示' +
        '<select id="dataNum">' +
        '<option value="1">1</option>' +
        '<option value="2">2</option>' +
        '<option value="3">3</option>' +
        '</select>条记录,总共有' + totalPage + '页，总共' + totalNum + '条记录</span>' +
        '</ul>'
    )
    // onclick="getUserList('+ (currentPage - 1) + ','+ avageNum + ')"
    $("#pagination ul").append(
        '<li><a href="javascript:void(0);" id="prev">上一页</a>'
    )
    for (var i = 1; i <= totalPage; i++) {
        $("#pagination ul").append(
            '<li id="page'+i+'"><a href="javascript:void(0);"  onclick="getUserList(' + i + ',' + avageNum + ')">' + i + '</a>'
        )
    }
    $("#pagination ul").append(
        '<li><a href="javascript:void(0);"  id="next">下一页</a>'
    )
    $("select option[value=" + avageNum + "]").attr('selected', true)
    $("#page1").addClass("active");
    checkA();
}

//很关键，因为执行initPagination方法时，将select删除再重新添加，所以需要先将select上的结点移除off
//然后再绑定结点on，如果不这么做，会出现change事件只被触发一次。
$(document).off('change','#dataNum').on('change','#dataNum',function(){
    avageNum = $(this).children('option:selected').val();
    currentPage = 1;
    getUserList(currentPage,avageNum);
    initPagination(totalPage,totalNum);
});

//设置分页栏点击时候的高亮
$("#pagination").on("click","li",function(){
    var aText = $(this).find('a').html();
    checkA();
    if (aText == "上一页"){
        $(".pagination > li").removeClass("active");
        $("#page"+(currentPage -1)).addClass("active");
        getUserList(currentPage - 1,avageNum);
        checkA();
    }else if(aText == "下一页"){
        $(".pagination > li").removeClass("active");
        $("#page"+(currentPage + 1)).addClass("active");
        getUserList(currentPage + 1,avageNum);
        checkA();
    }else{
        $(".pagination > li").removeClass("active");
        $(this).addClass("active");
    }
})

//因为其他地方都需要用到这两句，所以封装出来
//主要是用于检测当前页如果为首页，或者尾页时，上一页和下一页设置为不可选中状态
function checkA() {
    currentPage == 1 ? $("#prev").addClass("btn btn-default disabled") : $("#prev").removeClass("btn btn-default disabled");
    currentPage == totalPage ? $("#next").addClass("btn btn-default disabled") : $("#next").removeClass("btn btn-default disabled");
}

3.效果图