web-dev-qa-db-ja.com

bootstrap 3ページネーションで表示されるページ数を制限する

私のウェブサイトには、ブートストラップ（ブートストラップ3）ページネーションを使用しているさまざまなWebページがありますが、表示されるページ数を制限する方法を知る必要があります（たとえば、1〜10ページのみを表示します）。

次に2ページ目を選択すると、11ページ目が表示されます。

これはどうやるんですか？

おそらくJavaScript/jQueryになるでしょうが、どんな助けでも大歓迎です。 JavaScript/jQueryを使用せずに実行できる場合は、さらに良いでしょう。

以下は私のページネーションのスクリーンショットです。

Current pagination

ご覧のように、12ページが表示されているので、ページ2または次のページが選択されるまでページ11と12を非表示にしてから、ページ11を表示し、ページ1を非表示にします。

javascriptjquerycsstwitter-bootstrappagination
20
murday1983

この問題を解決するブートストラップで動作するjqueryプラグインがあります。 http://josecebe.github.io/twbs-pagination/ 「可視ページオプション」セクションをご覧ください。

Googleとbootstrap 3 pagination many pages。

15
claus

ページがサーバー側（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

これがあなたを正しい方向に向けることを願っています

5
Sam

この質問はずっと前に聞かれましたが、答えを探している間に出てきました。

max-size='X'を指定するとうまくいきました。 bootstrap paginationタグは次のようになります。

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

これが誰かを助けることを願っています。

4
Vanitha R

あなたが試すことができます 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>
2
SydMK