前端分页功能实现（PC）

╰+攻爆jí腚メ 2022-01-09 05:51 262阅读 0赞

<!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,99999999999\]\};//模拟数据  
  
$(function()\{  
  
  
//一共有多少页  
pager.pageMax=obj.value.length % pager.pageCount?parseInt(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>obj.value.length?obj.value.length: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>

转载于:https://www.cnblogs.com/xiaoqiong-li/p/10980478.html