js object to achieve data paging effect
- 2021-11-24 00:33:16
- OfStack
In this paper, we share the specific code of js object to achieve data paging effect for your reference, the specific contents are as follows
To realize data paging, you should be clear about the design of this aspect:
1. First, simulate the establishment of a background database, as follows:
var peoson=[
{
"id":"1",
" name":" Kiku ",
"sex":" Female ",
"age":"25",
"class":"8 Class ",
"habby":" Dance ",
"score":"40",
"addess":" Chang'an District, Xi'an, Shaanxi Province "
},
{
"id":"2",
" name":" Guan Xiaotong ",
"sex":" Female ",
"age":"20",
"class":"8 Class ",
"habby":" Dance ",
"score":"40",
"addess":" Chang'an District, Xi'an, Shaanxi Province "
},
{
"id":"3",
" name":" Zhao Liying ",
"sex":" Female ",
"age":"26",
"class":"8 Class ",
"habby":" Dance ",
"score":"40",
"addess":" Chang'an District, Xi'an, Shaanxi Province "
},
{
"id":"4",
" name":" Joker Xue ",
"sex":" Male ",
"age":"37",
"class":"8 Class ",
"habby":" Dance ",
"score":"40",
"addess":" Chang'an District, Xi'an, Shaanxi Province "
}
]2. Set the amount of data per page, the current number of pages, and the total number of pages
Set the total number of pages dynamically with functions, and calculate according to the total amount of data divided by the amount of data per page;
Use the function to dynamically set the data in each page by which several items in the total data;
Allpage: function () {
this.allpage = Math.ceil(this.Message.length / this.perpage);
console.log(this.Message.length);
console.log(this.allpage);
},
Nowpagenum:function(n){
var first=(n-1)*this.perpage; //0
var last=n*this.perpage ; //10
this.nowpagenum =this.Message.slice(first,last);
},3. Create dom element dynamically and add sub-elements to the largest block to store every piece of data
Creatnews:function() {
this.list.innerHTML = "";
for (var i = 0; i < this.perpage; i++) {
var page_list = document.createElement("div");
page_list.className = "pagelist";
for (var key in this.nowpagenum[i]) {
var per_child = document.createElement("div");
per_child.className = "perchild";
page_list.appendChild(per_child);
per_child.innerHTML = this.nowpagenum[i][key];
//console.log(this.nowpagenum[i]);
}
this.list.appendChild(page_list);
}
},4. Create the number of pages below the list, indenting forward, backward, and front and back
Assume that the total number of pages is
If the current number of pages is greater than 5, the previous pages will be indented from 2 to the current number of pages minus 1;
If the current page number is less than 16, it will be indented backward
Pages in between are indented before and after.
Page_ma:function(current,totle){
var str="";
for(var i=1;i <=totle;i++){
if(i==2 && current-3>i ){ //ǰ���� current>5
i=current-1;
str+="<li>...</li>";
}
else if(i==current+4 && current+4<totle){
i=totle-1;
str+="<li>...</li>"; //������ current<16
}
else{
if(current==i){
str+="<li class='minilist' style='background: pink'>"+i+"</li>" ;
}
else{
str+="<li class='minilist'>"+i+"</li>";
}
}
}
this .pageshu.innerHTML= str;
},5. When you click on the number of pages, you will jump to the data of the current page and indent it accordingly
Pageclick:function(){
var mini_list=document.getElementsByClassName ("minilist");
for(var k=0;k <mini_list.length;k++){
mini_list[k].onclick=function(){
Fenye.nowpage=parseInt (this.innerHTML );
// console.log(this.innerHTML); //mini_list[k] ������ı�
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
}6. When you click the next page and set the number of pages to jump, you will jump to the data of the current page and indent it accordingly
Clickevent:function(){
Fenye. back.onclick =function(){
Fenye.nowpage--;
if(Fenye.nowpage<2){
Fenye.nowpage=1;
}
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
};
Fenye.go.onclick =function(){
if(Fenye.nowpage>=Fenye.allpage){
Fenye.nowpage=Fenye.allpage;
}
Fenye.nowpage++;
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
};
Fenye.tiao.onclick =function(){
var put=document.getElementById ("in_put");
Fenye.nowpage = parseInt (put.value ) ;
if(put.value>=Fenye.allpage){
Fenye.nowpage = parseInt (put.value );
}
Fenye.Page_ma(Fenye.nowpage,Fenye.allpage);
Fenye.Pageclick();
Fenye.Creatnews ();
Fenye.Nowpagenum (Fenye.nowpage);
}
}html and css sections
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/message1.js " type="text/javascript "></script>
<script src="js/pagenews.js " type="text/javascript "></script>
<style>
*{
margin:0;
padding:0;
}
li{
list-style: none;
}
.block{
position: relative;
width:1200px;
height:600px;
margin:auto;
border:1px solid darkblue;
}
.totle {
width:100%;
height:40px;
display: flex;
flex-direction: row;
flex:1;
background: #b0ffd8;
text-align: center;
color: #5c5a5c;
font-size: 18px;
line-height: 40px;
}
.tot_1 {
flex: 1;
}
.tot_2{
flex:2.5;
}
.list{
width:1200px;
height:auto;
}
.pagelist{
width:100%;
height:35px;
border-bottom: 1px solid silver;
display: flex;
flex-direction: row;
text-align: center;
}
.perchild:nth-child(1) {
flex:1;
}
.perchild:nth-child(2) {
flex:1;
}
.perchild:nth-child(3) {
flex:1;
}
.perchild:nth-child(4) {
flex:1;
}
.perchild:nth-child(5) {
flex:1;
}
.perchild:nth-child(6) {
flex:1;
}
.perchild:nth-child(7) {
flex:1;
}
.perchild:nth-child(8) {
flex:2.5;
background: pink ;
}
.footer{
position: absolute;
bottom:5px;
left:10px;
}
#pageshu> li{
width:35px;
height:35px;
line-height: 35px;
display: inline-block;
text-align: center;
border:1px solid gray;
}
#back, #go{
width:60px;
height:35px;
line-height: 35px;
border:1px solid black;
display: inline-block;
text-align: center;
}
#foot_li>li:nth-child(2), #foot_li>li:nth-child(4), #foot_li>li:nth-child(5),#foot_li>li:nth-child(6){
display: inline-block;
}
#foot_li>li:nth-child(4)>input{
width:30px;
height:20px;
outline: none;
}
#foot_li>li:nth-child(5)>button{
background: #000bff;
color: #fff;
}
</style>
</head>
<body>
<div class="block">
<div class="totle">
<div class="tot_1"> Student number </div>
<div class="tot_1"> Name </div>
<div class="tot_1"> Gender </div>
<div class="tot_1"> Age </div>
<div class="tot_1"> Class </div>
<div class="tot_1"> Hobbies </div>
<div class="tot_1"> Credit </div>
<div class="tot_2"> Home address </div>
</div>
<div class="list">
</div>
<div class="footer">
<ul id="foot_li">
<li id="back"> Upper 1 Page </li>
<li>
<ul id="pageshu">
</ul>
</li>
<li id="go"> Under 1 Page </li>
<li> Jump to <input id="in_put" type="text"/> </li>
<li><button id="tiao"> Jump </button></li>
<li> Total pages :<span id="tot"></span></li>
</ul>
</div>
</div>
</body>
</html>