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.