Flat File Database Demo 6

7th February 2012 · Last updated: 5th October 2016
 

Inspired by a request from user Dan Pena, this demo splits the results of a flat file database search into separate pages. Instead of listing everything in one long list, the results are shown page by page. There are buttons to move to each new page.

You can define the number of results shown on each page via the variable $limit at the start of the code. I've set it to 10 as that looks nice. So if there are 15 results in a search, only the first 10 are shown. A button appears to see the next page, which has the remaining 5 results on. Got that? Good! Try it and you'll see what I mean:

RUN THE DEMO

So how does it work? Well firstly, some things to know:

  • The demo uses JavaScript to show and hide each page. This avoids having to reload the whole results again, or doing the search again for each new page. I figured I could output the results as one long list, then hide the ones on the later pages. This is achieved using simple CSS to restyle the list so only one page shows at a time. That's where the JavaScript comes in.
  • Alas the JavaScript required doesn't work in Internet Explorer 8 or less. There is alternative JavaScript I got to work, but it also affects other browsers, so it would be acted on twice. Luckily IE9 should work with the new standards-compliant JavaScript. (I've left the code in commented out for older versions of IE, incase you really, really need it.)
  • If JavaScript is turned off, then the whole list is shown. Good eh?

So there aren't really any pages as such - it's all done with one page. I realise this creates accessibility concerns (as you can't bookmark the pages). I might redo the demo later to work with physical pages instead.