Javascript 分页在页面加载时显示完整列表

我已经采取了我的项目，并有一个它的codepen样本。

（不要担心API密钥，我稍后会重置它）

我有一个从外部源提取的数据集，使用jquery提取JSON并在页面上显示结果

我试图使用分页来显示比页面通常允许的更多的结果。但我遇到的问题是，在初始页面加载时，分页功能无法正常工作，并且显示了完整的数据集。一旦开始使用按钮进行排序，分页就可以正常工作

是否有一种方法可以在加载时运行分页脚本，使其强制只显示前9项

为了便于发布，这里是我正在使用的分页js

pageSize = 9;
showPage = function(page) {
$(".result-item").hide();
$(".result-item").each(function(n) {
    if (n >= pageSize * (page - 1) && n < pageSize * page)
        $(this).show();
});        
}

showPage(1);

$("#pagination li a").click(function() {
$("#pagination li a").removeClass("current");
$(this).addClass("current");
showPage(parseInt($(this).text())) 
});

pageSize=9；
showPage=功能（第页）{
$（“.result项”）.hide（）；
$（“.result item”）。每个（函数（n）{
如果（n>=pageSize*（第1页）和&n

谢谢。

只需移动

showPage（1）

到

getJSON

callback->

您应该首先使列表项不可见，以减少“闪烁”

wrap

showPage（1）在文档中就绪

$(document).ready(function() {
    showPage(1);
});

这个包在里面的文件准备好了吗？如果没有，则至少
showPage（1）应该是。当您调用showPage（1）时，数据尚未完成加载，因此没有要分页的内容。