前端分页功能实现（PC）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>加载</title>

<style>
#page a{
margin:0 10px;
color: #999;
}
#page a.active{
color:#0000ee;
}
</style>
</head>
<body>
<div class="pagination-nick">

<div id="list"></div>
<div id="page"></div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
var pager = {
pageIndex:1,//当前页码
pageCount:10,//每页显示多少条数据
pageMax:0,//数据有一共多少页

}
var obj={other:{},value:[11,21,31,41,51,61,71,81,91,1,12,22,32,42,52,62,72,82,92,2,13,23,33,43,53,63,73,83,93,3,14,24,34,44,54,64,74,84,94,4]};//模拟数据

$(function(){

//一共有多少页
pager.pageMax=obj.value.length % pager.pageCount?(obj.value.length / pager.pageCount)+1:obj.value.length / pager.pageCount;
var btnBox='';

//循环出多少页
btnBox+='<a href="javascript:;" data-type="first">首页</span><a href="javascript:;" data-type="nextPage">下一页</a>'
for(var i=1;i<=pager.pageMax;i++){
var j =i;
btnBox+='<a href="javascript:;" data-type="'+j+'">'+j+'</a>'
}
btnBox+='<a href="javascript:;" data-type="firstPage">上一页</a><input type="number" value="1" class="int" placeholder="1"><button class="btn-yes">确定</button><a href="javascript:;" data-type="last">尾页</a>'
console.log(pager.pageMax)

$('#page').html(btnBox)
$('#page a:nth-child(3)').addClass('active')
listBox(1);
//页码选中

//点击页数获取数据
$('#page a').on('click',function(){

var num= $(this).attr('data-type')
if(!isNaN(num)){
listBox(num)
pager.pageIndex=Number(num)//unm是字符串，要转为数字类型

}else{
switch(num){
case 'first':listBox(1);//首页
pager.pageIndex=1
break;
case 'last':listBox(pager.pageMax);//尾页
pager.pageIndex=pager.pageMax
break;
case 'nextPage'://下一页
if(pager.pageIndex < pager.pageMax){
console.log(typeof(pager.pageIndex))
listBox(pager.pageIndex+1)
pager.pageIndex=pager.pageIndex+1
console.log(pager.pageIndex)
}
break;
case 'firstPage'://上一页
if(pager.pageIndex > 1){
listBox(pager.pageIndex-1)
pager.pageIndex=pager.pageIndex-1
}
break;
}
}

pageNum()
$('.int').val(pager.pageIndex)

})

//填写页数搜索
$('.btn-yes').on('click',function(){
if($('.int').val()){

if($('.int').val()<1){
listBox(1)
pager.pageIndex=1
$('.int').val(1)
}else if($('.int').val()>pager.pageMax){
listBox(pager.pageMax)
pager.pageIndex=pager.pageMax
$('.int').val(pager.pageMax)
}else{
listBox($('.int').val())
pager.pageIndex=$('.int').val()
}
}
pageNum()
})

})

//选中页码

function pageNum(){
$('#page a').each(function(){

if($(this).attr('data-type')==pager.pageIndex){
$(this).addClass('active').siblings().removeClass('active')
}
})
}
//列表
function listBox(numIndex){

var numList=numIndex * pager.pageCount//循环的数据条数
var numNext=(numIndex-1) * pager.pageCount//从那条数据开始循环
console.log(numNext)
console.log(numList)
var xhtml='';

for(var i=numNext;i<numList;i++){

xhtml+='<li>'+obj.value[i]+'</li>'
}
console.log(xhtml)
$('#list').html(xhtml);
}
</script>
</body>
</html>

前端分页功能实现（PC）

猜你喜欢