Building paging links: the sequel - PHP

How long has it been since we've reviewed the process for creating our paging links? A few seconds ago! Thus, let's move on to explaining how the numbered links are created.

Having calculated the total number of pages needed to display all of the records, the process is pretty straightforward. We simply create regular <a> elements, styling them with a few CSS properties, and insert them as child elements within the general <div> container. Here's the code to perform those operations:

// create numbered links
for(var i=1;i<=numPages;i++){
  if(i!=page){

    // create paging links
    div.appendChild(document.createTextNode(' '));
    var a=document.createElement('a');

    // assign paging links attributes
    a.href='#';
    a.id=i;
    a.style.fontFamily='Verdana';
    a.style.fontSize='11px';
    a.style.fontWeight='bold';
    a.appendChild(document.createTextNode(i));

    // append link to <div> container
    div.appendChild(a);

    // append blank space
    div.appendChild(document.createTextNode(' '));

    // assign onclick event handler to paging links
    a.onclick=function(){

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

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

  // the current element is not linked
  var span=document.createElement('span');
  span.style.fontFamily='Verdana';
  span.style.fontSize='11px';
  span.style.fontWeight='bold';
  span.appendChild(document.createTextNode(i));
  div.appendChild(span);
  }
}

If we take a look at the above listed code, the operation to generate the numbered links is rather easy to follow. As I said, this section builds up the links, dynamically creating regular <a> elements, which are properly styled as usual, and assigns some properties, such as font typefaces, color and so forth.

Notice that within the main counter loop, we're outputting the current element as plain text, opposite to a regular a link. In this case, a <span> element is generated, applying a simple style, and finally appended to the general container for paging links, like this:

// the current element is not linked
var span=document.createElement('span');
span.style.fontFamily='Verdana';
span.style.fontSize='11px';
span.style.fontWeight='bold';
span.appendChild(document.createTextNode(i));
div.appendChild(span);

However, a more detailed explanation is in order. Having generated the paging links, as we did with the previous functions, each time a link is clicked, we need to update the overall output, that is, the record list in conjunction with the links themselves. So, the lines below perform the output updating process:

a.onclick=function(){

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

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

There are a couple of things that need to be revised. What about the <next> link creation? Don't worry; here's the code section that takes care of that:

// create next link
if(page<numPages){
  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('Next>>'));
  div.appendChild(a);
  a.onclick=function(){

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

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

As you can see, this snippet is very similar to the one used to build up the <previous> link. Here, we check whether the "page" array pointer is less than the total number of pages. If this is true, we create the proper link, this time appending to it the label "Next>>". Also, the updating process applied to each link must be rigorously performed. This way, when the link is clicked, we fire up in sequence our already familiar functions "displayRecords()" and "generateLinks()", passing the link ID as the parameter:

a.onclick=function(){

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

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

Once all of the paging links have being generated, all that we need to do is replace the old "paginglinks" <div> with the newly updated node, using the following line:

// replace old links node with new links node
linksDiv.parentNode.replaceChild(div,linksDiv);

I think that's all there to our "genarateLinks()" function. It's quite lengthy, but don't feel intimidated by it. At this level, hopefully we have developed the three core functions to display paged result sets, keeping all of the process within the client area.

Now let's look at how we can use these functions to generate our JavaScript-based result set.