[Résolu] Ajout class Disabled sur Previous and Next Btn (Pagination)

Bonjour !

Je viens vous demander un peu d'aide concernant un problème de JavaScript :

Le Problème :
J'ai une pagination bootstrap comme celle-ci :
http://jsfiddle.net/VHZqj/6/

Je voudrais que lorsqu'on est sur la page 1 (page_active, current page) le bouton previous (#prevlk) soit non utilisable (ajout d'une class disabled le mettant d'une certaine couleur et mettant un href="#") et que lorqu'on est en page = dernière page ; le bouton next (#nextlk) soit aussi non-utilisable (ajout d'une class disabled le mettant d'une certaine couleur et mettant un href="#").

Voici le code sur lequel je travaille, il me faudrait une meilleur syntaxe :

// Add and Remove Class Disabled for next and previous button
	$('#current_page').val(page_num);
	if (page_num === 0) {
                        $('#prevlk').addClass('disabled');
                    } else {
                        $('#prevlk').removeClass('disabled');
                    }
 
    if (page_num === number_of_pages) {
                        $('#nextlk').addClass('disabled');
                    } else {
                        $('#nextlk').removeClass('disabled');
                    }

Merci d'avance pour votre aide.
Modifié par kenzo082 (26 Sep 2013 - 22:26)

Si tu veux tester number_of_pages, cette variable doit devenir globale, il faut donc supprimer le var

number_of_pages = Math.ceil(number_of_items/show_per_page);

Ensuite, je te propose de mettre ton bout de code dans une fonction :

function manage_prev_next(page_num) {
   if (page_num === 0) {
      $('.previous_link').addClass('disabled');
   } else {
      $('.previous_link').removeClass('disabled');
   }
   if (page_num === (number_of_pages-1)) {
      $('.next_link').addClass('disabled');
   } else {
      $('.next_link').removeClass('disabled');
   }
}

J'ai mis des sélecteurs de classe car dans ton code je ne trouvais pas les id que tu utilisais dans les sélecteurs JQuery. Et j'ai fait un "-1" sur number_of_pages.
Enfin, il suffit d'appeler cette fonction à deux endroits. Au démarrage, car on est en page 1 et le bouton "prev" doit être désactivé :

    //and show the first n (show_per_page) elements
    $('#content').children().slice(0, show_per_page).css('display', 'block');
    
    manage_prev_next(0);

Et dans la fonction go_to_page :

    //update the current page input field
    $('#current_page').val(page_num);
    manage_prev_next(page_num);

Enfin, pour le CSS, je pense que c'est bien de positionner le cursor, par exemple :

.disabled{
    background:#aaa;
    cursor:default;
}

Merci petibato pour la réponse et les explications !
C'est bon, ça a marché.
Sujet Résolu !
A la prochaine

Un message clair, avec un jsFiddle et un début de solution, et finalement un feedback sympa, franchement tu reviens poser des questions quand tu veux ! Et puisque ça marche, peux-tu mettre le sujet comme résolu ? Merci.
Modifié par petibato (26 Sep 2013 - 19:27)

Bonjour,

un lien a même avec # comme href reste cliquable (contrairement à un champ de formulaire auquel on rajoute l'attribut disabled), du coup ça pose quelques soucis d'ergonomie et d'accessibilité ("je clique il se passe rien... pourtant je peux cliquer").
Idéalement, tu pourrais remplacer ce a par un span stylé exactement de la même manière (taille, couleur, bordure) et au moins donner un indice que ce n'est pas cliquable en changeant le curseur : pas une main mais le pointeur habituel.

Re ! Merci pour l'info.

Sinon, j'ai un problème de formulaire, si jamais vous pouviez m'aider, ce serait vraiment fort sympathique.
ça se trouve ici :
http://forum.alsacreations.com/topic-5-69165-1-Validation-dun-formulaire-sans-changer-de-page.html

Merci d'avance.