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.
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">
<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.