How can I make a load on scrolling for a table with JS oder JQuery?

Question

I want to make a search filter for some json data. Now I think I need a load on scrolling bc if I load like 7'000'000 records the browser crash. I load the JSON in a table because its more user friendly. Like this I create the table.

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

And here is what the JQuery for the search looks like:

$(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)
    });
  });
});

I would be really thankfull for some help.

Answer 1

I have done only the pagination part and your rows. Build table wrt below code. Comment is provide in each line. You can ask me if any doubts are there. Load 500 records in each page. Browser does not get crash.

 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>