时间戳

首页 > 解决方案 > 如何在多个页面中破坏 JSON 数据？

javascript - 如何在多个页面中破坏 JSON 数据？

问题描述

我有一个 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>

标签： javascriptphpjqueryhtmlcss

解决方案

你有多种选择

1-使用分页，如 1、2、3、4 等

-> 这可以使用 js 和 php 来完成

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

将 php 与我的 sql 一起使用的示例 https://www.tutorialspoint.com/php/mysql_paging_php.htm

推荐阅读