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

Defining data containers: the "createDivs()" 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

Before we start writing the code for the JavaScript functions, it's necessary to initialize a couple of global variables that we need to use at a later time. First, let's specify the number of records to be displayed at a time. For our example, we'll assign a value of 4:

var recsPage=4;

Second, let's calculate the number of pages needed to show the paginated records:

var numPages=Math.round(rows.length/recsPage);

As you can see, this value is obtained by dividing the total number of elements contained in the "rows" array (rows.length) by the total number of pages. Finally, the result is rounded using the "round" method provided by the JavaScript "Math" object. Okay, our work for the variable setup is now finished. Let's look at the functions.

To begin with, we'll only need three core functions. The first function, which I've named "createDivs," takes care of creating two <div> containing elements. The first <div> will be used to contain the proper database record values, while the second will hold the paging links. This sounds pretty logical.

Once we've seen the reason to create this function, let's have a look at its definition:

createDivs=function(){
  // create records containing <div>
  var recsDiv=document.createElement('div');
  recsDiv.id='records';

  // create paging link containing <div>
  var linksDiv=document.createElement('div');
  linksDiv.id='paginglinks';

  // insert <div> elements into document structure
  document.body.appendChild(recsDiv);
  document.body.appendChild(linksDiv);
}

As you can see, the function creates the "recsDiv" <div> element in memory and assigns to it a "records" ID attribute, handy for applying a CSS style. This is the element that will contain record data. Here's the code for the element's creation and ID assignment:

// create records containing <div>
var recsDiv=document.createElement('div');
recsDiv.id='records';

Next, in a similar way, a second "linksDiv" is generated, tying a "paginglinks" ID to it, suitable for element styling. Obviously, this element will contain the record paging links:

// create paging link containing <div>
var linksDiv=document.createElement('div');
linksDiv.id='paginglinks';

Once these containers have been created, they are properly inserted in the Web document tree, as follows:

document.body.appendChild(recsDiv);
document.body.appendChild(linksDiv);

I told you that this function was easy to grasp! With this first function defined, our next task is to set up the second one, which is called "displayRecords." Not surprisingly, it will show the records in a paginated way. Let's move on and jump into its source code.



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