Home arrow PHP arrow Page 6 - PHP and JavaScript Interaction: Storing Data in the Client, part 3

Building paging links: the sequel - PHP

In the final article in our series about using PHP and JavaScript to store data on the client side, we will be building on what we learned about server and client interaction to create a JavaScript-based paginating system.

TABLE OF CONTENTS:
  1. PHP and JavaScript Interaction: Storing Data in the Client, part 3
  2. Records wanted! Fetching data from tables
  3. Defining data containers: the "createDivs()" function
  4. Showing database records: the "displayRecords()" function
  5. 1 - 2 - 3 Next
  6. Building paging links: the sequel
  7. Building client-based result sets: making PHP and JavaScript interact
By: Alejandro Gervasio
Rating: starstarstarstarstar / 14
May 18, 2005

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement

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.



 
 
>>> More PHP Articles          >>> More By Alejandro Gervasio
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

PHP ARTICLES

- Hackers Compromise PHP Sites to Launch Attac...
- Red Hat, Zend Form OpenShift PaaS Alliance
- PHP IDE News
- BCD, Zend Extend PHP Partnership
- PHP FAQ Highlight
- PHP Creator Didn't Set Out to Create a Langu...
- PHP Trends Revealed in Zend Study
- PHP: Best Methods for Running Scheduled Jobs
- PHP Array Functions: array_change_key_case
- PHP array_combine Function
- PHP array_chunk Function
- PHP Closures as View Helpers: Lazy-Loading F...
- Using PHP Closures as View Helpers
- PHP File and Operating System Program Execut...
- PHP: Effects of Wrapping Code in Class Const...

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: