在javascript中简单的分页

Question

我正试图为我的网站做分页.(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";
}

但是当我大于nextPage时,我无法理解如何"隐藏" 按钮.someVarobjJson.length

当我到达"结束"时,nextPage按钮消失后比objJson小于someVar.这段代码有什么问题？

如何更改它以使其完美？抱歉我的英语不好,无法解释我所需要的一切,希望你明白我的需要!

Answer 1

我会解决你的任何问题......但这是一个改进的模式,你应该遵循以减少代码重复.

作为旁注,您应该考虑不在客户端进行分页.因为如果你有一个庞大的数据集,那就意味着你需要在页面加载之前下载所有数据.最好改为实现服务器端分页.

小提琴: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(放在任何地方):

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循环错误,因为它试图访问不存在的索引.

修复很简单,通过在for循环中添加额外的检查条件来考虑以下大小objJson:

更新小提琴:http://jsfiddle.net/Lzp0dw83/1/

for (var i = (page-1) * records_per_page; i < (page * records_per_page) && i < objJson.length; i++)

Answer 2

这是迄今为止对我来说最好的一个，它将包括 \xc2\xb4...\xc2\xb4 的特定偏移量

\n

function pages(current_page, last_page, onSides = 3) {\n        // pages\n        let pages = [];\n        // Loop through\n        for (let i = 1; i <= last_page; i++) {\n            // Define offset\n            let offset = (i == 1 || last_page) ? onSides + 1 : onSides;\n            // If added\n            if (i == 1 || (current_page - offset <= i && current_page + offset >= i) || \n                i == current_page || i == last_page) {\n                pages.push(i);\n            } else if (i == current_page - (offset + 1) || i == current_page + (offset + 1)) {\n                pages.push('...');\n            }\n        }\n        return pages;\n    }\n

\n