如何使用 JS 或 JQuery 对表格进行滚动加载？

Question

我想为一些 json 数据做一个搜索过滤器。 现在我想如果我加载 7'000'000 记录浏览器崩溃，我需要加载滚动 bc。 我将 JSON 加载到表中，因为它对用户更友好。 像这样我创建了表格。

var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    myObj = JSON.parse(this.responseText);
    // txt += "<table border='1'>"
    // txt += "<tr><th>Count</th><th>Time</th><th>Log</th></tr>"
    // txt += "<table id='logs'>"
    // for (x in myObj) {
    //   txt += "<tr><td>" + myObj[x][1] + "</td><td>" + myObj[x][2] + "</td><td>" + myObj[x][3] + "</td></tr>";
    // }
    // txt += "</table>"    
    // document.getElementById("demo").innerHTML = txt;

    txt += "<div class=table table--responsive>"
      txt += "<div class=table__wrapper>"
      txt += "<table data-init=auto id='logs'>"
      txt += "<thead><tr><th data-type=text>Count</th><th data-type=text>Time</th><th data-type=text>Log</th></tr></thead>"
      txt += "<tbody>"
      for (x in myObj) {
        txt += "<tr><td>" +  myObj[x][1] + "</td><td>" + myObj[x][2] + "</td><td>" + myObj[x][3] + "</td><td class=text-align-right></tr>";
      }
      txt += "</tbody>"
      txt += "</table>"
        txt += "</div>"  
      txt += "</div>"    
      document.getElementById("demo").innerHTML = txt;
  }
};
xmlhttp.open("GET", JSONPath, true);
//xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(dbParam);

这是用于搜索的 JQuery 的样子：

$(document).ready(function(){
  $("#site-search").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#logs > tbody > tr").filter(function() {
      $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
  });
});

我会非常感谢您的帮助。

Answer 1

我只做了分页部分和你的行。 在代码下方构建表格。 每行都提供注释。 有什么疑问可以问我。 每页加载 500 条记录。 浏览器不会崩溃。

 var Cur_Page = 1; // Your Current page var records_per_page = 5; // Total No. Of Recs per page var DataList = [ { Hello123: "Hello123 1"}, { Hello123: "Hello123 2"}, { Hello123: "Hello123 3"}, { Hello123: "Hello123 4"}, { Hello123: "Hello123 5"}, { Hello123: "Hello123 6"}, { Hello123: "Hello123 7"}, { Hello123: "Hello123 8"}, { Hello123: "Hello123 9"}, { Hello123: "Hello123 10"}, { Hello123: "Hello123 11"}, { Hello123: "Hello123 12"}, { Hello123: "Hello123 13"}, { Hello123: "Hello123 14"}, { Hello123: "Hello123 15"}, { Hello123: "Hello123 16"}, { Hello123: "Hello123 17"}, { Hello123: "Hello123 18"}, { Hello123: "Hello123 19"}, { Hello123: "Hello123 20"}, { Hello123: "Hello123 21"}, { Hello123: "Hello123 22"}, { Hello123: "Hello123 23"}, { Hello123: "Hello123 24"}, { Hello123: "Hello123 25"}, { Hello123: "Hello123 26"}, { Hello123: "Hello123 27"}, { Hello123: "Hello123 28"}, { Hello123: "Hello123 29"}, { Hello123: "Hello123 30"} ]; // Can be obtained from another source, such as your DataList variable function prevPage() { if (Cur_Page > 1) { Cur_Page--; // Decrement the Page No . If i click on prevPage. changePage(Cur_Page); } } function nextPage() { if (Cur_Page < numPages()) { Cur_Page++; changePage(Cur_Page); } } function changePage(page) { var btn_next = document.getElementById("btn_next"); var btn_prev = document.getElementById("btn_prev"); var DataList_Table = document.getElementById("DataListTable"); var page_span = document.getElementById("page"); // Validate page if (page < 1) page = 1; if (page > numPages()) page = numPages(); DataList_Table.innerHTML = ""; // Below code you should change it to table > tr > td . I have written simply // Display only 500 Recs. So that your Browser doesn't get crash. for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < DataList.length; i++) { DataList_Table.innerHTML += DataList[i].Hello123 + "<br>"; } page_span.innerHTML = page + "/" + numPages(); if (page == 1) { btn_prev.style.visibility = "hidden"; } else { btn_prev.style.visibility = "visible"; } if (page == numPages()) { btn_next.style.visibility = "hidden"; } else { btn_next.style.visibility = "visible"; } } function numPages() { return Math.ceil(DataList.length / records_per_page); // Your Formula is here. // Total No.of Recs / Records per page ie 700000/500 = 14000. } window.onload = function() { changePage(1); // Your first function is called here. };

 <div id="DataListTable"></div> <a href="#" onclick="prevPage()" id="btn_prev">Prev</a> <a href ="#" onclick="nextPage()" id="btn_next">Next</a> page: <span id="page"></span>