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

Question

使用 HTML 和 javascript，我有一些基本的搜索结果分页，虽然可以，但如果有数百个结果，我最终可以得到如下所示的分页：我想将此限制为仅显示 1 - 10，然后是 11 - 10 等，任何人都可以指导我如何执行此操作的示例吗？<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>

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)

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