Detailed explanation of how to use JavaScript paging component

Detailed explanation of how to use JavaScript paging component

The pagination component is a common component in web development. Please complete the pagination function and complete the pagination display part in the DOM element with the id jsPagination. The requirements are as follows

1. Display up to 5 pages in a row, with the current page highlighted in the center (as shown in demo1)
2. When total is 0, hide the entire element (as shown in demo2)
3. If total <= 5, display all pages and hide the "first page" and "last page" elements (as shown in demo3)
4. When the current page is less than 5 pages in the center, add 5 pages to the back (front) and hide the "first page" ("last page") elements (as shown in demo4 and demo5)
5. total and current are both positive integers, 1 <= current <= total

Use native JS to implement the paging component to meet the above requirements. The following points should be noted

1: When getting the <li> tag, since there is a text node between the previous <li> tag and the next <li> tag, nextSibling needs to be used twice.

page = page.nextSibling.nextSibling;

2: The innerHTML of the provided <li> tag is '', and the page number needs to be added to it. Write according to the five situations in the requirements

3: Pay special attention to the hidden status of the first and last pages. When current-2<=1, hide the first page; when current+2.>=total, hide the last page. The need to hide the first page and last page exists in the above demo1, demo3, demo4, and demo5. (The hiding of the first and last pages of demo1 is easily overlooked!)

HTML

<ul class="pagination" id="jsPagination">
    <li>Home</li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li>Last page</li>
</ul>

CSS

.hide{
    display: none!important;
}
.pagination{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    text-align: center;
}
.pagination li{
    display: inline-block;
    width: 30px;
    height: 30px;
    overflow: hidden;
    line-height: 30px;
    margin: 0 5px 0 0;
    font-size: 14px;
    text-align: center;
    border: 1px solid #00bc9b;
    color: #00bc9b;
    cursor: pointer;
}
.pagination li.current,
.pagination li:hover{
    background: #00bc9b;
    color: #ffffff;
}
.demo {
    margin: 10px 0;
    padding: 10px;
    background: #eeeeee;
    text-align: center;
}

JavaScript

function pagination(total, current) {
        var ele = document.getElementById('jsPagination');
        //for demo1
        if(current-2>=1&¤t+2<=total)
        {
            var page=ele.firstChild.nextSibling;
            if(current-2==1)
                page.className='hide';
            for(var i=current-2,p=current-2;i<=current+2;p++,i++)
            {
                page=page.nextSibling;
                console.log(page);
                page=page.nextSibling;
                console.log(page);
                page.innerHTML=i;
                if(i==current)
                    page.className='current';
            }
            if(current+2==total)
            {
                var last=page.nextSibling.nextSibling;
                last.className='hide';
            }
        }
        //for demo2
        else if(total==0)
        {
            ele.className='pagination hide';
        }
        //for demo3
        else if(total<=5)
        {
            var fir=ele.firstChild.nextSibling;
            fir.className='hide';
            var page=fir;
            for(var i=1;i<=5;i++) {
                page = page.nextSibling.nextSibling;
                if (i <= total) {
                    page.innerHTML=i;
                    if(i==current)
                        page.className='current';
                }
                else
                {
                    page.className='hide';
                }
 
            }
            var last=page.nextSibling.nextSibling;
            last.className='hide';
        }
        //for demo4
        else if(current-2<=0)
        {
            var page=ele.firstChild.nextSibling;
            page.className='hide';
            for(var i=1;i<=5;i++) {
                page = page.nextSibling.nextSibling;
                page.innerHTML=i;
                    if(i==current)
                        page.className='current';
            }
 
        }
        //for demo5
        else if(current+2>total)
        {
            var page=ele.firstChild.nextSibling;
            for(var i=total-4;i<=total;i++) {
                page = page.nextSibling.nextSibling;
                page.innerHTML=i;
                if(i==current)
                    page.className='current';
            }
            var last=page.nextSibling.nextSibling;
            last.className='hide';
 
        }
}

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:
  • Vue.js paging component implementation: detailed explanation of the use of diVuePagination
  • Vuejs2.0 implements the method of using $emit to listen to events and transmit data in paging components
  • An example of using angularjs directive to implement paging components
  • Reactjs implements the example code of the universal paging component
  • Native js writes object-oriented paging components
  • Vue.js implements a custom paging component vue-paginaiton
  • Using vue.js to create paging components
  • Table paging component based on Vue.js
  • Detailed explanation of the usage of js multi-functional paging component layPage
  • Share a simple javascript paging component written by myself

<<:  MySQL 8.0.17 installation and usage tutorial diagram

>>:  mysql-8.0.17-winx64 deployment method

Recommend

Analysis of Nginx Rewrite usage scenarios and configuration methods

Nginx Rewrite usage scenarios 1. URL address jump...

How to change $ to # in Linux

In this system, the # sign represents the root us...

Detailed explanation of Vue-Jest automated testing basic configuration

Table of contents Install Configuration Common Mi...

MySQL database migration quickly exports and imports large amounts of data

Database migration is a problem we often encounte...

Detailed explanation of using Docker to build externally accessible MySQL

Install MySQL 8.0 docker run -p 63306:3306 -e MYS...

CentOS method to modify the default ssh port number example

The default ssh port number of Linux servers is g...

Detailed explanation of MySQL information_schema database

1. Overview The information_schema database is th...

Understanding the Lazy Loading Attribute Pattern in JavaScript

Traditionally, developers create properties in Ja...

How to migrate local mysql to server database

We can use the scp command of Linux (scp cannot b...

Introduction to NFS service construction under Centos7

Table of contents 1. Server 2. Client 3. Testing ...

js to achieve sliding carousel effect

This article shares the specific code of js to ac...

Detailed graphic explanation of mysql query control statements

mysql query control statements Field deduplicatio...

Detailed explanation of the English names corresponding to the font-family of Chinese fonts in CSS styles

Songti: SimSun Bold: SimHei Microsoft YaHei: Micr...

Difference between MySQL update set and and

Table of contents Problem Description Cause Analy...

Detailed explanation of JSONObject usage

JSONObject is just a data structure, which can be...