• Choose a category
• All
• Classic-Fiction

chapter_08/07_repeating_table_header/script.js (excerpt)

var TABLE = {};

TABLE.repeatHeader = function(table, every) {

$(table).each(function() {

var $this = $(this);

var rowsLen = $this.find('tr:not(:first)').length;

$(this).find('tr:first')

.clone()

.insertAfter($this.find('tr:nth-child(' + every + 'n)'));

if ((rowsLen) % every === 0) {

$this.find('tr:last').remove();

}

});

}

We’ve created a function that accepts the selector string for our table, and a number representing how many rows to leave between each repeat of the header. We then cycle through each element our selector finds (so our function can be applied to more than one table on the same page). For each item, we set up a shortcut to the $(this) element and grab the number of rows in the table. It’s important to store the number of rows in advance, because when we repeat our table headers, the number of rows is going to change!

Next comes the workhorse: we copy out the first row (as we did before) and insert it every “nth” row. This needed to be slightly rewritten with a find action, so it could be run on any of a number of tables matched by the selector—but otherwise it’s exactly the same as our first effort. The final part of the code does a small bit of math to determine whether we’ve added a header as the final row of the table; if the total number of rows divides evenly by our repeater number, we need to remove the last row.

Data Grids

“These changes to the admin section are just great,” says our client in a here comes a big request kind of way, “but it would be great if we could replace the old desktop application that the marketing manager uses. It hooks into the same database, but it lets her sort and move around the data, and edit different cells—all on the one page! But I suppose that’s impossible, right?”

Sure, he’s gone and laid the old reverse psychology on us, but it works every time. “Of course it’s possible!” you laugh, looking at the crusty Windows application he’s demonstrating. “In fact, I could do it even better—it’s just a matter of taking …”

“Great!” says the client, slapping you on the back. “Let me know when we can have a look at it.” And out he walks—off to another one of his “business meetings.” Looking back at the application, you realize that, yes, indeed you can do it better. What you need to do is transform our simple table into a data grid.

There’s no set definition for what constitutes a data grid, but some common features are sorting, filtering, searching, paging, column resizing, and row editing. Let’s have a go at some paging and inline editing.

Pagination

A huge long table can be quite scary to encounter on a web site—especially as screen real estate is so valuable. Adding paging to a table lets us display a small subset of the data at any one time, while allowing the user to move through it easily with navigation buttons.

Pagination is often handled by the server. The user can request a specific page of data and the server will return it. This makes a lot of sense for massive amounts of data: if you loaded 10,000 table rows into your browser it might become a little sluggish. But for smaller sets, it can make sense to load everything onto the page at once; all data is stored locally, and there are no refreshes every time the user wants to move through the data. Our jQuery pagination widget is shown in Figure 8.7.

Figure 8.7. Paging tables

The table paging widget that we’ll create will have clickable Next and Previous buttons, as well as a display of the current page and total number of pages. The structure of the HTML is quite important, as jQuery will need to traverse from the paginated table to the navigation items:

chapter_08/08_pagination/index.html (excerpt)