Comment faire pour afficher plus de 5 lignes d'un tableau sur le clic sur un bouton à l'aide de jQuery
Je l'ai pré-charger une table avec toutes ses lignes. Cependant, je ne veux afficher que les top 10 des lignes qui sont à l'intérieur de la <tbody>
tag et maintenant, tous les <tr>
dans le tableau.
Voici donc ce que j'ai fait jusqu'à présent:
var trs = $("#internalActivities > table > tbody > tr");
trs.hide();
trs.slice(0, 9).show();
$("#seeMoreRecords").click(function (e) {
e.preventDefault();
$("#internalActivities tr:hidden").slice(0, 10).show();
});
$("#seeLessRecords").click(function (e) {
e.preventDefault();
$("#internalActivities tr").slice(9, 19).hide();
});
Le problème avec le code ci-dessus est que:
- Il n'a pas l'air de le
<tr>
seulement avec le<tbody>
tag. - Le voir bouton de moins besoin de supprimer les 10 lignes de bas en haut et pas tous d'entre eux.
- J'ai besoin de masquer le bouton
seeMoreRecords
si ils sont tous affichés. - Si le minimum de la ligne s'affiche, puis masquer le
seeLessRecords
bouton.
Aspect Final de mon script d'affichage de 10 lignes par défaut et si l'utilisateur clique sur voir plus de vous voir 10 de plus. C'est donc un incrément de 10 à la fois, et une fois que vous frappez max puis masquer le voir plus de bouton. Voir moins est visible uniquement si il y a plus de 10 lignes affichées.
OriginalL'auteur Mike | 2013-06-22
Vous devez vous connecter pour publier un commentaire.
Vous pouvez utiliser le sélecteur de
$("#internalActivities tr")
qui permet de sélectionner tous les<tr>
's, quel que soit le<tbody>
ou pasVous avez besoin pour enregistrer un index affiché dans une variable distincte, ou calculer l'indice actuel basé sur la façon dont de nombreux éléments sont sélectionnés (utiliser le
.length
propriété)Vérifier le nombre d'éléments affichés et afficher/masquer les boutons correspondants.
Exemple
HTML
Javascript
J'ai créé un jsFiddle démo pour le voir en action.
La génération des lignes est uniquement pour les tests. Vous pouvez supprimer complètement la boucle for au début.
Je vois. J'étais en train de regarder le test de code et non le code que vous avez posté ici. J'ai essayé ton code mais il y a des problèmes. le seeLEssRecords bouton ne permet pas de cacher. Aussi je ne vois pas plus de 10 dossiers même pensé qu'il devrait y avoir plus de 10 dossiers.
Mhm - désolé, je n'arrive pas à comprendre ce qui ne fonctionne pas pour vous. Avez-vous essayé le violon? Fonctionne comme décrit ici. Ce que jQuery Version utilisez-vous? J'ai mis à jour le code ci-dessus et dans la tripoter un peu pour être plus en ligne avec votre code original et enlevé des nations unies besoin de vérifier.
Maintenant, il est de travail. Après votre dernière mise à jour, il est bon. Merci beaucoup 🙂
OriginalL'auteur Keeper
1) Si vous avez besoin des balises tr et pas seulement avec la balise tbody puis de réécrire votre jquery sélectionnez à
2) Vous pouvez obtenir le nombre de lignes et de l'utilisation qui comptent dans la tranche
3) Vérifier le nombre de lignes masquées dans la seeMoreRecords cliquez sur gestionnaire d'événement
4) Vérifier le décompte de lignes
Dans ce cas, question 1) n'est pas un problème et que le sélecteur est correct.
OriginalL'auteur Zoltan Kochan