Front-end to achieve paging function (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, // data have a total of how many pages

}
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"> Previous </a> <input type = "number" value = "1" class = "int" placeholder = "1"> <button class = "btn-yes "> determined </ button> <a href="javascript:;" data-type="last"> Last </a> '
the console.log (pager.pageMax)

$ (' #page '.) HTML (btnBox)
$ (' # Page A: Child-Nth (. 3) '). addClass (.' Active ')
listBox (. 1);
// selected page

// Get data pages click
$ (' A #page '). ON (' the Click ', function () {

var NUM = $ (the this) .attr (' Data-type ')
IF (! isNaN (NUM)) {
listBox (NUM)
pager.pageIndex = Number The (num) // unm string, to digital type to

} the 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 // piece of data from the start of the loop
the console.log (numNext)
the console.log (numlist)
var XHTML = '';

for (var = numNext I; I <numlist; I ++ ) {

XHTML + = '<Li>' + obj.value [I] + '</ Li>'
}
the console.log (XHTML)
$ ( '# List') HTML (XHTML);.
}
</ Script>
</ body>
</ HTML>

Front-end to achieve paging function (PC)

Guess you like