自己写的分页器，BOOTSTRAP+JQUERY（非完全版，后续完善）

第一步：//创建几个php文件的全局变量先，后面会很多地方用到var wholePhones="selectPhones.php";var lowPowerPhones="lowPowerPhones.php";var issuePhones="issuePhones.php";var losePhones="losePhones.php";

    第二步：

// 根据不同类型sorting不同商品列表的共用的函数集合，两个参数分别表示从第几页开始查询，查询通过哪个接口    function sortPhones(page,pathUrl) {        var sumPage;        $.ajax({            type:‘GET‘,            url:‘data/‘+pathUrl+‘?page=‘+page,            success:function (result) {                var obj=JSON.parse(result);                var phones=obj.phones;                var count=obj.count;                sumPage=Math.ceil(count/20);                var html = "";                for(var i=0;i<phones.length;i++){                    // 在这里定义一下模态框触发按钮的链接目标，要跟它对应的模态框ID一样，否则点开任何一条信息弹出的都是ID=1的商品信息                    var hrefUrl=‘phoneModal‘+i;                    var phone = phones[i];                    html += `        <div class="list-group-item divItem">                <ul class="list-inline row">                    <li class="col col-md-1">${phone.id}</li>                    <li class="col col-md-1">${isLock}</li>                    <li class="col col-md-1">${phone.station_id}</li>                    <li class="col col-md-1 dropdown">                        <a href="" class="dropdown-toggle" data-toggle="dropdown">操作</a>                        <ul class="dropdown-menu">                            <li>开</li>                            <li>关</li>                            <li class="deleteCar">删除</li>                        </ul>                    </li>                    <li class="col col-md-1">                        <a href="#${hrefUrl}" data-toggle="modal">详情</a>                        <div class="modal" id="${hrefUrl}" data-backdrop="static">                            <div class="modia-dialog">                                <div class="modal-content">                                    <div class="modal-header">                                        <span class="lf">商品详情</span>                                        <span class="rf closeModal" data-dismiss="modal">关闭</span>                                    </div>                                    <div class="modal-body">                                        <div class="map">                                            <img src="imgs/map.jpg" class="img-responsive">                                        </div>

