JAVASCRIPT

Hiding the Page Counter with the jQuery Quick Pagination Plug-in

In this second article in a three-part series, I discuss how to use the Quick Pagination jQuery plug-in for paginating a group of sample HTML paragraphs. In this case, the page counter provided by default was hidden from display, which shows how easy it is to customize the plug-in’s behavior by playing around with its incoming arguments.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 3

December 22, 2009

TABLE OF CONTENTS:

In keeping with the concepts deployed in the segment you just read, the next (and last) thing that I’m going to do in this tutorial will consist of showing the finished version of the example developed previously. It demonstrates how to use the Quick Pagination plug-in to paginate a bunch of paragraphs without displaying the default page counter. Here’s the corresponding code sample:

<!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 without the showcounter parameter</title>

$(document).ready(function(){

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

});

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

Mission accomplished. As this final code fragment proves, tweaking the behavior of the Quick Pagination plug-in and modifying the output that it generates is a very simple process that can be mastered quickly, even if you’re not familiar with the ins and outs of the jQuery library.

But wait a minute! I already showed you the source code of the web page displaying the set of paginated paragraphs, but not the image that describes this process in a graphic fashion. So, before I forget to do that, here’s the screen shot that complements this example:

Finally, feel free to edit all of the code samples included in this article. Doing this will give you a better understanding of how to use the Quick Pagination plug-in.

Final thoughts

In this second episode of the series, I discussed how to use the Quick Pagination jQuery plug-in for paginating a group of sample HTML paragraphs, but in this particular case, the page counter provided by default was hidden from display, which shows how easy it is to customize the plug-in’s behavior by playing around with its incoming arguments.

In the upcoming article, the handy capabilities provided by Quick Pagination will be taken to the next level, since I’m going to demonstrate how to use the plug-in for paginating a set of images.

Want to find out how this will be done? Then don’t miss the next tutorial!

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.