Comment masquer/afficher les lignes de la table à l'aide de jQuery?

J'ai un Framework Zend (PHP) application web qui a une table avec beaucoup de lignes.

  • 99,9% du temps, l'utilisateur devra prendre des mesures sur la première ou la deuxième rangée.
  • 00.1% du temps, l'utilisateur aura besoin de revenir en arrière et prendre des mesures sur une ligne différente.

Donc j'ai vraiment besoin d'afficher les premières lignes au chargement de la page, et garder le reste disponible pour le bien de l'histoire.

Je voudrais raccourcir la table en quelque sorte. Je suis en train de penser, à l'aide de jQuery, peut-être faire quelque chose où les 5 premières lignes sont affichées (le reste sont cachés), et au bas de la table, il y a un lien pour afficher plus de 5 lignes.

le texte d'alt http://img64.imageshack.us/img64/2479/5rowtable.png

Qu'en pensez-vous? Comment pourrais-je réaliser cela avec jQuery?

InformationsquelleAutor Andrew | 2009-12-20
  1. 23

    C'est comment je pourrais le faire (démo ici):

    Script

    var numShown = 5; //Initial rows shown & index
var numMore = 5;  //Increment

var $table = $('table').find('tbody');  //tbody containing all the rows
var numRows = $table.find('tr').length; //Total # rows

$(function () {
    //Hide rows and add clickable div
    $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
        .after('<tbody id="more"><tr><td colspan="' +
               $table.find('tr:first td').length + '"><div>Show <span>' +
               numMore + '</span> More</div</tbody></td></tr>');

    $('#more').click(function() {
        numShown = numShown + numMore;
        //no more "show more" if done
        if (numShown >= numRows) {
            $('#more').remove();
        }
        //change rows remaining if less than increment
        if (numRows - numShown < numMore) {
            $('#more span').html(numRows - numShown);
        }
        $table.find('tr:lt(' + numShown + ')').show();
    });

});
    • c'est exactement ce que j'essayais de faire. merci!
    • Ce qui ne l' .end() faire, à la suite de la .hide() ?
    • .end() revient à la sélection de la précédente... alors dans ce cas, le sélecteur remonte à $('table'). Lire plus à ce sujet ici (docs.jquery.com/Traversing/end), il y a aussi le .andSelf() sélecteur (docs.jquery.com/Traversing/andSelf)
    InformationsquelleAutor Mottie
  2. 2

    Je sais que c'est un vieux thread, mais juste au cas où quelqu'un d'autre est à la recherche que j'ai écrit ce script:

    $(function() {
/* initial variables */
var numRows = $('#ticketLinesTable').find('tr').length;
var SHOWN = 5;
var MORE = 20;
/* get how many more can be shown */
var getNumMore = function(ns) {
var more = MORE;
var leftOver = numRows - ns;
if((leftOver) < more) {
more = leftOver;
}
return more;
}
/* how many are shown */
var getInitialNumShown = function() {
var shown = SHOWN;
if(numRows < shown) {
shown = numRows;
}
return shown;
}
/* set how many are initially shown */
var numShown = getInitialNumShown();
/* set the numMore if less than 20 */
var numMore = getNumMore(numShown);
/* set more html */
if(numMore > 0) {
var more_html = '<p><button id="more">Show <span style="font-weight: bold;">' + numMore + '</span> More...</button></p>';
$('#ticketLinesTable').find('tr:gt(' + (numShown - 1) + ')').hide().end().after(more_html);
}
$('#more').click(function(){
/* determine how much more we should update */
numMore = getNumMore(numShown);
/* update num shown */
numShown = numShown + numMore;
$('#ticketLinesTable').find('tr:lt('+numShown+')').show();
/* determine if to show more and how much left over */
numMore = getNumMore(numShown);
if(numMore > 0) {
$('#more span').html(numMore);
}
else {
$('#more').remove();
}
});
});
    InformationsquelleAutor
  3. 1

    Sûr que vous pouvez le faire avec jQuery. Je serais probablement le faire de cette façon:

    <table>
<tbody id="new">
<tr>...</tr> <!-- x5 -->
<tr><td><a href="#" id="toggle">Show Old</a></td></tr>
</tbody>
<tbody id="old">
...
</tbody>
</table>

    Charge cachés avec CSS:

    #old { display: none; }

    et:

    $(function() {
$("#toggle").click(function() {
if ($("#old").is(":hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$("#old").slideToggle();
return false;
});
});

    Le jQuery afficher/masquer les effets peuvent être un peu étrange avec les composants de la table cependant. Si donc modifier le CSS de cette:

    #old.hidden { display: none; }

    et:

    $(function() {
$("toggle").click(function() {
if ($("#old").hasClass("hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$(this).toggleClass("hidden");
return false;
});
});

    Bien sûr, vous n'obtenez pas les effets néfastes de cette façon.

    • Bien sûr, l'inconvénient est que vous devez charger toutes les lignes, puis les cacher. Ne serait pas ajax thingy être de meilleures pratiques pour l'utilisation de la bande passante? 🙂
    • D'accord, et avez-vous remarqué StackOverflow le même traitement côté client pour cacher votre ignoré les tags?
    InformationsquelleAutor cletus