JAVASCRIPT

Introducing the Quick Pagination jQuery Plug-in

In this first part of a three-part series, I provide you with a brief introduction to using the main features offered by the Quick Pagination jQuery plug-in. You'll appreciate many of its features, particularly its flat learning curve.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 1

December 18, 2009

TABLE OF CONTENTS:

If you’re anything like me, then it’s probable that you want to see how the previous JavaScript block can be tied to the example web page developed before. Considering this possibility, below I listed the finished version of the page, this time including the snippet that paginates the set of paragraphs. Here it is:

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

<head>

<title>jQuery Quick Pagination using paragraphs and the showcounter parameter</title>

$(document).ready(function(){

$("#datacontainer p").quickpaginate({ perpage: 1, showcounter: true });

});

</script>

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;

}

</style>

</head>

<body>

<h1>jQuery Quick Pagination using paragraphs</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>

</div>

<h2>Main content section</h2>

<p>This is the first paragraph that will be paginated with Quick Pagination jQuery plug-in.</p>

<p>This is the second paragraph that will be paginated with Quick Pagination jQuery plug-in.</p>

<p>This is the third paragraph that will be paginated with Quick Pagination jQuery plug-in.</p>

<p>This is the fourth paragraph that will be paginated with Quick Pagination jQuery plug-in.</p>

<p>This is the fifth paragraph that will be paginated with Quick Pagination jQuery plug-in.</p>

</div>

<h2>Footer section</h2>

</div>

</body>

</html>

There you have it. Now, thanks to the functionality provided by the Quick Pagination plug-in (and assuming that scripting has been enabled on your browser, naturally), if you give the above example a try, you should get an output similar to the following:

That looks pretty good, doesn’t it? Considering that displaying a bunch of paginated paragraphs along with the “prev/next” links and a page counter only required writing a few lines of JavaScript code, the final result is more than acceptable. And last but not least, if for whatever reasons JavaScript is disabled in the client, the paragraphs will still be displayed on screen, accessible to users.

This benefit on its own makes the Quick Pagination plug-in a library worth looking at, since it does its business without sacrificing accessibility.

Final thoughts

Over the course of this first chapter of this series, I provided you with a brief introduction to using the main features offered by the Quick Pagination jQuery plug-in. While it’s valid to mention that there are other handy options of the plug-in that I plan to cover in depth in subsequent tutorials, at this point it’s clear to see that its strongest point is by far its flat learning curve.

As you saw in the example developed a moment ago, paginating a few HTML paragraphs was a extremely straightforward process reduced to calling the plug-in with the appropriate arguments and including the number of elements to show per page together with the corresponding page counter.

Considering that the counter is actually an optional parameter, in the next part of the series I’ll be demonstrating how to paginate the set of paragraphs that you saw before without displaying this page counter.

Here’s my final piece of advise: don’t miss the upcoming article!

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.