js to achieve simple front-end paging effect

Some projects have relatively simple business, but front-end paging is used frequently. The size of the plug-in is difficult to control and it is troublesome to use, so I write a simple one myself.

Implementation ideas

Use jQuery.slice() to select the interval elements of the subset, and then control the display and hiding;
Assume that the number of items displayed per page is x, the current page number is y, and the element index starts at 0, then the displayed range is from x(y-1) to xy.

Effect Demonstration

Demo Code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Front-end paging implementation demo</title>
</head>

<body>
    <div class="parent">
        <ul class="box" style="min-height: 147px;">

        </ul>
        <div class="page-box">
            <button class="page-btn prev">Previous page</button>
            <span class="page-num">1/1</span>
            <button class="page-btn next">Next page</button>
        </div>
    </div>

    <div class="parent">
        <ul class="box2" style="min-height: 63px;">

        </ul>
        <div class="page-box">
            <button class="page-btn prev">Previous page</button>
            <span class="page-num">1/1</span>
            <button class="page-btn next">Next page</button>
        </div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        /**
         * Paging initialization* @param {*}eleBox the container to be paged* @param {*}size the number of entries per page*/
        function InitPagination(eleBox, size) {
            var box = $(eleBox),
                children = box.children(),
                total = children.length,
                pageBox = box.next(),
                pageNum = pageBox.find('.page-num'),
                maxNum = !Math.ceil(total / size) ? 1 : Math.ceil(total / size);

            pageNum.text('1/' + maxNum);
            children.hide();
            children.slice(0, size).show();

            pageBox.off().on('click', '.prev, .next', function (e) {
                var nowNum = parseInt(pageNum.text().split('/')[0]);

                if ($(this).hasClass('prev')) {
                    nowNum--;
                    if (nowNum < 1) {
                        nowNum = 1
                        return;
                    }
                } else {
                    nowNum++;
                    if (nowNum > maxNum) {
                        nowNum = maxNum
                        return;
                    }
                }

                children.hide();
                children.slice(size * (nowNum - 1), nowNum * size).show();
                pageNum.text(nowNum + '/' + maxNum);
            })
        }
        // Simulate data writing var box = $('.box'), box2 = $('.box2'), li = '';
        for (let i = 0; i < 16; i++) {
            li += '<li>' + i + '</li>'
        }
        box.html(li);
            box2.html(li);

        // Instantiate the paginator new InitPagination(box, 7)
        new InitPagination(box2, 3)
    </script>
</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:

Native JS to implement paging click control
JS realizes the front-end paging effect
Pure javascript to achieve paging (two methods)
A very good JS paging effect code, worth studying
Using js to create html table paging example (js to implement paging)
Pure js paging code (simple and practical)
JSP paging display implementation code
js paging to display div contents
Simple paging example implemented by JS
Native JS to achieve cool paging effect

<<: MYSQL master-slave replication knowledge points summary

>>: How to purchase and initially build a server

Get the IP and host name of all hosts on Zabbix

js to achieve simple front-end paging effect

Implementation ideas

Effect Demonstration

Get the IP and host name of all hosts on Zabbix

Detailed tutorial on installing Tomcat9 windows service

Detailed explanation of the solution to permission denied in Linux

Detailed graphic tutorial on installing and uninstalling Tomcat8 on Linux

Mysql 8.0.18 hash join test (recommended)

The perfect solution for forgetting the password in mysql8.0.19

A new CSS image replacement technique (background display and text moving off screen) to say goodbye to 9999px

Summary of MySQL InnoDB locks

Detailed tutorial on installing MySQL 8.0.19 in zip version on win10

Sending emails in html is easy with Mailto

Recommend

Summary of 6 skills needed to master web page production

Kali Linux Vmware virtual machine installation (illustration and text)

MySQL data type optimization principles

MySQL 5.7.23 decompression version installation tutorial with pictures and text

Vue application example code based on axios request encapsulation

Sample code for implementing rolling updates of services using Docker Swarm

SQL insert into statement writing method explanation

Priority analysis of and or queries in MySQL

Docker custom network container interconnection

Introduction to HTML Chinese Character Encoding Standard

Compatibility issues when inserting audio files in HTML and playing them in browsers

About the problem that the tomcat deployed application cannot access the front-end page

Analysis of the process of implementing Nginx+Tomcat cluster under Windwos

Let's talk about the size and length limits of various objects in MySQL

How to use geoip to restrict regions in nginx