У меня есть HTML-код, и он отлично работает для небольшого файла JSON и правильно отображает данные в HTML-таблице. Но моя проблема сейчас в том, что у меня есть большой файл JSON около 15000 строк таблицы HTML. Так что моя страница не отвечает. Как я могу разбить 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>