<table class="table table-stripped">                                            <thead>                                                <tr>                                                    <td><b>商品编号:&nbsp;&nbsp;&nbsp;&nbsp;${phone.id}</b></td>                                                </tr>                                            </thead>                                            <tbody>                                                <tr>                                                    <td>创建时间:</td>                                                    <td>${phone.created}</td>                                                </tr>                                                <tr>                                                    <td>更新时间:</td>                                                    <td>${phone.updated}</td>                                                </tr>                                                <tr>                                                    <td>名称:</td>                                                    <td>${phone.name}</td>                                                </tr>                                            </tbody>                                        </table>                                    </div>                                </div>                            </div>                        </div>                    </li>                </ul>            </div>                  `;                }                //没有想要sorting的商品时，显示的内容                var noSortHtml=`                <div class="list-group-item divItem">                    <ul class="list-inline row">                        <li class="col col-md-1">没有该类型的商品</li>                        <li class="col col-md-1">NA</li>                        <li class="col col-md-1">NA</li>                        <li class="col col-md-1">NA</li>                    </ul>                </div>            `;                if(phones.length<=0){$(".list-phone").html(noSortHtml)}                else{$(".list-phone").html(html)};            },            error:function (err) {                console.log(err)            }        })    }

第三步：

// 创建分页器的封装函数，重要！

    function createPage(page,pathUrl) {        var sumPage;        $.ajax({            type:‘GET‘,            url:‘data/‘+pathUrl+‘?page=‘+page,            success:function (result) {                var obj=JSON.parse(result);                var count=obj.count;                sumPage=Math.ceil(count/20);                // 将分页按钮渲染到HTML页面上                var pageHtml="<li class=‘previousPage‘><a rel=‘1‘>上一页</a></li>";                // 这个是默认激活的第一个页面，所以要单独写出来，不可以循环渲染                pageHtml+="<li class=‘active itemPage firstItem‘><a rel=‘1‘>1</a></li>";                if(sumPage>=2){                    for(var j=0;j<sumPage-1;j++){                        pageHtml+=`<li class="itemPage"><a rel=‘${j+2}‘>${j+2}</a></li>`;                    }                }                else{pageHtml+=‘‘};                pageHtml+="<li class=‘nextPage‘><a rel=‘2‘>下一页</a></li>";                $(‘.pagination‘).html(pageHtml);

// 非点击按钮触发时候，其实只要保证上一页是禁用就行了，下一页没关系，它肯定不是禁用的                if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}                else{$(‘.previousPage‘).removeClass(‘disabled‘)}                if(sumPage<=1){$(‘.nextPage‘).addClass(‘disabled‘)}                // 获取1-7按钮的集合（这里以后要优化，现在是数据库只有7条数据，后续如果数据多了就不能这样了）                var list=document.querySelectorAll(‘li.itemPage‘);                //点击1-7之间的按钮时触发事件                $(list).click(function () {                    $(this).addClass(‘active‘).siblings().removeClass(‘active‘);                    if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}                    else{$(‘.previousPage‘).removeClass(‘disabled‘)}                    if($(‘.nextPage‘).prev().hasClass(‘active‘)){$(‘.nextPage‘).addClass(‘disabled‘)}                    else{$(‘.nextPage‘).removeClass(‘disabled‘)}                    // 获取分页器每页对应的页数，然后点击数字，查询不同页数的内容                    var i=$(this).children(‘a‘).html();                    console.log(i);                    // 再判断条件来分页显示对应的列表信息                    // 如果是商品总列表标签激活，就到总列表的php里面查询，以此类推                    if($(‘#wholePhones‘).hasClass(‘current‘)){sortPhones(i,wholePhones)}                    if($(‘#lowPowerPhones‘).hasClass(‘current‘)){sortPhones(i,lowPowerPhones)}                    if($(‘#issuePhones‘).hasClass(‘current‘)){sortPhones(i,issuePhones)}                    if($(‘#losePhones‘).hasClass(‘current‘)){sortPhoness(i,losePhones)}                });                // 在这里需要找到当前active的元素下标，然后点击时候要重新给index再赋值，因为慢一拍，所以点击时候index要+1                var index=parseInt($(‘.pagination li.active‘).children(‘a‘).html());                // 点击上一页按钮                $(‘.previousPage‘).click(function () {                    index=parseInt($(‘.pagination li.active‘).children(‘a‘).html())+1;                    if(index<=2){$(‘.firstItem‘).addClass(‘active‘).siblings().removeClass(‘active‘)}                    else{$(‘.pagination li.active‘).prev().addClass(‘active‘).siblings().removeClass(‘active‘);}                    //当上一页按钮后的一个元素是active时，让上一页按钮禁用                    if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}                    else{$(‘.previousPage‘).removeClass(‘disabled‘)}                    if($(‘.nextPage‘).prev().hasClass(‘active‘)){$(‘.nextPage‘).addClass(‘disabled‘)}                    else{$(‘.nextPage‘).removeClass(‘disabled‘)}                    // 获取分页器每页对应的页数，然后点击数字，查询不同页数的内容                    var i=$(‘.pagination li.active‘).children(‘a‘).html();                    console.log(i);                    // 再判断条件来分页显示对应的列表信息                    // 如果是商品总列表标签激活，就到总列表的php里面查询，以此类推

　　　　　　　　　　　 if($(‘#wholePhones‘).hasClass(‘current‘)){sortPhones(i,wholePhones)}                    if($(‘#lowPowerPhones‘).hasClass(‘current‘)){sortPhones(i,lowPowerPhones)}                    if($(‘#issuePhones‘).hasClass(‘current‘)){sortPhones(i,issuePhones)}                    if($(‘#losePhones‘).hasClass(‘current‘)){sortPhones(i,losePhones)}

                });

//点击下一页按钮                $(‘.nextPage‘).click(function (e) {                    e.preventDefault();                    // 因为慢一拍，所以这里Index+1                    index=parseInt($(‘.pagination li.active‘).children(‘a‘).html())+1;                    if(index>sumPage){                        $(‘.pagination li.active‘).addClass(‘active‘).siblings().removeClass(‘active‘);                    }                    else{$(‘.pagination li.active‘).next().addClass(‘active‘).siblings().removeClass(‘active‘);}                    //当下一页按钮前的一个元素是active时，让下一页按钮禁用                    if($(‘.firstItem‘).hasClass(‘active‘)){$(‘.previousPage‘).addClass(‘disabled‘)}                    else{$(‘.previousPage‘).removeClass(‘disabled‘)}                    if($(‘.nextPage‘).prev().hasClass(‘active‘)){$(‘.nextPage‘).addClass(‘disabled‘)}                    else{$(‘.nextPage‘).removeClass(‘disabled‘)}                    // 获取分页器每页对应的页数，然后点击数字，查询不同页数的内容                    var i=$(‘.pagination li.active‘).children(‘a‘).html();                    // 再判断条件来分页显示对应的列表信息                    // 如果是车辆总列表标签激活，就到总列表的php里面查询，以此类推

　　　　　　　　　　   if($(‘#wholePhones‘).hasClass(‘current‘)){sortPhones(i,wholePhones)}                    if($(‘#lowPowerPhones‘).hasClass(‘current‘)){sortPhones(i,lowPowerPhones)}                    if($(‘#issuePhones‘).hasClass(‘current‘)){sortPhones(i,issuePhones)}                    if($(‘#losePhones‘).hasClass(‘current‘)){sortPhones(i,losePhones)}

                });            },            error:function (err) {                console.log(err)            }        })    }

第四步：

// 刚加载页面时显示商品总列表的分页器以及总商品列表详情，所以page和pathUrl两个参数分别是1和wholePhones，WholePhones是全部商品列表的后台接口    (function () {        if($(‘#wholePhones‘).hasClass(‘current‘)){createPage(1,wholePhones);}        sortPhones(1,wholePhones);    })();