分页功能
2018-10-22 本文已影响0人
zjh111
image.png
基础的html
<main id="blackList-content" class="blackList-content">
</main>
<nav id="bl-nav"aria-label="Page navigation">
<ul class="pagination">
</ul>
</nav>
一些css
.blackList-item{
display:flex;
justify-content: space-between;
align-items: center;
width:100%;
padding-bottom:10px;
border-bottom:1px solid #ddd
}
.blackList-item-lt{
display:flex;
}
.blackList-item-lt-message{
display:flex;
justify-content: space-around;
flex-direction: column;
}
.blackList-item-lt-message p{
margin:0;
padding:0;
}
.blackList-item-lt div img{
width:60px;
height:60px;
border-radius: 50%;
}
.blackList-item-lt-message>div:nth-child(1){
color:#222;
}
.blackList-item-lt>div{
min-width:60px;
}
按钮样式使用的bootstrap。
使用ES6模板语法比以前更方便。
假设每次点击只收到当前页面的数据（例如点击第二面之传输第二面的数据）。
'{"code":200,
"message":null,
"data":{
"total":8,//总条数
"size":5,//每页的条数
"pages":2,//总页数
"current":1,//当前页数
"records":[{"uid":1,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":2,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"},{"uid":3,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"},{"uid":4,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"},{"uid":5,"head":"Images/head.jpg","userNname":"userName","time":"2018-06-30 02:44:21"}]}}'
用forEach循环得出要加载的页面模板。
如果接受的数据不止每面而是更多或者全部，要计算加载的地方。
在按钮中插入value=uid，点击时判断点击的哪个按钮。
bList = JSON.parse(bList)
let temp={}
temp.size = bList.data.size || 5
console.log(bList.data.records)
temp.domValue = ``
temp.data = bList.data.records
temp.data.forEach(function(e){
temp.domValue += `
<div class="blackList-item">
<div class="blackList-item-lt">
<div>
<img src="${e.head}">
</div>
<div class="blackList-item-lt-message text-left">
<div>
<p>${e.userName}</p>
</div>
<div>
<p>添加时间：${e.time}</p>
</div>
</div>
</div>
<div class="blackList-item-rt">
<button value="${e.uid}" class="btn btn-default">移除</button>
</div>
</div>
`
})
生成分页标签，给每个标签加上data-page属性已判断点击后需要加载的页面，
并根据当前页面来判断需要给哪一个生成的页面加上标记。
function makeLiFor(a,b,current){//循环生成li
let domNav=``
for(let i=a;i<=b;i++){
if(i===current){//给当前页面标签加上.active}
domNav = domNav + `<li class="active"><span data-page="${i}" href="#">${i}</span></li>`
}else{
domNav = domNav + `<li class=""><span data-page="${i}" href="#">${i}</span></li>`
}
}
return domNav
}
a，b是根据总数来判断标签要生成哪一部分,假设标签最多显示5面，详见下面。
下面是判断要显示哪部分标签页。
function makeLi(temp,bList){//生成要渲染的分页标签
console.log(temp.current)
let a,b
if(bList.data.total <= temp.size*5){
//标签页小于等于5时
a=1;
b=temp.page
return makeLiFor(a,b,temp.current)
}else if(bList.data.total > temp.size*5){
//总标签页大于5时
if(temp.current < 3){//当前标签页小于5时
a=1;
b=temp.page;
return makeLiFor(a,b,temp.current)
}else if(temp.current >= 3 && temp.current >= temp.page-2){//当前标签页大于最大标签页-2时
a=temp.current-2;
b=temp.current+2;
return makeLiFor(a,b,temp.current)
}else if(temp.current > temp.page-2){
a=temp.page-4;
b=temp.page;
return makeLiFor(a,b,temp.current)
}
}
}
上面代码接受了数据，并根据数据生成了dom。
将生成的dom插入进页面
$('.blackList-content').prepend(temp.domValue)
$('#bl-nav>.pagination').append(temp.domNav)
监听整个分页标签，根据点击时，span中的data-page属性判断要加载哪一面。
$("#bl-nav").on("click",function(e){
if(e.target.tagName === 'SPAN'){//判断点击的是否为span标签
let temp ={}
temp['needPage'] = $(e.target).attr('data-page')
temp = JSON.stringify(temp)
$.ajax({
type: "post",
url: "/loadingBlacklist",
data: temp,
processData: false, //false
cache: false, //缓存
beforeSend:function(){
$('.loading').addClass("active")
},
success: function(data){
ajaxSuccess(data); //成功时执行的函数
},
fail:function(){
console.log('error')
},
complete:function(){//执行完成前执行的函数，模拟加载过程用
setTimeout(function(){
$('.loading').removeClass("active")
},1000)
}
})
}
})
监听整个黑名单标签，根据点击时，button中的value属性判断要移除哪一个用户。
$("#blackList-content").on("click",function(e){
if(e.target.tagName === 'BUTTON'){
let temp = {removeBl:$(e.target).attr('value')}
temp= JSON.stringify(temp)
$.ajax({
type: "post",
url: "/removeBlacklist",
data: pageData,
processData: false, //false
cache: false, //缓存
beforeSend:function(){
$('.loading').addClass("active")
},
success: function(data){//重新接收数据
console.log('成功移除')
ajaxSuccess(data)
},
fail:function(){
console.log('error')
},
complete:function(){
setTimeout(function(){
$('.loading').removeClass("active")
},1000)
}
})
}
})
完整的代码
//进入黑名单页面时进行加载
$('#BLanchor').on('click',function(){
ajaxSuccess(bList)
// let temp ={}
// temp['needPage'] = 1
// temp = JSON.stringify(temp)
// $.ajax({
// type: "post",
// url: "/loadingBlacklist",
// data: temp,
// processData: false, //false
// cache: false, //缓存
// beforeSend:function(){
// $('.loading').addClass("active")
// },
// success: function(data){//重新接收数据
// console.log('成功移除')
// ajaxSuccess(data)
// },
// fail:function(){
// console.log('error')
// },
// complete:function(){
// setTimeout(function(){
// $('.loading').removeClass("active")
// },1000)
// }
// })
})
//点击页面标签时
$("#bl-nav").on("click",function(e){
if(e.target.tagName === 'SPAN'){
let temp ={}
temp['needPage'] = $(e.target).attr('data-page')
temp = JSON.stringify(temp)
$.ajax({
type: "post",
url: "/loadingBlacklist",
data: temp,
processData: false, //false
cache: false, //缓存
beforeSend:function(){
$('.loading').addClass("active")
},
success: function(data){
ajaxSuccess(data);
},
fail:function(){
console.log('error')
},
complete:function(){
setTimeout(function(){
$('.loading').removeClass("active")
},1000)
}
})
}
})
//点击移除按钮时
$("#blackList-content").on("click",function(e){
if(e.target.tagName === 'BUTTON'){
let temp = {removeBl:$(e.target).attr('value')}
temp= JSON.stringify(temp)
$.ajax({
type: "post",
url: "/removeBlacklist",
data: temp,
processData: false, //false
cache: false, //缓存
beforeSend:function(){
$('.loading').addClass("active")
},
success: function(data){//重新接收数据
console.log('成功移除')
ajaxSuccess(data)
},
fail:function(){
console.log('error')
},
complete:function(){
setTimeout(function(){
$('.loading').removeClass("active")
},1000)
}
})
}
})
//模拟接收的时json数据
var bList ='{"code":200,"message":null,"data":{"total":8,"size":10,"pages":2,"current":1,"records":[{"uid":1,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":2,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":3,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":4,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"},{"uid":5,"head":"Images/head.jpg","userName":"userName","time":"2018-06-30 02:44:21"}]}}'
//下面时成功收到时执行的内容
function ajaxSuccess(bList){
bList = JSON.parse(bList)
let temp={}
temp.size = bList.data.size || 10
console.log(bList.data.records)
temp.domValue = ``
temp.data = bList.data.records
temp.data.forEach(function(e){
temp.domValue += `
<div class="blackList-item">
<div class="blackList-item-lt">
<div>
<img src="${e.head}">
</div>
<div class="blackList-item-lt-message text-left">
<div>
<p>${e.userName}</p>
</div>
<div>
<p>添加时间：${e.time}</p>
</div>
</div>
</div>
<div class="blackList-item-rt">
<button value="${e.uid}" class="btn btn-default">移除</button>
</div>
</div>
`
})
temp.domNav = ``
temp.current = bList.data.current
temp.total = bList.data.total
temp.page = Math.ceil(bList.data.total/temp.size)
temp.domNav = makeLi(temp,bList)
//将生成元素插入到页面中
$('.blackList-content').prepend(temp.domValue)
$('#bl-nav>.pagination').append(temp.domNav)
}
function makeLiFor(a,b,current){//循环生成li
let domNav=``
for(let i=a;i<=b;i++){
if(i===current){//给当前页面标签加上.active}
domNav = domNav + `<li class="active"><span data-page="${i}" href="#">${i}</span></li>`
}else{
domNav = domNav + `<li class=""><span data-page="${i}" href="#">${i}</span></li>`
}
}
return domNav
}
//-------
function makeLi(temp,bList){//生成要渲染的分页标签
console.log(temp.current)
let a,b
if(bList.data.total <= temp.size*5){
//标签页小于等于5时
a=1;
b=temp.page
return makeLiFor(a,b,temp.current)
}else if(bList.data.total > temp.size*5){
//总标签页大于5时
if(temp.current < 3){//当前标签页小于5时
a=1;
b=temp.page;
return makeLiFor(a,b,temp.current)
}else if(temp.current >= 3 && temp.current >= temp.page-2){//当前标签页大于最大标签页-2时
a=temp.current-2;
b=temp.current+2;
return makeLiFor(a,b,temp.current)
}else if(temp.current > temp.page-2){
a=temp.page-4;
b=temp.page;
return makeLiFor(a,b,temp.current)
}
}
}
