在 JavaScript 中为任何表格添加分页

最新推荐文章于 2024-05-09 23:45:32 发布

allway2

最新推荐文章于 2024-05-09 23:45:32 发布

阅读量1.8k

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/allway2/article/details/123911982

版权

分页是每个人都讨厌在他们的网站上实现的那些事情之一，并且在数据大小需要它之前我们会避免这样做。或者直到页面太长以至于滚轮断开并且浏览器崩溃。并且有充分的理由。通常，这是一项有些乏味且不必要的复杂任务。但是一项非常需要的繁琐而复杂的任务。以下脚本旨在一劳永逸地处理 HTML 表格的所有客户端分页。

要详细了解分页逻辑的工作原理，请随时查看我的博客文章。

只要它有助于您的编码之旅，请随意使用它并以您希望的任何方式进行修改。我只想问，如果你这样做的话，你会以我的方式说些客气话。

在我们开始之前，如果您对 JavaScript 比较陌生，那么我推荐使用 HTML、CSS、JavaScript 和 jQuery 进行网页设计作为一本很好的书籍和一个很好的起点。

一个简单的例子，让您享受观看乐趣。

每页 2 行

指数	Name	地址	电话
3	玛丽·s。	123假圣	333-333-3333
4	南希·s。	123假圣	333-333-3333

这个怎么运作

整个过程非常简单，并且混淆了开发人员的大部分复杂性。只需将脚本添加到您的站点并按照以下步骤操作，您就可以在不到 100 行代码中进行即时客户端分页。

1.将分页类添加到要添加分页的每个表中。

2.设置数据集值中每页、每张表的记录元素数，如下所示：

<table class="pagination" data-pagecount="3">

就是这样。分页完成。这里有几个例子可以再次为您带来寻呼乐趣。

每页 2 条记录

指数	Name	地址	电话
1	鲍勃.	123假圣	333-333-3333
2	鲍勃.	123假圣	333-333-3333

每页 3 条记录

指数	Name	地址	电话
1	鲍勃.	123假圣	333-333-3333
2	鲍勃.	123假圣	333-333-3333
3	鲍勃.	123假圣	333-333-3333

这只是我必须再次提及的客户端实现，适用于小型数据集。如果您要处理数千条记录，那么您肯定需要服务器端实现。我将在以后的帖子中介绍。

但是，与此同时，请尽情享受脚本并随意使用它。快乐编码！

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script>
            var perPage = 20;

            function genTables() {
                var tables = document.querySelectorAll(".pagination");
                for (var i = 0; i < tables.length; i++) {
                    perPage = parseInt(tables[i].dataset.pagecount);
                    console.log(perPage);
                    createFooters(tables[i]);
                    createTableMeta(tables[i]);
                    loadTable(tables[i]);
                }
            }

// based on current page, only show the elements in that range
            function loadTable(table) {
                var startIndex = 0;

                if (table.querySelector('th'))
                    startIndex = 1;

                console.log(startIndex);

                var start = (parseInt(table.dataset.currentpage) * table.dataset.pagecount) + startIndex;
                var end = start + parseInt(table.dataset.pagecount);
                var rows = table.rows;

                for (var x = startIndex; x < rows.length; x++) {
                    if (x < start || x >= end)
                        rows[x].classList.add("inactive");
                    else
                        rows[x].classList.remove("inactive");
                }
            }

            function createTableMeta(table) {
                table.dataset.currentpage = "0";
            }

            function createFooters(table) {
                var hasHeader = false;
                if (table.querySelector('th'))
                    hasHeader = true;

                console.log(hasHeader);
                var rows = table.rows.length;

                if (hasHeader)
                    rows = rows - 1;

                var numPages = rows / perPage;
                var pager = document.createElement("div");

                // add an extra page, if we're
                if (numPages % 1 > 0)
                    numPages = Math.floor(numPages) + 1;

                pager.className = "pager";
                for (var i = 0; i < numPages; i++) {
                    var page = document.createElement("div");
                    page.innerHTML = i + 1;
                    page.className = "pager-item";
                    page.dataset.index = i;

                    if (i == 0)
                        page.classList.add("selected");

                    page.addEventListener('click', function () {
                        var parent = this.parentNode;
                        var items = parent.querySelectorAll(".pager-item");
                        console.log(items.length);
                        for (var x = 0; x < items.length; x++) {
                            items[x].classList.remove("selected");
                        }
                        this.classList.add('selected');
                        table.dataset.currentpage = this.dataset.index;
                        loadTable(table);
                    });
                    pager.appendChild(page);
                }

                // insert page at the top of the table
                table.parentNode.insertBefore(pager, table);
            }

            window.addEventListener('load', function () {
                genTables();
            });
        </script>
        <style>
            /*
            PAGINATION
            */
            .pagination tr.inactive
            {
                display: none;
            }

            .pager
            {
                padding: 10px 0px;
            }

            .pager .pager-item
            {
                padding: 10px;
                border: solid 1px #fff;
                text-align: center;
                display: inline-block;
                cursor: pointer;
                background-color: #1caff6;
                transition: .5s background-color;
                color: White;
            }

            .pager .pager-item:hover
            {
                background-color: #0e384c;
            }

            .pager .pager-item.selected
            {
                background-color: #0e384c;
            }
        </style>
    </head>
    <body>
        <p>
            A quick example for your viewing pleasure.
        </p>

        <div><strong>2 rows per page</strong></div>
        <table style="width:100%" class="pagination data-table table" data-pagecount="2" border="1">
            <thead>
                <tr>
                    <th>Index</th>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Phone</th>
                </tr>
            </thead>

            <tbody><tr>
                    <td>1</td>
                    <td>bob s.</td>
                    <td>123 fake st</td>
                    <td>333-333-3333</td>
                </tr>

                <tr>
                    <td>2</td>
                    <td>steve q.</td>
                    <td>123 fake st</td>
                    <td>333-333-3333</td>
                </tr>

                <tr>
                    <td>3</td>
                    <td>mary m s.</td>
                    <td>123 fake st</td>
                    <td>333-333-3333</td>
                </tr>

                <tr>
                    <td>4</td>
                    <td>nancy s.</td>
                    <td>123 fake st</td>
                    <td>333-333-3333</td>
                </tr>
            </tbody>
        </table>


    </body>
</html>

allway2

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
在 JavaScript 中为任何表格添加分页

分页是每个人都讨厌在他们的网站上实现的那些事情之一，并且在数据大小需要它之前我们会避免这样做。或者直到页面太长以至于滚轮断开并且浏览器崩溃。并且有充分的理由。通常，这是一项有些乏味且不必要的复杂任务。但是一项非常需要的繁琐而复杂的任务。以下脚本旨在一劳永逸地处理 HTML 表格的所有客户端分页。要详细了解分页逻辑的工作原理，请随时查看我的博客文章。只要它有助于您的编码之旅，请随意使用它并以您希望的任何方式进行修改。我只想问，如果你这样做的话，你会以我的方式说些客气话。在我们开始之前，如果您对
复制链接

扫一扫