javascript - 如何使用 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

我只完成了分页部分和您的行。构建表 w.r.t 下面的代码。每行都提供注释。有什么疑问可以问我。每页载入 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 i.e 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>