<!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>
前端分頁功能實現（PC）
免責聲明！
本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。