限制bootstrap 3分页中显示的页数

Posted 2023-03-10

【中文标题】限制bootstrap 3分页中显示的页数

【英文标题】：Limit the number of pages displayed in bootstrap 3 pagination

【发布时间】：2014-10-14 17:46:45

【问题描述】：

我的网站上有各种使用引导 (bootstrap 3) 分页的网页，但我需要知道如何限制其中显示的页面数量（例如，仅显示第 1 到 10 页）。

如果您随后选择第 2 页，则会显示第 11 页，依此类推。

你是怎么做到的？

我知道它可能是 javascript/jQuery，但我们不胜感激。如果不需要使用 JavaScript/jQuery 就可以完成，那就更好了。

下面是我的分页截图。

如您所见，显示了 12 页，我希望隐藏第 11 页和第 12 页，直到第 2 页或选择下一页，然后显示第 11 页并隐藏第 1 页，依此类推.

【问题讨论】：

所以您希望最多显示 10 个页码？

如果选择2，1不会显示？

JNF & A1rPun - 是的，这是正确的

【参考方案1】：

有一个 jquery 插件可以与 bootstrap 一起使用，可以解决这个问题： http://josecebe.github.io/twbs-pagination/ 查看“可见页面选项”部分。

您可以通过 google 和bootstrap 3 pagination many pages 找到更多/其他解决方案。

【讨论】：

感谢这是完美的！

这个解决方案很完美！感谢您的提示。

更新了链接。

【参考方案2】：

这个问题是很久以前提出的，但在我寻找答案时出现了。

指定max-size='X' 对我有用。引导分页标签如下所示：

<pagination class="pagination-sm" total-items="1000" items-per-page="10" max-size="10">
</pagination>

希望这对某人有所帮助。

【参考方案3】：

你可以试试reviews.maxPages如下图：

<pagination 
    total-items="reviews.count"
    ng-model="reviews.pageNo"
    max-size="reviews.maxPages"
    boundary-links="true"
    rotate="false"
    num-pages="reviews.noPages"
    ng-change="changePageTo(reviews.pageNo)"></pagination>

【讨论】：

pagination 标签从何而来？

【参考方案4】：

假设您的页面是在服务器端呈现的（php、Ruby、Java 等），您可能希望在服务器端正确呈现分页。

不久前我在 PHP 中解决了这个问题，我有一个函数为每个页码调用，它决定是否应该呈现该页码（或其他）。

事情是这样的

if the page number is < 3, render the page number
if the page number is within +-2 of the current page, render the page number
if the page number is > the total number of pages -3 render the page number
if the last page number wasn't rendered and dots haven't already been rendered render dots '...' do indicate a gap

else do nothing

我希望这会为您指明正确的方向