One thing I have been adding to my tables lately is a count of the number of rows in the footer (generated on the client side) to give the user a quick idea of what she is working with. The live demo or screenshot below will show you what am talking about:
This is really easy to do on the client side with jQuery thanks to the jQuery Object Accessor length which returns the number of elements currently matched in the wrapped set. Below is the jQuery to do this. The first selection finds the last cell in the footer. The text of the cell is then set to the number of elements returned by selecting the rows from the body of the table and then in this case "Records" is appended.
$("#tableOne tfoot td:last").text($("#tableOne tbody tr").length + ' Records');
Another way I have been doing this is with a slight modification to the tableSorter-pager plugin to display the count along with the current and total page info.
Live Demo | Download (ASP.NET 3.5)
Screenshot of End Product:
This only requires changing one line in the plugin, though some more modification to add this an option instead of a hard override might me a better idea. I changed the line commented out below to the line following. Notice that the plugin already provides a way to get the total number of rows through c.rowsCopy.length.
function updatePageDisplay(c) {
//var s = $(c.cssPageDisplay, c.container).val((c.page + 1) + c.seperator + c.totalPages);
var s = $(c.cssPageDisplay, c.container).text("Page " + (c.page + 1) +
c.seperator + c.totalPages + " (" + c.rowsCopy.length + " Records)");
}
I also changed the pagedisplay in the footer markup from an input box to a label so that placing the cursor in the input doesn't confuse the user. If you don't do this, you might have use val() instead of text() in the jQuery above.
Well, I hope I have shown you an improvement that maybe you hadn't thought about before. Be sure to checkout the demo and let me know in the comments what you would do different.
[dzone]