js object to achieve data paging effect

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;
Use functions to dynamically set which data on each page is from 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. 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;
If the current page number is less than 16, it will be indented backwards, and the pages between the two will be indented forwards and backwards.

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:
  • Detailed explanation of the order of JS object traversal
  • Examples and comparison of 3 methods for deduplication of JS object arrays
  • When to use Map instead of plain JS objects
  • JS object copying (deep copy and shallow copy)
  • Example code for converting camel case to underline in js object attribute name
  • Detailed example of reading speed of js objects

<<:  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

Implementation of Docker private library

Installing and deploying a private Docker Registr...

JavaScript implements product details of e-commerce platform

This article shares a common example of viewing p...

After reading the introduction of CSS box model, you will not be confused

The property names often heard in web design: con...

ThingJS particle effects to achieve rain and snow effects with one click

Table of contents 1. Particle Effects 2. Load the...

CSS Tricks to Create Wave Effects

It has always been very difficult to achieve wave...

Mysql solution to improve the efficiency of copying large data tables

Preface This article mainly introduces the releva...

Detailed explanation of TIMESTAMPDIFF case in MySQL

1. Syntax TIMESTAMPDIFF(unit,begin,end); Returns ...

A simple method to modify the size of Nginx uploaded files

Original link: https://vien.tech/article/138 Pref...

Simple Mysql backup BAT script sharing under Windows

Preface This article introduces a simple BAT scri...

Detailed explanation of using scp command to copy files remotely in Linux

Preface scp is the abbreviation of secure copy. s...

Tutorial on upgrading, installing and configuring supervisor on centos6.5

Supervisor Introduction Supervisor is a client/se...

JavaScript+html to implement front-end page sliding verification (2)

This article example shares the specific code of ...

Detailed explanation of the principles and usage of MySQL data types and field attributes

This article describes the MySQL data types and f...

How to use position:sticky to perfectly solve the problem of small programs adhering to the ceiling

Recently, the client of a project insisted on hav...

Example of using Dockerfile to build an nginx image

Introduction to Dockerfile Docker can automatical...