如何使用 jquery 在表格上添加分页？

Question

我有一个表，其中包含从本地磁盘获取的 JSON 格式的数据，我使用 getJSON 方法读取所有数据并将其放入表中，另一方面，我将 json 数据存储到本地存储中以进行编辑和删除操作，我只想添加分页，以便我在页面上看到有限的记录。我不知道如何在表格上进行分页我如何通过 jquery 做到这一点？

Javascript

$.getJSON("2-fedtest.json", function(data) {
                    if (localStorage.getItem("2_fedtest_json_file") == undefined) {
                        trans = data.listing_data;
                        localStorage.setItem('2_fedtest_json_file', JSON.stringify(trans));
                    } else {
                        trans = JSON.parse(localStorage.getItem("2_fedtest_json_file"));
                    }
                    response(trans);
                });


                function response(e) {
                    let table = document.getElementById("transaction_table");
                    let row, cell, button;
                    for (let i = 0; i < e.length; i++) {
                        row = table.insertRow();
                        cell = row.insertCell();
                        cell.textContent = e[i].document_first_name;
                        cell = row.insertCell();
                        cell.textContent = e[i].email;
                        cell = row.insertCell();
                        cell.textContent = e[i].document_dob;
                        cell = row.insertCell();
                        cell.textContent = e[i].used_services_in_request;
                        cell = row.insertCell();
                        const detailbutton = document.createElement("button");
                        ////////////// Detail Button///////////
                        detailbutton.id = i;
                        detailbutton.innerHTML = 'Detail';
                        $(detailbutton).click(function(e) {
                            var button_click_id = detailbutton.id;
                        });
                        cell.appendChild(detailbutton);

                        ////////// Edit Button///////////////
                        cell = row.insertCell();
                        const editebutton = document.createElement("button");
                        editebutton.id = i;
                        editebutton.innerHTML = 'Edit'; 
                        $(editebutton).click(function(e) { 
                            var button_click_id = detailbutton.id;
                        });
                        cell.appendChild(editebutton);
                        ////////End Edit Button//////////////
                        // 
                        ///////Delete Button////////
                        cell = row.insertCell();
                        const deletebutton = document.createElement("button");
                        deletebutton.style.color = "#fff";
                        deletebutton.id = i;
                        deletebutton.style.background = "red";
                        deletebutton.innerHTML = 'Delete';
                        $(deletebutton).click(function(e) {

                        });
                        cell.appendChild(deletebutton);

                    }
                });

HTML

<table id="transaction_table" class="pagination">
       <tr> 
         <th id="detail">Detail</th>
         <th id="detail">Edit</th>
         <th id="detail">Delete</th>
       <tr>
</table>

Answer 1

如果您的程序已经拥有所有可用数据，那么我想您真正需要做的就是隐藏除第一个 n 之外的所有元素，其中 n 是页面大小。然后添加一个带有事件侦听器的“下一个”按钮，该事件侦听器将隐藏当前的 n 个项目，同时在单击时显示下一个 n。一个简单的变量作为页码计数器，在按下下一个时递增并用于索引要显示的相关行，在那里可以正常工作。您还可以添加一个“上一个”按钮来执行与上述相反的操作。