Отключенное звено в разбивке по ботстрапу

Я пытаюсь использовать стиль разбивки на ботстрап. В документации указано, чтобы создать список страниц следующим образом:

<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>

Первые две ссылки, стрелка влево и 1, должны быть отключены. Когда я включаю его в шаблон django, эти два варианта все еще пригодны для использования. Нажатие на них отправляет пользователя в начало страницы, как и любую другую привязку с идентификатором "#". Я думаю, что мне все еще нужно иметь там, чтобы Bootstrap правильно его нарисовал.

Есть ли способ написать это так, чтобы, когда пользователь нажимает одну из отключенных кнопок, он ничего не делает?

Ответ 1

В документах эти кнопки просто отключены вручную. Это не имеет никакого отношения к стилю .pagination.

Вы можете использовать этот

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

Примечание. Если вы используете разбивку на основе ajax, вы должны поместить этот фрагмент кода в обработчик обновления или использовать делегированные события вместо

Ответ 2

Если вы пишете динамически серверную часть 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>
}

Ответ 3

В качестве ссылки, что делает Bootstrap:

&.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; // Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}

Ответ 4

$('.disabled a').click(function(){
    return false;
});

Ответ 5

Для PHPLD v 4.2 я использовал следующий код, чтобы показать разбиение на страницы Bootstrap 3

{* 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>