在 JSON 文件中仅加载 2000 个结果中的 500 个，并带有附加加载更多按钮
Posted
技术标签:
【中文标题】在 JSON 文件中仅加载 2000 个结果中的 500 个，并带有附加加载更多按钮【英文标题】：Only Load 500 of the 2000 results in the JSON file with and Additional Load More Button 【发布时间】：2021-01-24 09:33:25 【问题描述】：我使用此代码从 JSON 数据动态构建表。
但是，2000 行对于某些设备来说太多了，基本上会导致页面崩溃。为了解决这个问题，我用 CSS 隐藏了除了前 500 个结果之外的所有结果，目的是添加一个load all 按钮。
但是，当您单击列标题对表格进行排序时，这不起作用。它仍然对 2000 个结果进行排序，而不是对产生问题的 500 个结果进行排序。
有没有办法只调用 JSON 文件中的前 500 个结果，按排名顺序，然后使用“加载所有”函数在“按钮单击”时加载剩余数据，这样就没有不需要时对不必要的数据进行排序？
我尝试了 jQuery .slice，但这与我已经在使用的 CSS display:none 基本相同，所以不起作用。我认为.hide/.show 也是如此。
例如，是否有一个函数可以抓取 JSON，对其进行排序，然后忽略不在前 500 名中的所有内容，以及一个可以在单击加载全部按钮时加载所有数据的函数？
Live Site
// Table builder
$.getJSON('https://lbrynomics.com/data/top_2000.json', function(data)
var humanTimeSub = `$data.human_time_utc`
$(".human-time-sub").html(humanTimeSub)
var sub_data = '';
$.each(data.ranks, function(i, rank)
// Rank
sub_data += '<tr class="ln-row" data-top500="' + data.top_500[i] + '" data-rank="' + data.ranks[i] + '" data-new="' + data.new_type[i] + '" lbrychannels="' + data.vanity_names[i].toLowerCase() + '"><td class="rank">' +
rank + '</td>';
// URL Bulider
sub_data += '<td class="channel"><a href="https://odysee.com/@' +
data.vanity_names[i] +
':' +
data.claim_ids[i] +
'" nsfw="' +
data.is_nsfw[i] +
'" grey="' +
data.grey[i] +
'" class="lbry-url" target="_blank" rel="noopener noreferrer" lbrychannel="' + data.vanity_names[i].toLowerCase() + '" title="LBRY Channel: ' + data.titles[i] + '">' +
'<span class="at-sign">@</span>' + data.vanity_names[i] + '</a><span class="tag-1" ' + 'tag1="' + data.vanity_names[i] + '"></span><span class="tag-2" ' + 'tag2="' + data.vanity_names[i] + '"></span><span class="tag-3" ' + 'tag3="' + data.vanity_names[i] + '"></span><span class="tag-4" ' + 'tag4="' + data.vanity_names[i] + '"></span><span class="tag-5" ' + 'tag5="' + data.vanity_names[i] + '"></span><span class="tag-6" ' + 'tag6="' + data.vanity_names[i] + '"></span><span class="tag-7" ' + 'tag7="' + data.vanity_names[i] + '"></span><span class="tag-8" ' + 'tag8="' + data.vanity_names[i] + '"></span></td>';
// LBCs
sub_data += '<td class="lbcs"><a href="https://currencio.co/lbc/usd/' +
Math.ceil(data.lbc[i]) +
'/#' + data.vanity_names[i] +
'" target="_blank" rel="noopener noreferrer" title="Convert ' + Math.ceil(data.lbc[i]).toString().replace(/\B(?=(\d3)+(?!\d))/g, ",") + ' LBC to USD">' +
Math.ceil(data.lbc[i]) +
'</a></td>';
// Followers
sub_data += '<td class="subs">' +
data.subscribers[i] + '</td>';
// Views
sub_data += '<td class="views" data-color="' +
data.views[i] + '"><p>' +
data.views[i] + '</p></td>';
// reposts
sub_data += '<td class="reposts" data-color="' +
data.times_reposted[i] +
'"><p>' +
data.times_reposted[i] + '</p></td>';
// Likes
sub_data += '<td class="olikes"><p>' + data.likes[i] + '</p></td>';
// Dislikes
sub_data += '<td class="odislikes"><p>' + data.dislikes[i] + '</p></td>';
// Folower Change
sub_data += '<td class="follower-change change-color" data-new="' +
data.new_type[i] +
'"data-color="' +
data.change[i] +
'"><p>' +
data.change[i] +
'</p></td>';
// Views Change
sub_data += '<td class="views-change change-color" data-color="' +
data.views_change[i] +
'"><p>' +
data.views_change[i] + '</p></td>';
//Reposts Change
sub_data += '<td class="reposts-change change-color" data-color="' +
data.times_reposted_change[i] +
'"><p>' +
data.times_reposted_change[i] + '</p></td>';
// Rank Change
sub_data += '<td class="rank-change change-color" data-color="' +
data.rank_change[i] +
'"><p>' +
data.rank_change[i] + '</p></td></tr>';
);
$('#sub-stats').append(sub_data);
);
// Sort table
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) => (v1 === null) - (v2 === null) || (isFinite(v1) && isFinite(v2) ?
v1 - v2 : v1.toString().localeCompare(v2))) (getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
document.querySelectorAll('th').forEach(th => th.addEventListener('click', (() =>
const table = th.closest('table');
Array.from(table.querySelectorAll('tr:nth-child(n+2)'))
.sort(comparer(Array.from(th.parentNode.children).indexOf(th), this.asc = !this.asc))
.forEach((tr,i) => tr.querySelector('.rank').innerText=i+1+'';table.appendChild(tr));
))); /* TABLE */
#sub-stats
border: none;
/*border-collapse: inherit;*/
/*margin-right:15px;*/
tr:nth-child(-n+11)
background: rgba(107, 107, 107, 0.3)!important;
tr:nth-child(n+102)
background: rgba(132, 132, 132, 0.09)!important;
#sub-stats td,
#sub-stats th
border: 1px solid #333;
color: #bbb;
transition: 0.3s ease;
#sub-stats tr
background: rgba(93, 94, 97, 0.29);
transition: 0.3s ease;
color: #bbb;
#sub-stats th
background: rgb(49, 49, 49);
color: #777;
cursor: pointer;
#sub-stats th:hover
background: #2d2d2d;
#sub-stats tr:hover
background: rgba(155, 169, 177, 0.22)!important;
transition: 0s ease;
#sub-stats tr:hover td
color: #eee;
transition: 0.3s ease;
#sub-stats .table-header tr:hover
background:none!important;
#sub-stats a
color: #ef436b;
#sub-stats a:visited
color: #ab4e70;
.lbcs a
color: #c3b8a3!important;
padding: 5px 20px;
height: 100%;
display: block;
transition: 0.2s ease;
.lbcs a:hover
color: #fff!important;
box-shadow: inset 0 0 0 1px #5d574e;
background: rgb(0 0 0 / 7%);
transition: 0.2s ease;
td.lbcs
position:relative;
padding: 0!important;
td.lbcs:hover::after
content: "";
position: absolute;
top: 0;
right: 0;
width: 0;
height: 0;
display: block;
border-left: 10px solid transparent;
border-bottom: 10px solid transparent;
border-top: 10px solid #5d574e;
.subs,
.follower-change,
.change, /*delete soon*/
.rank-change,
.views,
.views-change,
.reposts,
.reposts-change,
.lncol3,
.lncol4,
.lncol5
width: 5%;
.rank, .lncol1
width: 2%;
.channel, .lncol2
width: 63%;
.change-info
width: 20%;
background:#286dc1;
color:#fff;
border-radius: 4px 4px 0 0;
padding-top: 8px!important;
padding-bottom: 6px!important;
text-align:center;
.lncol1, .lncol2, .lncol3, .lncol4, .lncol5, .change-info
display:inline-block;
/*Date*/
.data-time
border-radius: 4px;
padding: 4px 10px 3px 10px;
background: #444444;
font-size: 80%;
display: inline-block;
.human-time-sub
color:#777;
.data-time-offline
border: 1px solid red;
border-radius: 4px;
/*color: #FFC107;*/
padding: 4px 8px;
background: #1d1d1d;
font-size: 70%;
position: absolute;
bottom: 7px!important;
.live
font-size: 90%;
border-radius: 4px;
color: #ffa500;
padding: 4px 12px;
background: #1d1d1d;
/*Table Data CSS*/
.over-7-empty
border:none!important;
background:none!important;
.over-7-fill
text-align:center;
background:#286dc1!important;
color:#fff;
border-radius:3px 3px 0 0!important;
border:none;
.over-7-empty, .over-7-fill
pointer-events: none;
.table-header th
color:#fff!important;
border:none!important;
padding: 5px!important;
.table-header tr
background: none!important;
p.table-headers
display: inline-block;
text-align: center;
transform:rotate(-45deg);
.rank-header/*, .channel-header*/
pointer-events:none!important;
td.olikes
color: #c5a855!important;
td.odislikes
color: #c36367!important;
.change-color
color: #00ff8f!important;
.ln-table-header th, .ln-sticky
position: sticky!important;
height: 80px;
z-index:999999!important;
top: -2px;
.ln-table-header th
box-shadow: 0 1px 1px #444;
background: #333333!important;
border: none!important;
padding: 10px 4px 10px 15px!important;
.ln-table-header th.stats-change
background: #393c42!important;
td[data-color*="-"]
color: red!important;
td[data-color="0"]
color: #bbb!important;
/* NEW */
td[data-new^="n"] p
visibility: hidden;
tr[data-new^="n"] td:nth-child(n+10) p
display: none!important;
td:nth-child(9)[data-new="n1"] p:before
visibility: visible;
content: "NEW"!important;
color: #49b9ff;
font-size: 70%;
background: #262626;
padding: 3px 6px;
border-radius: 3px;
margin-left: 14px;
display: inline;
td:nth-child(9)[data-new="n2"] p:before
visibility: visible;
content: "NEW"!important;
color: #ff0052;
font-size: 70%;
background: #262626;
padding: 3px 6px;
border-radius: 3px;
margin-left: 14px;
display: inline;
tr[data-new^="n"]
filter: brightness(1.15)!important;
td[data-new^="n"]
padding-left: 2px!important;
tr[data-new^="n"] td:nth-child(n+9), tr[data-color="null"] td:nth-child(n+9)
border: none!important;
tr[data-new^="n"] a
filter: grayscale(5%) hue-rotate(2deg) brightness(0.95)!important;
td:nth-child(9), td:nth-child(10), td:nth-child(11), td:nth-child(12)
background:rgba(143, 183, 255, 0.07);
/* END NEW */
td a[nsfw="true"],
td a[grey="true"],
a[nsfw="true"]
pointer-events: none;
td a[nsfw="true"]
color:#666!important;
td a[nsfw="true"]:after,
.nsfw
font-size: 70%;
content: "NSFW";
color: #666;
background: #262626;
padding: 3px 6px;
border-radius: 3px;
margin-left: 6px;
.new
font-size: 70%;
color: #49b9ff;
background: #262626;
padding: 3px 6px;
border-radius: 3px;
margin-left: 6px;
.new5
font-size: 70%;
color: #ff0052;
background: #262626;
padding: 3px 6px;
border-radius: 3px;
margin-left: 6px;
#sub-stats tbody
box-shadow: 0 0 35px rgba(0, 0, 0, 0.15), 0 0 12px rgba(0, 0, 0, 0.10);
table.ln-tables
border:none!important;
.ln-tables
display: table-cell;
background:#333!important;
font-size: 0.9em;
.ln-tables .ln-table-header
font-size: 1em;
background:#292929!important;
.entry-content tr td, body.et-pb-preview #main-content .container tr td
padding: 0;
.ln-tables tr td
border-top: 1px solid rgba(121, 121, 121, 0.05) !important;
background:#333!important;
padding: 0 15px;
#sub-stats td
padding:5px 20px;
.ln-tables .views, #view-stats .rank
color:888!important;
.ln-tables th
background: #3e3b3b !important;
color:#777!important;
height: auto!important;
.at-sign
color: #616161;
.ln-tables a
color:#807979;
/*WIDGETS*/
.yts-status::first-letter
text-transform:capitalize!important;
/* Deprecated */
/*
.big-tips-1h a color: #ffd000;
.big-tips-24h a color: #ff0051;
.big-tips-7d a color: #4396ef;
.big-tips-30d a color: #99ff00;
*/
.big-supports-1h a color: #ffd000;
.big-supports-24h a color: #ff0051;
.big-supports-7d a color: #4396ef;
.big-supports-30d a color: #99ff00;
.big-boosts-total a color: #ff00ff;
.ccws2
padding-top: 53px!important;
margin: 50px 0!important;
font-size: 20px!important;
transform:scale(1) rotate(0)!important;
transition: 0.7s ease!important;
background: #262626!important;
cursor: grab;
.ccws2:hover
padding-top: 58px !important;
transform: scale(1.1) rotate(360deg) !important;
transition: 0.7s ease!important;
.ccws2 a
text-shadow: 0 0 11px;
transition: 0.7s ease!important;
.ccws2:hover a
color:#ff0051!important;
transition: 0.7s ease!important;
.ccws2:hover a[nsfw="true"]
color: #444!important;
cursor: not-allowed!important;
.ccwht
height: 7vh!important;
padding: 10px 10px!important;
display: table-cell;
vertical-align: middle!important;
width: 100vw!important;
.ccwht h3
font-size: 0.95rem!important;
transition: .7s ease!important;
vertical-align:middle!important;
padding:0!important;
margin:0!important;
.help:hover p
text-transform: unset!important;
color:#666!important;
font-weight:400!important;
/* Mobile Styles*/
/* Footer Bio */
.bio-img
border-radius:3px;
padding:0;
margin-left:6px;
margin-right:6px;
box-shadow:0 0 8px rgba(0,0,0,0.4);
transition: 0.3s ease;
.bio-img:hover
transform:scale(0.9);
transition: 0.3s ease;
/* Accessability Button */
.control-box
z-index:99999;
.read
filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4));
.read-button
vertical-align: middle!important;
transition: 0.3s ease;
float: left;
margin-right: 10px;
background: #3a3a3a;
border: none;
color: #999;
padding: 5px 10px;
border-radius: 5px;
/*cursor: pointer!important;*/
cursor: not-allowed!important;
.read-button:hover
background: #3f3f3f;
.control-panel .read-button:hover
transform:scale(1)!important;
cursor: initial;
.readability
filter: brightness(1.2) contrast(1.2) saturate(1.1)!important;
.ln-buttons
position: fixed!important;
top: 50%!important;
bottom: auto;
.button-text
position:absolute; top:3px;
left:-20px;
width:100%;
font-size: 0.96em;
/* LBRYnomics Stats */
input#lbry_channel_search
background: #3d3d3d;
border: 1px solid #292929;
color: #ef436b;
padding: 8px 10px;
width: 100%;
margin: 20px 0;
box-shadow: inset 2px 2px 2px 0 rgb(23 23 23 / 23%);
.ln-info-menu-text
display: inline-block;
position: relative;
z-index: 99999999999;
left: 64px!important;
top: 80px;
transform: rotate(90deg);
font-size: 120%;
text-transform: uppercase;
color: #888;
font-weight: bold;
.ln-info
position:absolute;
width:350px;
height:420px;
background:#333;
text-align:left;
margin-left:-232px;
margin-top:-184px;
padding:30px;
border-radius: 0 5px 5px 0;
.lnm-note
display: inline-block;
line-height: 1.4em!important;
font-size: 80%;
padding-top: 10px;
.ln-info:hover
background:#333!important;
.ln-info p
padding-bottom: 2px!important;
font-size: 0.85em;
line-height: 1.8em;
.ln-info h4
padding-bottom: 15px!important;
hr.ln-info-hr
border: 1px solid #3e3e3e!important;
margin:9px 0!important;
.iCharts
.iCharts h2
color:#444;
margin:0;
line-height:1.25em;
padding:20px 4px;
margin-right: 6px;
font-size:1.6vmax;
letter-spacing: 0.02em;
width:100%;
background: linear-gradient(0deg, #282828 0%, #2b2b2b 100%);
.iCharts div
display: flex;
flex-flow:row wrap;
align-items: flex-start;
justify-content: center;
width:100%;
.iCharts h2::before, .flash-icon::before
content: "";
background: #444;
width: 16px;
height: 16px;
display: inline-block;
vertical-align:0.5px;
margin-right: 6px;
border-radius: 50%;
.iCharts div:hover h2::before, .flash-icon::before
background:#b32544!important;
animation: Pulsate 1s ease infinite;
@media (min-width:1600px)
.iCharts h2
font-size:1.8em;
@media (max-width:980px)
.iCharts h2
font-size:3vmax;
@media (min-width:981px) and (max-width: 1200px)
.ccws2
font-size: 22px!important;
text-align: center!important;
background-color: #222!important;
border-radius: 180px 180px 180px 180px!important;
overflow: hidden!important;
border-width: 10px!important;
margin: 20px 0 40px!important;
padding-top: 55px!important;
transform:scale(0.75) rotate(0) !important;
.ccws2:hover
padding-top: 55px!important;
transform:scale(0.85) rotate(359.99deg) !important;
@media (min-width:981px)
.lbry-widgets .lwc1, .lbry-widgets .lwc2, .lbry-widgets .lwc3, .lbry-widgets .lwc4, .lbry-widgets .lwc5
width:100%!important;
margin-right: 1.7%!important;
.lbry-widgets .lwc6
width:100%!important;
margin-right: 0!important;
/*
.ccwht h3
font-size: 0.8rem!important;
transition: .7s ease!important;
*/
@media (min-width: 451px) and (max-width: 980px)
.lbry-widgets .lwc1, .lbry-widgets .lwc2, .lbry-widgets .lwc4, .lbry-widgets .lwc5
width:30%!important;
margin-right: 3.333%!important;
.lbry-widgets .lwc3, .lbry-widgets .lwc3
width:33.333%!important;
margin-right: 0!important;
/*
.ccwht h3
font-size: 0.7rem!important;
transition: .7s ease!important;
*/
@media (max-width:980px)
.logo-box
transform: scale(none) translate(2.6px, 20px);
.logo-box:hover
transform: scale(none) translate(2.6px, 20px);
.lbryn-logo
margin-right: -6px;
.vertical-info-text
position: relative!important;
display:inline-block!important;
.vertical-info-text-hide
display: none!important;
@media (max-width:768px)
.lbryn-logo
margin-right: -5px;
margin-bottom: -12px;
@media (max-width: 700px)
.subs,
.follower-change,
.change, /*delete soon*/
.rank-change,
.views,
.views-change,
.reposts,
.reposts-change
width: 3%;
.rank
width: 1%;
.channel
width: 78%;
.entry-content tr th
padding: 8px 4px!important;
font-size: 70%;
line-height: 1.4em;
.entry-content tr td
/*padding: 4px 6px!important;*/
font-size: 70%;
line-height: 1.3em;
@media (max-width: 450px)
.entry-content tr th
padding: 8px 4px!important;
font-size: 50%;
line-height: 1.4em;
.entry-content tr td
/*padding: 4px 6px!important;*/
font-size: 50%;
line-height: 1.3em;
.lbry-widgets .lwc1, .lbry-widgets .lwc3, .lbry-widgets .lwc5
width:100%!important;
/*margin-right: 1%!important;*/
.lbry-widgets .lwc2, .lbry-widgets .lwc4, .lbry-widgets .lwc6
width:100%!important;
/*margin-right: 0!important;*/
@media (max-width:1340px)
#top-table-box, .lbry-widgets
zoom: 0.9;
.lbry-widgets h3
font-size: 0.8em!important;
line-height: 1.4em!important;
@media (max-width:1200px)
#top-table-box
zoom: 0.8;
th, td, tr, tbody
padding: 2px 6px 2px 12px!important;
.change-panel
width:300px;
@media (max-width:900px)
#top-table-box
zoom: 0.7;
.change-panel
width:300px;
.change-text
top: 0;
position: relative;
@media (max-width:768px)
.change-text
top: 6px;
position: relative;
.control-box
top: 75%!important;
@media (max-width:700px)
.change-panel
width: 208px;
@media (max-width:600px)
#top-table-box
zoom: 0.6;
.change-panel
width: 215px;
.control-box
display:none;
@media (max-width:414px)
#top-table-box
zoom: 0.5;
/* Interactive Charts*/
@media (min-width:1580px)
.chart-buttons
display:none!important;
@media (max-width:1579px)
.chart-warning
.chart-iframe, .chart-title, .chart-titles
display:none;
.chart-buttons
display:inline-block;
margin-bottom:20px;
@media (min-width:1580px)
.chart-warning
display:none!important;
col.all-columns.lnt-column-4
border: 1px solid #999!important;
background: #4e4e4e!important;
color:red!important;
tr[data-top500="false"]
display:none;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="sticky-header" id="sub-stats">
<colgroup>
<col span="1" class="all-columns lnt-column-1">
<col span="1" class="all-columns lnt-column-2">
<col span="1" class="all-columns lnt-column-3">
<col span="1" class="all-columns lnt-column-4">
<col span="1" class="all-columns lnt-column-5">
<col span="1" class="all-columns lnt-column-6">
<col span="1" class="all-columns lnt-column-7">
<col span="1" class="all-columns lnt-column-8">
<col span="1" class="all-columns lnt-column-9">
<col span="1" class="all-columns lnt-column-10">
<col span="1" class="all-columns lnt-column-11">
</colgroup>
<thead class="table-header">
<tr>
<th colspan="8" class="over-7-empty"></th>
<th colspan="4" class="over-7-fill">Change Over 7 Days</th>
</tr>
</thead>
<tr class="ln-table-header ln-sticky">
<th title="Rank For The Current Sorted Column" class="rank-header"><p class="table-headers">Rank</p></th>
<th title="LBRY Channel Name"><p class="table-headers">Channel</p></th>
<th title="Tips + Supports Currently Staked"><p class="table-headers">Value</p></th>
<th title="Total LBRY Channel Followers"><p class="table-headers">Follows</p></th>
<th title="Total LBRY Channel Content Views"><p class="table-headers">Views</p></th>
<th title="Total Amount of Content Reposts"><p class="table-headers">Reposts</p></th>
<th title="Total Odysee likes"><p class="table-headers">Likes</p></th>
<th title="Total Odysee dislikes"><p class="table-headers">Dislikes</p></th>
<th class="stats-change" title="Channel Follower Change Over 7 Days"><p class="table-headers">Follows</p></th>
<th class="stats-change" title="Channel Content Views Change Over 7 Days"><p class="table-headers">Views</p></th>
<th class="stats-change" title="Repost Change Over 7 Days"><p class="table-headers">Reposts</p></th>
<th class="stats-change" title="Rank Change Over 7 Days"><p class="table-headers">Rank</p></th>
</tr>
<tbody>
</tbody>
</table>【问题讨论】：
我不认为你会用 CSS 解决你遇到的问题。您需要处理返回此结果的方式以将其分成块（即：分页）。 这就是重点。我正在寻找一种仅加载 JS 所需的 JSON 的方法。我会更新问题以使其更明显。 取决于“top 500”中的“top”是什么意思。通常，“前 500 名”取决于排序顺序； “排名前 500 名”或“名称前 500 名”。因此，如果您只对 first 500 条记录进行排序，用户可能会误解剩余 1500 条记录中存在哪些数据。仅从服务器获取一些记录取决于服务器返回记录。 【参考方案1】：最好在服务器端执行分页，但如果目前无法实现，那么您可以尝试为此使用 lodash 库并运行以下语句：
const result = _.take(_.drop(yourJSONData, skipCount), takeCount);
_.drop 方法基本上会跳过skipCount 的记录数，然后._take 方法将采用takeCount 没有。之后的记录。
假设您将skipCount = 2、takeCount = 10 和yourJSONDATA.length 设置为20，那么result 将基本上包含第3-13 行。
您还可以使用_.sortBy 方法对数据进行排序。
如果需要，您可以从here 尝试不同的 lodash 方法。
【讨论】：
【参考方案2】：使用 LokiJS 数据库，在数据库中加载 JSON，排序，获得第一个结果。 https://techfort.github.io/LokiJS/
如何将 JSON 文件加载到 db https://github.com/techfort/LokiJS/issues/658
var data = loadPeople();
var db = new loki('test.db');
var people = db.addCollection('people');
people.insert(data);
https://techfort.github.io/LokiJS/tutorial-Query%20Examples.html simplesort - 只需传递一个属性名称，您的结果集就会按此排序。 sort - 允许您提供自己的比较函数来对结果集进行排序。
【讨论】：
以上是关于在 JSON 文件中仅加载 2000 个结果中的 500 个，并带有附加加载更多按钮的主要内容，如果未能解决你的问题，请参考以下文章
使用 Azure 数据工厂从 blob 存储中仅读取一个文件并加载到数据库中
R：在已部署的 ShinyApp 中仅加载一次 .RData
在spring boot中仅获取值而不是JSON响应中的键和值