Désactivé lien dans le Bootstrap de la Pagination

Je suis en train d'utiliser Bootstrap la Pagination de style. La documentation dit de créer la liste de page comme suit:

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

Les deux premiers liens, la flèche de gauche et la 1, doit être désactivé. Quand je l'intégrer dans mon django template si, ces deux sont encore utilisables. En cliquant sur leur envoie à l'utilisateur en haut de la page juste comme n'importe quel autre ancre de lien avec un id "#". Je pense que je dois encore avoir la pour Bootstrap de style correctement.

Est-il un moyen d'écrire cette sorte que lorsque l'utilisateur clique sur l'une des personnes handicapées "boutons", il ne fait rien?

InformationsquelleAutor Ed. | 2012-08-18
  1. 30

    Dans les docs, ces boutons sont juste désactivé manuellement. Il n'a rien à voir avec la .pagination style.

    Vous pouvez utiliser cette

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

    Remarque: Si vous utilisez une requête ajax en fonction de la pagination, vous devez mettre ce morceau de code dans le gestionnaire de mise à jour ou utiliser délégué événements au lieu

    • Ce qui m'a sauvé beaucoup de casse-tête. Merci!
    • Remarque: Si vous utilisez un ajax basé sur la pagination, vous devez mettre ce morceau de code dans le gestionnaire de mise à jour.
    • La bonne solution! N'oubliez pas de changer le href="" du lien à # si la page n'existe pas. Sinon SEO robots de les ramasser et de vous donner des points négatifs pour cette. Une autre chose que vous pourriez faire est de faire le javascript ci-dessus le plus strict. Utilisation $('ul.pagination li.disabled a, ul.pagination li.active a').on('click', function (e) { e.preventDefault(); });. Ajoutez donc ul et li avant les classes.
    • Cela a fonctionné comme un charme où tout autre résultat que j'ai regardé en haut de l'échec! Merci beaucoup.
    InformationsquelleAutor Sherbrow
  2. 6

    Si vous écrivez le code html de façon dynamique côté serveur (avec django, par exemple) et vous ne voulez pas utiliser de javascript que vous pourriez faire ceci:

    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>
}
    • merci pour l'astuce, $('a').parent().addClass('disabled'); fonctionne très bien ainsi
    InformationsquelleAutor Elger Mensonides
  3. 5

    Comme une référence, ici, est ce Bootstrap n':

    &.disabled,
&[disabled] {
  cursor: not-allowed;
  pointer-events: none; //Future-proof disabling of clicks
  .opacity(.65);
  .box-shadow(none);
}
    • C'est parfait. Il suffit d'ajouter le btn disabled classes pour chaque lien, vous devez le désactiver.
    InformationsquelleAutor Dorian
  4. 3
    $('.disabled a').click(function(){
    return false;
});
    InformationsquelleAutor Oleg Polutsiganov
  5. -1

    Pour PHPLD v 4.2 j'ai utilisé le code suivant pour afficher 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>
    InformationsquelleAutor user3241310