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 throughupperPageIndex += 2; // You can make 2 a constant if neededcurrentPageIndex += 2;displayPages = pageNumbers.slice(currentPageIndex , upperPageIndex);console.log(displayPages)参考：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice