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

Showing database records: the "displayRecords()" function - 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

When it comes to displaying database records, we need to define a specific function to perform that task. Before we list the function code, let's explain how it will behave. Doing so, its logic will be much easier to understand. Take my word for it.

Since the records are already stored in the "rows" JavaScript array, the only assignment for this function is to extract the corresponding elements from it, and then insert their values into paragraph elements. Next, the whole set will be wrapped up by a regular <div> container and appended to the document tree. It's that simple.

I know that explaining this in words without showing any code is pretty pointless, so here's the listing for our "displayRecords()" function:

displayRecords=function(page){
  var recsDiv=document.getElementById('records');
  if(!recsDiv){return;}
  var div=document.createElement('div');
  div.id='records';
  if(!page){page=1;}

  // extract records from rows array
  for(var i=(page-1)*recsPage;i<((page-1)*recsPage)+recsPage;i++){
    if(rows[i]){

      // insert records as paragraph elements
      var p=document.createElement('p');
      p.appendChild(document.createTextNode(rows[i]));
      div.appendChild(p);
    }
  }

  // replace old records node with new records node
  recsDiv.parentNode.replaceChild(div,recsDiv);
}

If the above code seems to be a bit messy, don't worry. We'll explain some sections of code.

As I said previously, the function really extracts the records from the "rows" array, using a record pointer called "page," which is passed as the unique parameter. This pointer is used internally to calculate the position within the array and display the exact number of records. The lines listed below perform that operation:

for(var i=(page-1)*recsPage;i<((page-1)*recsPage)+recsPage;i++){
  if(rows[i]){

    // insert records as paragraph elements
    var p=document.createElement('p');
    p.appendChild(document.createTextNode(rows[i]));
    div.appendChild(p);
  }
}

Notice that we're putting each record inside <p> elements, and wrapping them with a <div> tag. The only thing left is to insert the complete updated structure into the document. To do so, I've opted to replace the existing "records" <div> element with a new one, using the expression:

recsDiv.parentNode.replaceChild(div,recsDiv);

Oops! I think that the code was pretty hard to explain, but it's worthwhile. Thus, having defined the functions to contain records and paging links, as well as for displaying paginated data, what's our next step? We need to create the paging links. That's what we'll learn to do in the next section.



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