How to toggle number of rows with jquery?

Question

I want to add Toggle show-rows like Google analytics top content.

At the bottom of Google analytics top content, there is a dropdown option to select 20, 50 etc to toggle number of top content.

I want to add this javascript to my dynamically generated product list.

It seems like it uses onCharge in select tag.

I want to use jquery for this function.

Could anyone any advices for this or any resources?

Thanks in advance.

Answer 1

Well, I can't really provide you the codes, but here area few pointers.

Wire up the "select"'s onchange event to trigger an ajax call (number of rows being one of the parameters) that will fetch the data from a server-side resource.

Populate the fetched data in a container.

Resources:
- onChange event: http://docs.jquery.com/Events/change
- Ajax call (many varieties): http://docs.jquery.com/Ajax
- Some good data table related JQuery plugins:
* 15 Great jQuery Plugins For Better Table Manipulation
* http://www.datatables.net/