17

Bootstrapのページ付けスタイルを使用しようとしています。ドキュメントには、次のようにページリストを作成するように記載されています。

<div class="pagination">
    <ul>
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li><a href="#">4</a></li>
        <li><a href="#">&raquo;</a></li>
    </ul>
</div>

最初の2つのリンク、左矢印と1は無効にする必要があります。ただし、それをdjangoテンプレートに組み込むと、これら2つは引き続き使用できます。それらをクリックすると、IDが「＃」の他のアンカーリンクと同じように、ユーザーがページの上部に移動します。Bootstrapが正しくスタイルを設定するには、まだそこにある必要があると思います。

ユーザーが無効になっている「ボタン」の1つをクリックしても何も起こらないように、これを作成する方法はありますか？

4

5 に答える 5

30

ドキュメントでは、これらのボタンは手動で無効になっています。.paginationスタイリングとは何の関係もありません。

あなたはそれを使うことができます

$('.pagination .disabled a, .pagination .active a').on('click', function(e) {
    e.preventDefault();
});

注：ajaxベースのページネーションを使用する場合は、このコードを更新ハンドラーに配置するか、代わりに委任されたイベントを使用する必要があります

于 2012-08-18T18:35:43.700 に答える
6

htmlを動的にサーバー側で記述し（たとえば、djangoを使用）、javascriptを使用したくない場合は、次のようにすることができます。

pseudo code:
if (Model.HasNext()) {
   <li> // normal link
      <a href="www.someurl.com/page=i">next</a>
   </li>
} else {
   <li class="disabled"> // disabled link
      <a href="javascript: void(0)">next</a>
  </li>
}
于 2013-09-13T02:39:52.757 に答える
6

参考までに、Bootstrapの機能は次のとおりです。

&.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; // Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}
于 2014-06-24T16:20:56.417 に答える
3 
$('.disabled a').click(function(){
    return false;
});
于 2017-08-01T21:17:21.637 に答える
-1

PHPLD v 4.2の場合、次のコードを使用してBootstrap3ページ付けを表示しました

{* Display Paging Links *}
<ul class="pagination">
<li>{paginate_prev id="MainPaging"}</li>
{paginate_middle id="MainPaging" format="page" prefix="" suffix="" link_prefix="
<li>"link_suffix="</li>" current_page_prefix="
<li class=\"active\"><a href=\"#\">"current_page_suffix="</a></li>"}
<li>{paginate_next id="MainPaging"}</li>
</ul>
于 2014-01-27T17:03:34.687 に答える