在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 。

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);
};

UPDATE 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循环中添加一个额外的检查条件来计算<$的大小c $ c> 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屋！