我们如何在简单的 HTML 页面中使用 Javascript 实现分页答案

【问题标题】：How can we implement Pagination using Javascript in simple HTML page我们如何在简单的 HTML 页面中使用 Javascript 实现分页
【发布时间】：2020-11-22 01:21:14
【问题描述】：

我正在尝试创建一个带有分页的 HTML 表格。我正在使用 GET api 调用 JSON 数据并将其绑定为动态表格式。通过传递页码在 API 中处理分页。怎样才能用JS简单的处理HTML页面中的分页。

<!DOCTYPE html>
<html>
<head>
    <title>Parent Child Mapping</title>
    <style>
        th,
        td,
        p,
        input {
            font: 14px Verdana;
        }

        table,
        th,
        td {
            border: solid 1px #DDD;
            border-collapse: collapse;
            padding: 2px 3px;
            text-align: center;
        }

        th {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" />
    <p id="showData"></p>
    <div id="" class="pager-nav"></div>
</body>

<script>
    function CreateTableFromJSON() {
        var xhttp = new XMLHttpRequest();
        var myBooks = [];
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                // Typical action to be performed when the document is ready:
                myBooks = JSON.parse(xhttp.responseText);
                console.log("ok" + myBooks);

                // EXTRACT VALUE FOR HTML HEADER. 
                // ('Book ID', 'Book Name', 'Category' and 'Price')
                var col = [];

                for (var i = 0; i < myBooks.length; i++) {
                    for (var key in myBooks[i]) {
                        console.log("myBooks..", myBooks[i])
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                }

                // CREATE DYNAMIC TABLE.
                var table = document.createElement("table");

                // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

                var tr = table.insertRow(-1);                   // TABLE ROW.

                for (var i = 0; i < col.length; i++) {
                    var th = document.createElement("th");      // TABLE HEADER.
                    th.innerHTML = col[i];
                    tr.appendChild(th);
                }

                // ADD JSON DATA TO THE TABLE AS ROWS.
                for (var i = 0; i < myBooks.length; i++) {
                    tr = table.insertRow(-1);
                    for (var j = 0; j < col.length; j++) {
                        var tabCell = tr.insertCell(-1);
                        tabCell.innerHTML = myBooks[i][col[j]];
                    }
                }

                // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
                var divContainer = document.getElementById("showData");
                divContainer.innerHTML = "";
                divContainer.appendChild(table);
            }
        };
        xhttp.open("GET", "http://localhost:3000/", true);
        xhttp.send();
    }
</script>
</html>

这是我为动态表格添加的html代码。

【问题讨论】：

标签： javascript html pagination

【解决方案1】：

您可以在动态表格下创建一行按钮，每个按钮对应您 API 中结果的页码。

在按钮上设置 onclick 事件，以使用正确的参数（即 pageNumber、resultsPerPage）对 API 执行 GET 请求——这取决于 API 的设置方式。

那么你实际上是在做你现在正在做的事情，但具体结果取决于页码和每页的结果/行数。

您还可以缓存结果，以避免在后续点击之前点击的页码时进一步往返。

【讨论】：