web-dev-qa-db-fra.com

Lien désactivé dans Bootstrap pagination

J'essaie d'utiliser le style de pagination de Bootstrap. La documentation indique de créer la liste des pages comme:

<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 gauche et la 1, doivent être désactivées. Lorsque je l'incorpore dans mon Django Modèle, ces deux sont toujours utilisables. CLIGE-VOUS ENVOYEZ L'UTILISAIRE EN TOP TOP de la page, tout comme n'importe quel autre lien d'ancrage avec un identifiant "#". Je Pensez que je dois toujours avoir le là dans l'ordre de Bootstrap pour le style correctement.

Existe-t-il un moyen d'écrire cela afin que lorsque l'utilisateur clique sur l'un des "boutons" désactivés, il ne fait rien?

htmltwitter-bootstrapanchor
17
Ed.

Dans les documents, ces boutons sont juste désactivés manuellement. Cela n'a rien à voir avec le .pagination coiffant.

Vous pouvez utiliser ça

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

Remarque: Si vous utilisez une pagination basée sur AJAX, vous devez mettre cette pièce de code dans le gestionnaire de mise à jour ou utiliser événements délégués

30
Sherbrow

Si vous écrivez le côté du serveur HTML Dynamiquement (avec Django par exemple) et que vous ne voulez pas utiliser JavaScript, vous pouvez le faire:

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>
}
6
Elger Mensonides

Comme référence, voici quoi Bootstrap fait :

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