1 - 2 - 3 Next >> Building the paging links - PHP

In order to create the paging links, required to display paged records, we'll start by defining another useful JavaScript function called "generateLinks," which accepts only one incoming parameter: an array pointer that nicely determines our position inside the "rows" array.

Using this pointer, the function is capable of verifying whether it's possible to generate the usual <previous> and <next> links, along with the regular numbered links. But, doesn't it sound like we've used this parameter before? Yes! The pointer is the same one that we utilized to display the records in our previous "displayRecords()" function. As we'll see in a moment, the same parameter is used to output both records and paging links. But, I'm getting ahead of myself! Let's get on with the step-by-step explanation process.

For the sake of not feeling overwhelmed by the apparent complexity of the function, let's divide it into a few more digestible sections. The first one simply retrieves the <div> element for the paging links, creates a new <div> and assigns an "paginglinks" ID attribute to it, as listed below:

var linksDiv=document.getElementById('paginglinks');
if(!linksDiv){return;}
var div=document.createElement('div');
div.id='paginglinks';

Why are we doing this? Since we're keeping this on the client side, with no requests to the server to update page contents, this is the basic way we're updating our paging links. We get the document node identified as "paginglinks" where the links are placed, update them accordingly, and finally replace the old node with a new one. Simply and straightforward, huh?

The second section of the function checks to see whether it's feasible to generate a <previous> link, in a way similar to that used in server-side scripts. So, here's the code to generate our link:

// create previous link
if(page>1){
  var a=document.createElement('a');
  a.href='#';
  a.id=parseInt(page)-1;
  a.style.fontFamily='Verdana';
  a.style.fontSize='11px';
  a.style.fontWeight='bold';
  a.appendChild(document.createTextNode('<<Previous'));
  div.appendChild(a);
  a.onclick=function(){

    // update record list
    displayRecords(this.id);

    // update paging links
    generateLinks(this.id);
  }
}

Okay, that's not big deal! If you have ever created a server-based paging system, the code is fairly understandable. The function checks to see whether the "page" array pointer is placed at a position other than the first one (page>1). If this is true, then a <previous> link is generated, and receives some regular styles, such as font typefaces, font weight, size and color. Then, the classic <previous> label is inserted inside the link, and finally appended to the "paginglinks" <div> container.

However, there are a few things to consider here. Notice that we've assigned an ID to the link:

a.id=parseInt(page)-1;

The reason for doing this should become clear. Whenever the link is clicked, we need to update the list of records and the paging links themselves. To do so, we first make a recursive call to the "generateLinks()" function, passing this ID to it, and finally calling our known displayRecords() function, with the same ID value, as illustrated below:

a.onclick=function(){

  // update record list
  displayRecords(this.id);

  // update paging links
  generateLinks(this.id);
}

If you're feeling a bit confused, don't worry. It really works!

Next, we'll focus our attention on the section aimed at generating the numbered links.