Question

I am looking for some general wisdom here.

I am looking for an elegantly simple way to limit the number of rows in a table that are presented on a page with a “view all >>” to get the whole table presented in the view. I considered all of the following,… some in combination:

1. two different partials,… one that lists a limited number of rows with a “view all >>” link at the bottom and a second that lists all with a “collapse >>” link at the bottom.
2. using jQuery
3. a css solution
4. ajax

Any links and / or snippets would be helpful in addition to your rationale for choosing one over another. I would prefer to minimize server / database requests without creating a voluminous coding monument to ingenuity of the programmer (me) :=]

Thanks!

UPDATE: Look here to see code written before that could be adapted. Many thanks to Neal for the jsfiddle.net resource.

Answer 1

A GREAT solution for big tables is a Grid. My grid of choice is DataTables

Grids solve a lot of problems: sorting, paging, filtering, ajax loading, and showing/hiding results. It’s likely you’re only talking about the limiting portion of the equation, but I’d submit that ALL the features have a value in interfaces, so they’re all worth looking at.

Setting it up is easy and you have three options for data:

1. Build a proper HTML table with <thead> and <tbody> tags. The grid interprets the DOM and styles accordingly.
2. Provide a valid JSON string with table data. DataTables builds the HTML for you.
3. Supply JSON via AJAX. This also allows you to "pipeline" data to lookup data ahead of and behind the desired.

Datatables is JQuery driven, so you’ll have to include Jquery and the DataTables code. There is also a bit of CSS to make things "pretty" That’s it….pretty easy. Once you get the hang of it, producing a new DataTable from scratch takes 2-3 minutes. Considering the features, that’s a minimal investment in your UI.

As to performance, I have a DataTable handling 2.5 million records without fail. It utilizes JSON pipelining, paging, sorting, and filtering (and a well-indexed MySQL DB) to maintain acceptable performance.