在JSON文件中仅加载2000个结果中的500个结果，并使用和附加加载更多按钮

Question

我使用这段代码从JSON数据动态构建一个表。

然而，2000行对于某些设备来说太多了，基本上会使页面崩溃。为了解决这个问题，我用CSS隐藏了前500个结果之外的所有结果，目的是添加一个load all按钮。

但是，当您单击一个列标题来对表格进行排序时，这并不起作用。它仍然对2000个结果进行排序，而不是产生问题的500个结果。

有没有一种方法只调用JSON文件的前500个结果，然后使用"load all“函数在”按钮单击“时加载剩余的数据，以便在不需要时没有不必要的数据需要排序？

我尝试过jQuery .slice，但这基本上和我正在使用的CSS display:none是一样的，所以不起作用。我认为.hide/.show也是这样做的。

例如，有没有一个函数可以抓取JSON，对其进行排序，然后忽略不在前500名中的所有内容，还有一个函数可以在单击load all按钮时加载所有数据？

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(?=(\d{3})+(?!\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>

​

Answer 1

最好是在服务器端执行分页，但是如果目前不能这样做，那么您可以尝试使用lodash库来执行分页，并运行以下语句：

const result = _.take(_.drop(yourJSONData, skipCount), takeCount);

_.drop方法基本上会跳过skipCount个记录，然后._take方法将接受takeCount no。在那之后的记录。

假设你设置了skipCount = 2，takeCount = 10，yourJSONDATA.length是20，那么result基本上就包含了第3-13行。

您还可以使用_.sortBy方法对数据进行排序。

如果需要，您可以在here中试验不同的lodash方法。

Answer 2

使用LokiJS数据库，在数据库中加载JSON，排序，得到第一个结果。

https://techfort.github.io/LokiJS/

如何将JSON文件加载到数据库中

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 --只需要传递一个属性名，你的结果集就会按这个值进行排序。

排序-允许您提供自己的比较函数来对结果集进行排序。