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