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 the first part I created an introductory example, aimed at demonstrating how to use the Quick Pagination plug-in to paginate a set of HTML paragraphs. Below I included for you the full source code corresponding to the example in question, so you can analyze it in detail and grasp its underlying logic. 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>

From the earlier code fragment, it’s clear to see that paginating either a bunch of trivial paragraphs or other HTML elements by using the Quick Pagination plug-in is an extremely straightforward process that can be tackled with only minor headaches. As you can see above, the plug-in’s workhorse is its “quickpaginate()” method, which takes as an incoming argument the number of elements to display per page.

Additionally, it’s possible to specify whether or not a default page counter will be displayed on the browser, via the optional “showcounter” parameter. In this example, the parameter has been assigned a value of TRUE, meaning that when the previous web page is parsed by the browser, the following output is echoed to the screen:

Obviously, Quick Pagination does a decent job of implementing a simple pagination mechanism. If you need to use a pagination system that is fully loaded with all the rings and bells, however, you should look at either a server-side library or another jQuery plug-in among the numerous ones available nowadays.

All in all, now that you've learned the inner workings of the previous example, it’s time to explore a few other handy features offered by the Quick Pagination plug-in. So far, I demonstrated how to display chunks of paragraphs along with a page counter, but what if I want the counter to be removed from the pagination system? Well, that’s exactly the topic that I plan to cover in the next section, so to get there, click on the link below and keep reading.

Next: Tweaking the plug-in's parameters >>