Tab clear

By admin, posted on Nov 24th 2006

I had a quick though when waiting for different pages of a projectGenie pane. If you didn’t know (where have you been?) projectGenie allows you to view lists of information in neat little panes, and if there are too many items it paginates them, like this:

projectGenie pane pagination

Each time a page number is clicked it loads the content for the new pane in the background using AJAX niftyness. It’s cool, it’s very web 2.0. And it can be really slow. So what’s the answer?

Well, as far as I see it if I can reduce the number of calls to the database while still providing the slick in-page pagination effect then that would be great. And I can, and here’s how.

Preloading content

Let’s say I load *all* the items in the list, yes, even if there’s 200 of them. Don’t worry, we’re not going to display them all, just fetch them. So we’ve got our recordset of 200 database rows, and we want to split them into neat pane-pages of 20 per page. Easy, we just set up a little function to group the records into a single <div> when they are fetched from the database into chunks of 20. Like so:

(For this example any code executed by the system is in [square brackets] and any HTML output is in green.)


[Fetch 200 records from the database]
<div>
[Start looping]
Output the row details

If the counter has got to 20 then </div> <div>
[End looping]
</div>

So when we load all of this generated HTML into a content area we end up with something a lot like this:


<div id="pane1">
  <div>
    Line 1
    Line 2
    ...

    Line 20
  </div>
  <div>
    Line 21
    Line 22
    ...

    Line 40
  </div>
  ...etc
</div>

Using Javascript to do all the in-page manipulation (like what it is meant to do)

Now we can make Javascript set all of them invisible except the first one. We can also get Javascript to count the number of children of our content area (id = ‘pane1’) and built a pagination list for us. Then, when we click each of the links, Javascript would capture that event and make only the relevant child div of the content pane visible. Neato.

And there are other good points to this technique. Firstly it’s very accessible and degradeable. If someone doesn’t have Javascript enabled then they get everything displayed right in front of their eyes (not so good for really long sets of data). And it’s also great for print, because when you print the page you can make your print CSS file print all the rows of data in one long list.

So, it needs a bit of work but I like the idea of this.

Leave a Reply

Your email address will not be published. Required fields are marked *

What next?

On the blog

We're BETA forever, baby