Question

I have a Zend Framework (PHP) web application that has a table with a lot of rows.

• 99.9% of the time, the user will take action on the first or second row.
• 00.1% of the time, the user will need to go back and take action on a different row.

So I only really need to display the first few rows on page load, and keep the rest available for the sake of history.

I would like to shorten the table somehow. I’m thinking, using jQuery, maybe do something where the first 5 rows are displayed (the rest are hidden), and at the bottom of the table, there is a link to display 5 more rows.

alt text http://img64.imageshack.us/img64/2479/5rowtable.png

What do you think? How could I achieve this with jQuery?

Answer 1

This is how I would do this (demo here):

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();
    });

});