第一步：
//创建几个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>商品编号: ${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);
})();