js object to achieve data paging effect
|
This article example shares the specific code of js object to achieve data paging effect for your reference. The specific content is as follows To implement data paging, you need to be clear about the design of this aspect: 1. First simulate and establish a backend database , as follows:
var peoson = [
{
"id":"1",
" name":"Ju Jingyi",
"sex":"female",
"age":"25",
"class":"Class 8",
"habby":"dancing",
"score":"40",
"addess":"Chang'an District, Xi'an, Shaanxi"
},
{
"id":"2",
" name":"Guan Xiaotong",
"sex":"female",
"age":"20",
"class":"Class 8",
"habby":"dancing",
"score":"40",
"addess":"Chang'an District, Xi'an, Shaanxi"
},
{
"id":"3",
" name":"Zhao Liying",
"sex":"female",
"age":"26",
"class":"Class 8",
"habby":"dancing",
"score":"40",
"addess":"Chang'an District, Xi'an, Shaanxi"
},
{
"id":"4",
" name":"Xue Zhiqian",
"sex":"male",
"age":"37",
"class":"Class 8",
"habby":"dancing",
"score":"40",
"addess":"Chang'an District, Xi'an, Shaanxi"
}
]2. Set the amount of data per page, the current page number, and the total number of pages Use a function to dynamically set the total number of pages, calculated by dividing the total amount of data by the amount of data per page;
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. Dynamically create DOM elements and add sub-elements to the largest block to store each 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 page numbers below the list, and do front indent, back indent, and front and back indent Assuming the total number of pages is, if the current page number is greater than 5 pages, the front indent will be performed, and the previous page number will be indented from 2 to the current page number minus 1;
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 a page, it will jump to the data of the current page and indent 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.Createnews();
Fenye.Nowpagenum (Fenye.nowpage);
}6. When you click on the previous or next page, or set the page number to jump to, it will jump to the data of the current page and indent 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.Createnews();
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.Createnews();
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.Createnews();
Fenye.Nowpagenum (Fenye.nowpage);
}
}HTML and CSS parts
<!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 ID</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">Credits</div>
<div class="tot_2">Home address</div>
</div>
<div class="list">
</div>
<div class="footer">
<ul id="foot_li">
<li id="back">Previous page</li>
<li>
<ul id="pageshu">
</ul>
</li>
<li id="go">Next 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>The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: How to modify the sources.list of Ubuntu 18.04 to Alibaba or Tsinghua mirror
>>: MySQL implements an example method of logging in without a password
Recommend
Working principle and implementation method of Vue instruction
Introduction to Vue The current era of big front-...
Detailed installation tutorial of mysql-8.0.11-winx64.zip
Download the zip installation package: Download a...
HTML Grammar Encyclopedia_HTML Language Grammar Encyclopedia (Must Read)
Volume Label, Property Name, Description 002 <...
Detailed explanation of the implementation of manual and automatic tracking of WeChat applet (Taro)
If every company wants to increase its user base,...
MySQL 5.7.23 winx64 installation and configuration method graphic tutorial under win10
This article records the installation tutorial of...
Correct modification steps for Docker's default network segment
background A colleague is working on his security...
Docker images export and import operations
What if the basic images have been configured bef...
How to execute Linux shell commands in Docker
To execute a shell command in Docker, you need to...
Implementation of CSS heart-shaped loading animation source code
Without further ado, let me show you the code. Th...
How to add a paging navigation bar to the page through Element UI
need Add a paging bar, which can jump to the page...
How to submit the value of a disabled form field in a form Example code
If a form field in a form is set to disabled, the ...
JavaScript to implement the most complete code analysis of a simple shopping cart (ES6 object-oriented)
This article shares the specific code of JavaScri...
Grid systems in web design
Formation of the grid system In 1692, the newly c...
MySQL slow query pitfalls
Table of contents 1. Slow query configuration 1-1...
Why web page encoding uses utf-8 instead of gbk or gb2312?
If you have a choice, you should use UTF-8 In fac...