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:

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

As you can see, this sample XHTML document is composed of the classic header, main content and footer sections, which have been provided with a basic visual style. So far, this shows nothing particularly interesting, except for the fact that the content area has an inner div identified as “datacontainer,” which includes a group of paragraphs.

As you’ll realize, if the page is tested in its current state, the paragraphs will be displayed in one row down the page, following the normal rendering flow. However, there will be cases where text displayed in the form of paragraphs, lists, and so forth will be pulled directly from a database, which requires the implementation of a pagination mechanism to make the whole navigation process friendlier and more accessible.

Here’s where the Quick Pagination plug-in comes into play. It can be used for reorganizing the previous paragraphs in nicely paginated chunks, instead of forcing you to have a monolithic block of text.

Thus, now that the previous paragraphs are ready to be used with the Quick Pagination plug-in, in the next section I’m going to create a small segment of JavaScript code that will put the plug-in to work.

To see how this will be done, click on the link below and keep reading.

Next: Adding behavior with the Quick Pagination jQuery plug-in >>