Javascript 分页替代方案

我正在寻找分页替代方案的想法。我知道有两种分页方案：

• 单击页面分页-
• 无限滚动分页-一个似乎有效的实现

一定还有其他一些不太为人所知/流行的方法。如果您可以提供演示链接，则可获得额外积分

---

谢谢

我认为分页的一个很好的替代方法是，用户可以通过一种或多种方式告诉服务器他们在寻找什么。对于某些类型的内容（比如，大量的文本，比如研究论文或小说），当然你可能会被分页所困扰。但当内容自然可搜索时（如支票账户交易表），好的简单过滤工具可能比分页方案更有用。（实际上你可能需要两者。）

我研究了一种混合技术，它可以做一个“无限滚动”，但一次只能显示一个信息“窗口/页面”。因此，它在任何给定的时间只向浏览器加载固定数量的数据。如果您可以显示20个项目并滚动，则只需一次更新列表中的20个项目。分页而不分页，滚动而不滚动

---

当然，这是对实际实现的一个微不足道的定义，它比听起来聪明得多，并且非常适合往返。这是一个已经用搜索条件过滤的结果列表。它们是齐头并进的。

看看“对数”分页，如我在这里的回答中所述：

这就像是常规的分页，但是解决了在“…”范围内访问页面的问题，而没有很多重复的问题。i、 e.如果这些是你的链接，你需要多长时间才能到达10380页中的2456页：1 2 3 4 5。。。1037610377103781037910380

---

（但是，Pointy有，嗯……还有一点（！）

这是我最近构建的纯JavaScript分页控件的代码。它与您最喜欢的类似，具有这些附加的优点

• 单击。。。允许快速跳转到任何页面
• 没有单词意味着没有本地化（下一个、上一个、第一个、最后一个按钮不是 此简单控件中需要）
• 无依赖项（不需要jQuery）

var分页={
代码：“”，
扩展：函数（数据）{
数据=数据|{}；
Pagination.size=data.size | | 300；
Pagination.page=data.page | | 1；
Pagination.step=data.step | | 3；
},
加：功能（s、f）{
对于（var i=s；iPagination.size）{
Pagination.page=Pagination.size；
}
Pagination.Start（）；
},
TypePage:function（）{
Pagination.code='/'+Pagination.size；
Pagination.Finish（）；
var v=Pagination.e.getElementsByTagName（'input'）[0]；
v、 单击（）；
v、 addEventListener（“模糊”，函数（事件）{
var p=parseInt（这个.value）；
if（！isNaN（parseFloat（p））和&isFinite（p））{
如果（p>Pagination.size）{
p=分页大小；
}否则如果（p<1）{
p=1；
}
}否则{
p=Pagination.page；
}
Pagination.Init（document.getElementById（'Pagination'）{
大小：分页。大小，
页码：p，
步骤：分页。步骤
});
}，假）；
},
绑定：函数（）{
var a=Pagination.e.getElementsByTagName（'a'）；
对于（变量i=0；iPagination.size-Pagination.step*2）{
分页。第一次（）；
Pagination.Add（Pagination.size-Pagination.step*2-2，Pagination.size+1）；
}否则{
分页。第一次（）；
Pagination.Add（Pagination.page-Pagination.step，Pagination.page+Pagination.step+1）；
Pagination.Last（）；
}
Pagination.Finish（）；
},
按钮：功能（e）{
var nav=e.getElementsByTagName（'a'）；
nav[0]。addEventListener（'click'，Pagination.Prev，false）；
导航[1]。addEventListener（'click'，分页。Next，false）；
},
创建：函数（e）{
变量html=[
“◄；”，//上一个按钮
''，//分页容器
“►；”//下一步按钮
];
e、 innerHTML=html.join（“”）；
Pagination.e=e.getElementsByTagName（'span'）[0]；
分页。按钮（e）；
},
Init：函数（e，数据）{
分页扩展（数据）；
分页。创建（e）；
Pagination.Start（）；
}
};
var init=函数（）{
Pagination.Init（document.getElementById（'Pagination'）{
大小：30，//页面大小
页面：1，//所选页面
步骤：2//当前页面前后的页面
});
};
document.addEventListener（'DOMContentLoaded'，init，false）
html{
身高：100%；
宽度：100%；
背景色：#ffffff；
}
身体{
保证金：0；
身高：100%；
宽度：100%；
文本对齐：居中；
字体系列：Arial，无衬线；
}
身体：以前{