码迷,mamicode.com
首页 > Web开发 > 详细

自己写的分页器,BOOTSTRAP+JQUERY(非完全版,后续完善)

时间:2017-08-15 09:59:58      阅读:331      评论:0      收藏:0      [点我收藏+]

标签:更新   phone   opd   按钮   hasclass   car   first   sel   class   

第一步:
//创建几个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);
})();

自己写的分页器,BOOTSTRAP+JQUERY(非完全版,后续完善)

标签:更新   phone   opd   按钮   hasclass   car   first   sel   class   

原文地址:http://www.cnblogs.com/xusongfu5050/p/7361901.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!