Отключенная ссылка в пагинации Bootstrap

Я пытаюсь использовать стиль разбиения на страницы 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>

Первые две ссылки, стрелка влево и 1, должны быть отключены. Однако, когда я включаю его в свой шаблон django, эти два по-прежнему можно использовать. Щелчок по ним отправляет пользователя в начало страницы, как и по любой другой якорной ссылке с идентификатором «#». Я думаю, что мне все еще нужно иметь там, чтобы Bootstrap правильно его стилизовал.

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


html twitter-bootstrap anchor
person Ed.    schedule 18.08.2012    source источник

Ответы (4)


arrow_upward
30
arrow_downward

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

Вы могли бы использовать это

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

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

person Sherbrow    schedule 18.08.2012
comment
Это избавило меня от многих головных уборов. Спасибо! - person Mike Furtak; 13.10.2012
comment
Примечание. Если вы используете разбиение на страницы на основе ajax, вы должны поместить этот фрагмент кода в обработчик обновлений. - person Thomas; 20.08.2013
comment
Хорошее решение! Не забудьте изменить href="" ссылки на #, если страницы не существует. В противном случае поисковые роботы подхватывают их и ставят вам за это отрицательные баллы. Еще одна вещь, которую вы можете сделать, это сделать приведенный выше javascript более строгим. Используйте $('ul.pagination li.disabled a, ul.pagination li.active a').on('click', function (e) { e.preventDefault(); });. Поэтому добавьте ul и li перед классами. - person LockTar; 15.01.2015
comment
Это сработало как шарм, когда любой другой результат, который я искал, потерпел неудачу! Большое спасибо. - person Learner Always; 05.07.2018

arrow_upward
6
arrow_downward

Если вы пишете 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>
}
person Elger Mensonides    schedule 13.09.2013
comment
спасибо за подсказку, $('a').parent().addClass('disabled'); тоже отлично работает - person nickel715; 15.06.2016

arrow_upward
6
arrow_downward

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

&.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; // Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}
person Dorian    schedule 24.06.2014
comment
Это идеально. Просто добавьте классы btn disabled к каждой ссылке, которую нужно отключить. - person gotqn; 13.09.2014

arrow_upward
-1
arrow_downward

Для 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>
person user3241310    schedule 27.01.2014