如何使用（JavaScript-Jquery）限制分页中可见页面的数量答案

【问题标题】：How to limit the number of visible pages in pagination with (JavaScript-Jquery)如何使用（JavaScript-Jquery）限制分页中可见页面的数量
【发布时间】：2020-04-05 20:15:57
【问题描述】：

我想在不使用插件的情况下创建页面布局。

当前页面是这样的，调出所有页面。

但我希望页面以这种方式显示。

在第 1 页

1 2 3 4 5 ... // selected 1

在第 2 页

1 2 3 4 5 6 ... //selected 2

在第 3 页

1 2 3 4 5 6 7 ... //selected 3

...在第 7 页

3 4 5 6 7 8 9 10 11 ... // selected 7

Html代码编写如下

<nav>
        <ul data="@Model.TotalPage" data-id="@Model.CurrentPageNumber" class="pagination justify-content-center">
            @{
                for (int i = 1; i <= Model.TotalPage; i++)
                {
                    <li class="page-item @(i == Model.CurrentPageNumber ? "active" : "")">
                        <a class="bPageNumber page-link">@i</a>
                    </li>
                }
            }
        </ul>
</nav>

【问题讨论】：

标签： javascript jquery html razor pagination

【解决方案1】：

我认为将两个组件包装在一个组件中喜欢页面组件滑块 // 它可能是你的分页

"当 Pages 组件渲染时，它会将硬核数据传递给滑块，例如页面组件 1

页面组件 1 ?滑块将是 1,2,3,4：页面组件 2？滑块将是 1,2,3,4,5,6,7,8 等等 "

【讨论】：

可以用 JavaScript 做到这一点吗？也就是说，我给它 TotalPage 和 CurrentPage，然后它返回一个数字数组给我并显示它。
是的，您可以使用 javascript 执行此操作，只需代表页面渲染将某些值传递给滑块，我认为这比您的条件更容易