Question

我有一个html代码，它适用于小型json文件，并且可以在html表中正确显示数据。但是我的问题是，现在我在15000个html表行附近有一个很大的json文件。因此我的页面没有响应。我怎么能打破每页100个结果直到最后一个结果。我正在共享我的html代码。请在我的html文件中添加一些代码，然后粘贴到答案部分

<html>
<header><title>Welcome</title></header>
<body>
<!--javascript make append table data-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$("#userdata tbody").empty();
$(function() {
var user = document.getElementById("userId").value;
    var category = location.search.split('id=')[1]
   $.getJSON('abc.php',{"userId":user,"categoryId":category}, function(data) {
 $.each(data.videos , function(i, v) {
     var link = "youtube.php?id=youtu.be/"+ v.video;
         var tblRows = "<tr>" + "<td>" + v.videoName + "</td>" + "<td>" + v.date + "</td>" +"<td>"+ v.time + "</td>" + "<td>" + v.videoDuration + "</td>" + "<td><a target='_blank' href='"+link+"'>"+"WATCH/DOWNLOAD"+"</a></td>" + "</tr>";
          $(tblRows).appendTo("#userdata tbody");
     });
   });

   $.getJSON('crp.php',{"userId":user,"categoryId":category}, function(data) {
 $.each(data.other , function(i, f) {

        var link =f.pdf;

          tblRows2 = "<tr>" + "<td>" + f.dateText + "</td>" + "<td>" + f.textMessage + "</td>" + "<td><a target='_blank' href='"+link+"'>"+"Click here to Download"+"</a></td>" + "</tr>";
          $(tblRows2).appendTo("#userdata2 tbody");
});
     });
   });
</script>
<!--javascript  append table data ended -->
<!-- user form -->
<form>
    <input id='userId' type="hidden" value="500" placeholder="Enter Your User Id" name="userId" autofocus required>
</form>
<!-- user form -->
<!--table-->
<h1>VIDEO LIST</h1>

<!--<style>
.wrapper {
    table tr td:nth-child(5) {
        background: white;
    }
}

.profile {
table, th, tr {
  border: 5px solid green;
  background:5px black;
  color: white;
  font-weight: bold;
}
}
}

</style>-->

<!--<style>
.button {

  border: 5px solid green;
  background:5px black;
  color: white;
  font-weight: bold;

tr:nth-of-type(odd) {
    background: #eee;
}
}
</style>-->
   <table class="button" id= "userdata" width="100%" border="20">
  <thead>
            <th>VIDEO NAME</th>
            <th>DATE</th>
            <th>TIME</th>
            <th>DURATION</th>
            <th>LINK</th>
        </thead>
        <tbody>
        </tbody>
   </table>
<!--table data end-->
<!--table-->
</body>
<body>
<style>
table tr td:nth-last-of-type(1) {
    background: white;
}
table, th, tr {
  border: 5px solid green;
  background:5px black;
  color: white;
  font-weight: bold;
}
</style>
<h1>PDF LIST</h1>
<div class="wrapper2">
<div class="profile2">
   <table id= "userdata2" width="100%" border="20">
       <thead>
            <th>DATE</th>
            <th>NAME</th>
            <th>LINK</th>
       </thead>
       <tbody>

       </tbody>
   </table>
</tr>
</div>
</div>
</body>
</html>

Answer 1

您有多个选择

使用1、1、2、3、4等分页

->这可以在查询中使用js和php或具有sql设置限制的php来完成，并在选择另一页时进行移动

2延迟滚动加载->可以使用js完成

在我的SQL中使用php的示例 https://www.tutorialspoint.com/php/mysql_paging_php.htm

如何在多个页面中拆分JSON数据？

1 个答案: