Disabled link in Bootstrap Pagination

问题:

I'm trying to use Bootstrap's Pagination style. The documentation says to create the page list like so:

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

The first two links, the left arrow and the 1, should be disabled. When I incorporate it into my django template though, those two are still usable. Clicking them sends the user to the top of the page just like any other anchor link with an id "#". I think I still have to have the there in order for Bootstrap to style it correctly.

Is there a way to write this so that when the user clicks one of the disabled "buttons" it doesn't do anything?

回答1:

In the docs, those buttons are just disabled manually. It has nothing to do with the .pagination styling.

You could use that

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

Note: If you use an ajax based pagination you have to put this piece of code in the update handler or use delegated events instead

回答2:

If you write the html dynamically server side (with django for example) and you don't want to use javascript you could do this:

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:

As a reference, here is what Bootstrap does:

&.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:

For PHPLD v 4.2 I used the following code to show Bootstrap 3 pagination

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