Item Count in Table Footer and Changes to the tableSorter-pager Plugin Demo

by Bill Beckelman 25. November 2008 06:38

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:

image

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:

image

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]  kick it on DotNetKicks.com

Tags:

Comments

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading



Powered by BlogEngine.NET 1.4.5.7
Theme by Mads Kristensen


About Me

I live and work in Salt Lake City, Utah. My background is in aviation. I have a degree in Aeronautical Science from Embry-Riddle Aeronautical University in Prescott, AZ. I have worked as a commercial airline pilot and most recently as a technical advisor for a charter airline.