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

Docker installation and deployment example on Linux

After reading the following article, you can depl...

Summary of the use of element's form elements

There are many form elements. Here is a brief sum...

Example code for using @media in CSS3 to achieve web page adaptation

Nowadays, the screen resolution of computer monit...

How to use Maxwell to synchronize MySQL data in real time

Table of contents About Maxwell Configuration and...

Summary of common commands for Linux user and group management

This article summarizes the common commands for L...

Method of building docker private warehouse based on Harbor

Table of contents 1. Introduction to Harbor 1. Ha...

Several ways to introduce pictures in react projects

The img tag introduces the image Because react ac...

Summary and practice of javascript prototype chain diagram

Table of contents Prototype chain We can implemen...

Upgrade MySQL 5.1 to 5.5.36 in CentOS

This article records the process of upgrading MyS...

Simple web design concept color matching

(I) Basic concepts of web page color matching (1) ...

Solve the problem of installing Tenda U12 wireless network card driver on Centos7

Solution process: Method 1: The default kernel ve...

Parsing Linux source code epoll

Table of contents 1. Introduction 2. Simple epoll...

Basic knowledge points of mysql worm replication

Worms replicate, as the name implies, by themselv...

Docker installation rocketMQ tutorial (most detailed)

RocketMQ is a distributed, queue-based messaging ...

Detailed explanation of COLLATION examples in MySQL that you may have overlooked

Preface The string types of MySQL database are CH...