This is a way to use JavaScript native way & jquery to realize web page content paging function.
Have nothing to do to analyze the previous code.
It is a paging function that I tried to do through JavaScript and jquery two years ago. (At that time, the owner of this company was very nice, thank this boss).
Generally, when we write paging, there are three variables, namely the current page, the number of entries per page, and the total number of pages calculated by the background based on the number of entries per page. The number of items per page is fixed, and each time data is requested from the background database, only the fixed item is taken according to the current page position. In this way, the loading speed is more balanced, which is neither significantly slow nor particularly fast.
I have seen another way of paging. The web page requests data from the database for the first time, and the backend sends the entire item data in the library to the front end, so that the front end page receives all the data and then performs paging calculations and displays. The disadvantage of this method is the first time. Loading is very time-consuming, especially when the amount of data is very large, the advantage is that the paging data click to find other page data is very fast. That is, the initial load is slow, and the subsequent operations are much faster.
The realization idea of paging here is the first one, namely: request data from the background based on two variables: the current page position and the number of entries per page.
<div id="dom-group-page" class="dom-group-page">
<div class="dom-group-page-btn">
<span id="dom-ch-page-one" class="dom-ch-page" disabled="disabled" style="background: rgb(204, 204, 204);">上一页</span>
<span id="dom-html-num-spot-left">...</span>
<span id="dom-html-num-prev" class="dom-html-num" style="display: none;"></span>
<span id="dom-html-num-one" class="dom-html-num" style="border: 1px solid rgb(61, 206, 111);">1</span>
<span id="dom-html-num-two" class="dom-html-num" style="display: inline-block;">2</span>
<span id="dom-html-num-spot">...</span>
<span id="dom-ch-page-two" class="dom-ch-page" style="background: rgb(49, 111, 180);">下一页</span>
<span id="dom-page-count">共13页</span>
<span>到第<input type="text" id="dom-group-page-input" class="dom-group-page-input">页</span>
<span><button id="dom-page-subm">确定</button></span>
</div>
</div>
var pageNum=1; //第pageNum页
let pageSize; //每页有pageSize条
let pageCount; //总共有pageCount页
function SwitchPage(pageNum,pageCount){
$("#dom-page-count").html("共"+pageCount+"页");
if(pageNum<pageCount && pageNum>0){
$("#dom-html-num-one").html(pageNum);
$("#dom-html-num-two").html(Number(pageNum)+1);
$("#dom-html-num-two").css("display","inline-block");
}else if(pageNum==pageCount){
$("#dom-html-num-one").html(pageNum);
$("#dom-html-num-two").css("display","none");
};
if(pageNum==1){
$("#dom-html-num-prev").css("display","none");
}else if(pageNum>1 || pageCount>=3){
$("#dom-html-num-prev").html(Number(pageNum)-1);
$("#dom-html-num-prev").css("display","inline-block");
};
if(pageNum<=1){
$("#dom-ch-page-one").attr("disabled","disabled");
$("#dom-ch-page-one").css("background","#ccc");
$(".dom-group-page-btn>span:nth-child(4)").css("border","1px solid #3dce6f");
if(pageCount==1){
$("#dom-ch-page-two").attr("disabled","disabled");
$("#dom-ch-page-two").css("background","#ccc");
$("#dom-html-num-spot").css("display","none");
}else if(pageCount==2){
$("#dom-html-num-spot").css("display","none");
}else if(pageCount>2){
$("#dom-ch-page-two").attr("disabled",false);
$("#dom-ch-page-two").css("background","#3dce6f");
};
}else{
$("#dom-ch-page-one").attr("disabled",false);
$("#dom-ch-page-one").css("background","#3dce6f");
if(pageNum>=pageCount){
$("#dom-ch-page-two").attr("disabled","disabled");
$("#dom-ch-page-two").css("background","#ccc");
}else{
$("#dom-ch-page-two").attr("disabled",false);
$("#dom-ch-page-two").css("background","#3dce6f");
};
};
};
//输入框
$("#dom-page-subm").click(function(){
pageNum=$("#dom-group-page-input").val();
if(pageNum>pageCount){
pageNum=pageCount;
};
if(pageNum<1){
pageNum=1;
};
SwitchPage(pageNum,pageCount);
if(pageNum>0 && pageNum<=pageCount){
innerHml();
};
if(pageNum<=2){
$("#dom-html-num-spot-left").css("display","none");
if(pageNum==1 && pageCount != 1){
$("#dom-ch-page-two").attr("disabled",false);
$("#dom-ch-page-two").css("background","#3dce6f");
};
}else{
$("#dom-html-num-spot-left").css("display","block");
};
if(pageNum>=(pageCount-1)){
$("#dom-html-num-spot").css("display","none");
}else{
$("#dom-html-num-spot").css("display","block");
}
});
function pageSwitch(){
//pageNum=1;
SwitchPage(pageNum,pageCount);
let pageSwitchBtn = $(".dom-ch-page");
let numSwitchBtn = $(".dom-html-num");
for(let jnum=0;jnum<numSwitchBtn.length;jnum++){
((jnum)=>{
numSwitchBtn[jnum].onclick=function(){
pageNum=numSwitchBtn[jnum].innerHTML;
SwitchPage(pageNum,pageCount);
if(pageNum>0 && pageNum<=pageCount){
innerHml();
};
if(pageNum<=2){
$("#dom-html-num-spot-left").css("display","none");
if(pageNum==1){
$("#dom-ch-page-two").attr("disabled",false);
$("#dom-ch-page-two").css("background","#3dce6f");
};
}else{
$("#dom-html-num-spot-left").css("display","block");
};
if(pageCount>2){
if(pageNum>=(pageCount-1)){
$("#dom-html-num-spot").css("display","none");
}else{
$("#dom-html-num-spot").css("display","block");
};
}
};
})(jnum);
};
for(let inum=0;inum<pageSwitchBtn.length;inum++){
((inum)=>{
pageSwitchBtn[inum].onclick=function(){
if(inum=='0'){
pageNum--;
if(pageNum<=1){
pageNum=1;
};
if(pageNum<=2){
$("#dom-html-num-spot-left").css("display","none");
if(pageNum<=2 && pageCount>2){
$("#dom-html-num-spot").css("display","block");
};
if(pageNum==1){
$("#dom-ch-page-two").attr("disabled",false);
$("#dom-ch-page-two").css("background","#3dce6f");
};
}else{
if(pageNum>=(pageCount-1)){
$("#dom-html-num-spot").css("display","none");
}else{
$("#dom-html-num-spot").css("display","block");
};
};
SwitchPage(pageNum,pageCount);
if(pageNum>0 && pageNum<=pageCount){
innerHml();
};
}else if(inum=='1'){
pageNum++;
SwitchPage(pageNum,pageCount);
if(pageNum>=pageCount){
pageNum=pageCount;
if(pageNum==pageCount){
$("#dom-html-num-spot").css("display","none");
}
};
if(pageNum<=2){
$("#dom-html-num-spot-left").css("display","none");
}else{
$("#dom-html-num-spot-left").css("display","block");
};
if(pageNum>0 && pageNum<=pageCount){
innerHml();
if(pageNum==pageCount || pageNum==(pageCount-1)){
$("#dom-html-num-spot").css("display","none");
}
};
}else{
return;
}
};
})(inum);
};
};
function innerHml(){
var that=this;
$.ajax({
cache:true,
type:"GET",
url:"./data/****.php",
data:{
pageNum:pageNum
},
async:false,
success:function(data){
var result_y=(JSON.parse(data))[1];
var relHtml="";
var start_str="";
pageCount= (JSON.parse(data))[2];
pageSwitch();
let planString,plid,libraryString,purchaseString;
for(var i=0;i<result_y.length;i++){
relHtml+=`
<tr class="excel-data-box">
...
</tr>
`;
start_str="";
};
$("#dev-data-search").html(relHtml);
},
error:function(){
alert("请求出错了！");
}
})
}
$(function(){
innerHml();
})