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: