HTML 和 Javascript 搜索结果分页 - 限制显示的结果页面数量

Question

Using HTML and javascript I have some basic search result pagination which, although works, if there are hundreds of results, I can end up with pagination looking like this:

I would like to limit this to show only 1 - 10, then 11 - 10 etc, can anyone direct me to an example of how to do this?

<div class="row igs-learning-paths-pagination-row">
                <div class="col-12 d-flex justify-content-center" >
                    <ul class="pagination pagination-info">
                        <li class="page-item">
                            <a href="javascript:void(0)" onclick="displayPreviousPage()" class="igs-learning-paths-pagingation-text igs-text-uppercase">
                                @Umbraco.GetDictionaryValue("Common Prev", "Prev..").ToUpper()
                            </a>
                        </li> &nbsp;


                        @for (int i = 0; i <= @Model.Results.Count() / numberPerPage; i++)
                        {
                            <li class="@(i == 0 ? "active" : null) page-item non-generate-page-item" id="page-list-item-@(i)" style="border-radius:16px;">
                                <a class="page-link" id="page-number-@(i)" href="javascript:void(0)" onclick="displayPages(@(i))">@(i + 1)</a>
                            </li>
                        }

                        <li class="page-item" alt="Go forward a page" title="Go forward a page">
                            <a href="javascript:void(0)" alt="Go forward a page" title="Go forward a page"
                               onclick="displayNextPage()"
                               class="igs-learning-paths-pagingation-text igs-text-uppercase search-result-margin">
                                @Current.UmbracoHelper.GetDictionaryValue("Common Next", "Next..").ToUpper()
                            </a>
                        </li>
                    </ul>
                </div>

            </div>


<script>
var numberPerPage = @numberPerPage;
var totalResults = @Model.Results.Count();
var maxPage = Math.floor(totalResults / numberPerPage);
var currentPage = 0;
var previousPage = 0;

function displayNextPage() {
    if (currentPage == maxPage) return;

    currentPage = currentPage + 1
    displayPages(currentPage);
}

function displayPreviousPage() {
    if (currentPage == 0) return;

    currentPage = currentPage - 1
    displayPages(currentPage);
}

function displayPages(pageToDisplay) {
    $(".page-search-hider").hide();
    currentPage = pageToDisplay;
    if (!pageToDisplay) {
        pageToDisplay = 0
    }
    else {
        var skip = pageToDisplay * numberPerPage;
        pageToDisplay = skip+1;
    }

    var newNumberPerPage = numberPerPage;

    document.getElementById("page-list-item-" + previousPage).classList.remove("active")
    previousPage = currentPage;
    document.getElementById("page-list-item-" + currentPage).classList.add("active")

    for (var i = 0; i <= newNumberPerPage; i++) {
        var result = pageToDisplay + i;
        $("#pageId-" + result).show();
        $("#pageId-" + @(pageIdCount)).hide();
    }
}

Answer 1

 const pageNumbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; const maxPageLimit = 5; let upperPageIndex = maxPageLimit; let currentPageIndex = 0; let displayPages = pageNumbers.slice(currentPageIndex , upperPageIndex); // slice(startIndex, endIndex); console.log(displayPages) // if currentPageIndex = 2 then show 2 more as you go through upperPageIndex += 2; // You can make 2 a constant if needed currentPageIndex += 2; displayPages = pageNumbers.slice(currentPageIndex , upperPageIndex); console.log(displayPages)

REF: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice