javascript中的简单分页 [英] Simple pagination in javascript
问题描述
我正在尝试为我的网站制作分页.(http://anuntorhei.md)
I am trying to make pagination for my site. (http://anuntorhei.md)
代码:
var someVar = 50;
function someStupidFunction() {
if (objJson.length > 50) {
document.getElementById("nextPage").style.visibility = "visible";
}
if (someVar <= 50) {
document.getElementById("prevPage").style.visibility ="hidden";
} else {
document.getElementById("prevPage").style.visibility = "visible";
}
}
function nextPage() {
document.getElementById("listingTable").innerHTML = "";
if (someVar < objJson.length) {
document.getElementById("nextPage").style.visibility = "visible";
} else {
document.getElementById("nextPage").style.visibility = "hidden";
}
for (var i = someVar - 50; i < someVar; i++) {
document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";
}
someVar += 50;
document.getElementById("prevPage").style.visibility = "visible";
}
function prevPage() {
document.getElementById("listingTable").innerHTML = "";
if (someVar > 50) {
document.getElementById("prevPage").style.visibility = "visible";
} else {
document.getElementById("prevPage").style.visibility = "hidden";
}
for (var i = someVar - 50; i < someVar; i++) {
document.getElementById("listingTable").innerHTML += objJson[i].adName + "<br>";
}
someVar -= 50;
document.getElementById("nextPage").style.visibility = "visible";
}
但是当 someVar
大于 objJson.length
时,我无法理解如何隐藏"nextPage
按钮.
But I can't understand how to "hide" nextPage
button when someVar
is bigger than objJson.length
.
当我到达结束"时,nextPage
按钮在 objJson
小于 someVar
后消失.这段代码有什么问题?
And when I reach the "end", nextPage
button disappear after than objJson
is smaller than someVar
. What is wrong in this code?
我怎样才能改变它以使其完美?抱歉我的英语不好,无法解释我需要的所有内容,希望您理解我的需要!
How can I change it to make it perfect? Sorry for my bad English, can't explain all what I need, hope you understand what I need!
推荐答案
我会解决您的任何问题...但这里有一个改进的模式,您应该遵循以减少代码重复.
I'll address any questions you have... but here is an improved pattern you should follow to reduce code duplication.
作为旁注,您应该考虑不要在客户端进行分页.因为如果您有一个庞大的数据集,这意味着您需要在页面加载之前下载所有数据.最好改为实现服务器端分页.
As a sidenote though, you should consider not doing pagination on client-side. Since if you have a huge dataset, it would mean you need to download all the data before your page loads. Better to implement server-side pagination instead.
小提琴:http://jsfiddle.net/Lzp0dw83/
HTML
<div id="listingTable"></div>
<a href="javascript:prevPage()" id="btn_prev">Prev</a>
<a href="javascript:nextPage()" id="btn_next">Next</a>
page: <span id="page"></span>
Javascript(放在任何地方):
Javascript (put anywhere):
var current_page = 1;
var records_per_page = 2;
var objJson = [
{ adName: "AdName 1"},
{ adName: "AdName 2"},
{ adName: "AdName 3"},
{ adName: "AdName 4"},
{ adName: "AdName 5"},
{ adName: "AdName 6"},
{ adName: "AdName 7"},
{ adName: "AdName 8"},
{ adName: "AdName 9"},
{ adName: "AdName 10"}
]; // Can be obtained from another source, such as your objJson variable
function prevPage()
{
if (current_page > 1) {
current_page--;
changePage(current_page);
}
}
function nextPage()
{
if (current_page < numPages()) {
current_page++;
changePage(current_page);
}
}
function changePage(page)
{
var btn_next = document.getElementById("btn_next");
var btn_prev = document.getElementById("btn_prev");
var listing_table = document.getElementById("listingTable");
var page_span = document.getElementById("page");
// Validate page
if (page < 1) page = 1;
if (page > numPages()) page = numPages();
listing_table.innerHTML = "";
for (var i = (page-1) * records_per_page; i < (page * records_per_page); i++) {
listing_table.innerHTML += objJson[i].adName + "<br>";
}
page_span.innerHTML = page;
if (page == 1) {
btn_prev.style.visibility = "hidden";
} else {
btn_prev.style.visibility = "visible";
}
if (page == numPages()) {
btn_next.style.visibility = "hidden";
} else {
btn_next.style.visibility = "visible";
}
}
function numPages()
{
return Math.ceil(objJson.length / records_per_page);
}
window.onload = function() {
changePage(1);
};
更新 2014/08/27
上面有一个错误,当特定页面(通常是最后一页)不包含 records_per_page
条记录时,for 循环会出错,因为它试图访问不存在的索引.
There is a bug above, where the for loop errors out when a particular page (the last page usually) does not contain records_per_page
number of records, as it tries to access a non-existent index.
修复很简单,通过在 for 循环中添加一个额外的检查条件来说明 objJson
的大小:
The fix is simple enough, by adding an extra checking condition into the for loop to account for the size of objJson
:
更新小提琴:http://jsfiddle.net/Lzp0dw83/1/
for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++)
这篇关于javascript中的简单分页的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!