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

爱被打了一巴掌 2023-09-30 12:31 7阅读 0赞

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

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

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

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

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

**每页 2 行**

### **这个怎么运作** ###

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

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

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

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

**每页 2 条记录**

**每页 3 条记录**

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

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

<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>

[Link 1]: https://www.thatsoftwaredude.com/content/6125/how-to-paginate-through-a-collection-in-javascript
[HTML_CSS_JavaScript _ jQuery]: https://amzn.to/2l8Hf0A