Home arrow JavaScript arrow Page 4 - Paginating Database Records with the jQuery Quick Pagination Plug-in
JAVASCRIPT

Paginating Database Records with the jQuery Quick Pagination Plug-in


In this fourth part of a five-part series, I start developing a basic database-driven web application that displays a list of fictional users fetched from a MySQL table. The application is capable of generating a couple of static sections of a web page, including the typical header and footer sections.

Author Info:
By: Alejandro Gervasio
Rating: 5 stars5 stars5 stars5 stars5 stars / 2
December 30, 2009
TABLE OF CONTENTS:
  1. · Paginating Database Records with the jQuery Quick Pagination Plug-in
  2. · Building a sample MySQL table
  3. · Building a basic MySQL abstraction class
  4. · Defining the header and footer sections of a web page

print this article
SEARCH DEVARTICLES

TOOLS YOU CAN USE

advertisement
Paginating Database Records with the jQuery Quick Pagination Plug-in - Defining the header and footer sections of a web page
(Page 4 of 4 )

 

The last thing I need to do before showing how to use the Quick Pagination plug-in for paginating the group of records stored on the pertinent “users” MySQL table is define the header and footer sections of the web page that will implement the pagination mechanism.

As you may have guessed, these sections will contain only static markup, and will look as follows:

(header.htm)

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Paginating database records with jQuery Quick Pagination plug-in</title>

<style type="text/css">

body {

padding: 0;

margin: 0;

background: #fff;

font: 1em Arial, Helvetica, sans-serif;

color: #000;

}

#wrapper {

width: 960px;

margin: 0 auto;

background: #f0f0f0;

}

#header, #content, #footer {

padding: 30px;

}

#users {

padding: 30px;

background: #c0c0ff;

border: 1px solid #000;

}

</style>

</head>

<body>

<div id="wrapper">

<div id="header">

<h1>Paginating database records with jQuery Quick Pagination plug-in</h1>

<h2>Header section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

 

(footer.htm)

 

<div id="footer">

<h2>Footer section</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse auctor commodo risus, et ultrices sapien vestibulum non. Maecenas scelerisque quam a nulla mattis tincidunt. Etiam massa libero, pharetra vel laoreet et, ultrices non leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

</div>

</body>

</html>

As seen above, the XHTML page responsible for displaying the set of paginated database records will be assembled in separate sections, a commonly-used approach when working with procedural PHP scripts. At this stage, only the page’s header and footer static areas have been defined, but there’s a section to come that will show dynamic content fetched from the corresponding “users” MySQL table.

But guess what? The definition of this remaining partial web page will be covered in the final part of the series, so for the moment feel free to take a deep breath and read the remainder of this article.

Final thoughts

That’s all for the moment. In this fourth chapter of the series, I started developing a basic database-driven web application that displays a list of fictional users fetched from a MySQL table. So far, the application is in a rather incomplete state, since it’s only capable of generating a couple of static sections of a web page, including the typical header and footer sections.

It’s necessary to define an additional section that not only shows the user-related database records on screen, but displays them in chunks of paginated data. Well, all of these tasks will be properly addressed in the last tutorial of the series. They will require the implementation of a page controller in PHP and the use of the Quick Pagination plug-in.

Don’t miss the final chapter!


DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus
JAVASCRIPT ARTICLES

- More Top jQuery Tutorials for Beginners
- More Top jQuery Plugins for Menus
- Top jQuery Tutorials for Beginners
- New UI Framework and SDK for JavaScript Rele...
- JavaScript OpenPGP Tool, Node.js 0.6.3 Avail...
- Yahoo Releases Cocktails Language and Develo...
- Customizing jQuery Slideshows: Dynamic Contr...
- Customizing jQuery Slideshows: the animate()...
- Customizing jQuery Slideshows: slideUp() and...
- Customizing jQuery Slideshows: hide() and sh...
- Web Workers: Performing Calculations in Para...
- More Top JavaScript Frameworks and Libraries
- More Dynamic jQuery Styling Techniques
- The Top JavaScript Libraries
- The Top JavaScript Frameworks

Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Weekly Newsletter
 
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 
Support 



© 2003-2012 by Developer Shed. All rights reserved. DS Cluster 6 - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials