I have a Zend Framework (PHP) web application that has a table with a lot of rows.
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?
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();
});
});
I know this is an old thread, but just in case anyone else is searching I wrote this 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();
}
});
});
Sure you could do this with jQuery. I would probably do it this way:
<table>
<tbody id="new">
<tr>...</tr> <!-- x5 -->
<tr><td><a href="#" id="toggle">Show Old</a></td></tr>
</tbody>
<tbody id="old">
...
</tbody>
</table>
Load them hidden with CSS:
#old { display: none; }
and:
$(function() {
$("#toggle").click(function() {
if ($("#old").is(":hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$("#old").slideToggle();
return false;
});
});
The jQuery hide/show effects can be a bit strange with table components however. If so change the CSS to this:
#old.hidden { display: none; }
and:
$(function() {
$("toggle").click(function() {
if ($("#old").hasClass("hidden")) {
$(this).text("Hide Old");
} else {
$(this).text("Show Old");
}
$(this).toggleClass("hidden");
return false;
});
});
Of course you don't get the nice effects this way.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.