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

1 - 2 - 3 Next >> Building the paging links - 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

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.



 
 
>>> 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: