我使用此代码从JSON数据动态构建一个表。
然而，对于某些设备来说，2000行太多了，基本上会导致页面崩溃。为了解决这个问题，我用CSS隐藏了除前500名结果外的所有结果，目的是添加一个load all按钮。
但是，当您单击列标题对表进行排序时，这是不起作用的。它仍然对2000份简历进行排序，而不是对500份简历进行分类。
有没有一种方法可以只调用JSON文件中的前500个结果，按排名顺序，然后使用"；全部加载"；将剩余数据加载到"；"按钮点击"；，以便在不需要的时候没有不必要的数据进行排序？
我尝试了jQuery.slice，但这基本上与我已经使用的CSSdisplay:none相同，所以不起作用。我认为.hide/.show也是这样。
例如，是否有一个函数可以获取JSON，对其进行排序，然后忽略前500名之外的所有数据，以及一个函数，当单击"全部加载"按钮时，可以加载所有数据？
现场
// 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>最好在服务器端执行分页，但如果目前无法执行，则可以尝试使用lodash库执行此操作，并运行以下语句：
const result = _.take(_.drop(yourJSONData, skipCount), takeCount);
_.drop方法将基本上跳过skipCount的记录数量，然后._take方法将取takeCount的记录数量。
假设您将skipCount = 2、takeCount = 10和yourJSONDATA.length设置为20，则result基本上包含第3行至第13行
您也可以使用_.sortBy方法对数据进行排序。
如果需要，你可以在这里尝试不同的lodash方法。
使用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-只需传递一个属性名称，您的resulset就会按此排序
sort-允许您提供自己的比较函数来对结果集进行排序。