Question

我正在尝试在javascript中添加一些分页号码。我已经实现了分页，我也可以显示所有分页号，但是我只想显示所有数字中的3个数字。让我向您展示到目前为止我所取得的成就：

var values = [{name : "a"}, {name : "b"}, {name : "c"}, {name : "d"}, {name : "e"}, {name : "f"}, {name : "g"}, {name : "h"}, {name : "i"}, {name : "j"}];  
var current_page = 1;
var records_per_page = 6;

if (values.length <= 6) {
    btn_prev.style.display = "none";
    btn_next.style.display = "none";
}

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("poi-cat-id");
    var page_span = document.getElementById("page");
    var pageNum = document.getElementById("pageNum");

    // Validate page
    if (page < 1) page = 1;
    if (page > numPages()) page = numPages();

    listing_table.innerHTML = "";
    var href = getRootWebSitePath();
    for (var i = (page - 1) * records_per_page; i < (page * records_per_page) && i < values.length; i++) {
        var nametoslug1 = values[i].name;
        var slug1 = convertToSlug(nametoslug1);
        listing_table.innerHTML += '<div class="event-desc"><p>' + values[i].name + '</p></div>';
    }


    if (page == 1) {
        btn_prev.style.color = "#404141";
    } else {
        btn_prev.style.visibility = "visible";
        btn_prev.style.color = "#0c518a";
    }

    if (page == numPages()) {
        btn_next.style.color = "#404141";
    } else {
        btn_next.style.visibility = "visible";
        btn_next.style.color = "#0c518a";
    }
    male();
    maen();
}

//this is where I add all the numbers of the pagination
var totnum = numPages();
for (var i = 0; i < numPages() + 2; i++) {
    // We do not want page 0. You could have started with i = 1 too.
    $('#page-num-container').append('<a href="javascript:pagesNr()" class="pageClick">' + (i + 1) + '</a>');
}

======EDIT=====
function newPage(){
   $('.pageClick').on('click', function (e) {
    e.preventDefault();
    changePage($(this).index() + 1);
   });
} //when I click the number the pages won't change

function numPages() {
    return Math.ceil(values.length / records_per_page);
}

window.onload = function () {
    changePage(1);
};

这是我的html：

<div>
    <ul class="content-full" id="poi-cat-id"></ul>
    <div class="pagination-poi-arrows">
        <div class="prev">
            <a href="javascript:prevPage()" id="btn_prev"><img src="~/img/left-arrow-pagination.svg" /></a>
        </div>
        <div class="page-num-container" id="page-num-container">
        </div>
        <div class="nex">
            <a href="javascript:nextPage()" id="btn_next"><img src="~/img/right-arrow-pagination.svg" /></a>
        </div>
    </div>
    <div class="pagination-poi-arrows" id="pager"></div>
</div>

自从我坚持了一段时间以来，任何人的帮助都将受到高度赞赏。谢谢：）

Answer 1

如果要显示相邻的页码，则必须从i=current_page开始迭代，直到i=current_page + 2。

但是，似乎在您的代码中，您的页面从1开始计数。我advise您从0开始。

现在，返回您的代码。您需要将循环替换为以下内容（如果从1开始计算）：

function updatePagination(page) {
    for (var i = page - 1; i < page + 1; i++) {
        $('#page-num-container').append('<a href="javascript:pagesNr()"     
    class="pageClick">' + (i + 1) + '</a>');
    }
}

// you need to clear the element before you update it
function clearPagination() {
    $('#page-num-container').empty();
}

您将在changePage()方法的末尾调用这两个方法。

在javascript中仅显示分页总数中的三个数字

1 个答案: