Disabled link in Bootstrap Pagination

Question

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?

Answer 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

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

Answer 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);
}

Answer 4

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