Facebook

JQuery pagination - implementation

1. We need the following files for correct functioning of pagination:

We have to insert the links to the following files in the heading of the HTML document (website):

<link rel="stylesheet" media="screen,projection" type="text/css" href="./css/pagination.css" />
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/jquery.pagination1.0.5.js"></script>

Note: you can change the files location, but it is necessary to set the correct pathes in the links to these files in the heading of the document, or the pathes to the prev.png and next.png images in the pagination.css file.

2. Copy the following code with parameters to the heading of the HTML document (website) under the links to the above stated files:

<script type="text/javascript">
 // jquery.pagination setting
 $(document).ready(function(){
  $.pagMag.startPagination(
   perPage = 10, // items per page
   reload = 0, // 0 by default (the value of 1 will keeps the actual page even after reload, but the cookies.js module is necessary for it)
   item = 'galleryItem', // corresponds to the paginated items class
   pager = 'galleryPager' // corresponds to the identifier of one´s own pager
  );
 });
</script>

Note: The parameters item and pager are optional and if we are going to use the pagination in more subordinated pages of the website, we can select different names of parameters to differentiate each pagination. For example, galleryItem and galleryPager for pagination of the gallery images, or forumItem and forumPager for pagination of the forum items.

3. We have to assign the class that corresponds to the above stated optional parameter item, in this case it is the galleryItem, to ALL the elements (items) that we want to paginate.

<div class="galleryItem">The number is: 1</div>
example for a table:
<tr class="galleryItem"><td>The number is: 1</td></tr>

Note: We can assign css caracteristics for the modification of the paginated items to the above stated galleryItem class.

Note: You can add another class to the elements (so called classes assembling) where you can insert additional (or original) styles for the modification of the elements (e.g., myclass).

<div class="galleryItem myclass">The number is: 1</div>

4. Insert your own element for pagination with an identifier (id), corresponding to the above stated pager parameter (in this case galleryPager), in the website.

<div id="galleryPager"></div>

Note: We can assign css characteristics for the modification of the pagination (position, etc.) to the above stated identifier galleryPager.

And it is ready.

Cookie version

You can use the cookie version in case that you would like to keep the actual page even after website reload. It can be useful when you paginate for example forum contributions, where the user can send his contributions via a form. If you used the version without the cookie, after sending the form the system would set the first page (1) as the actual page. To be able to use the cookie, you have to download the JQuery plugin cookies.js (http://plugins.jquery.com/cookie), which can assure the inscription and the reading of the cookie with the actual page value in the user´s web browser. Save it to the js folder and insert the link to the following file in the document heading:

<script type="text/javascript" src="./js/cookies.js"></script>

Then set the reload variable to the value of 1 (0 by default) in the javascript code in the document heading.

<script type="text/javascript">
 // jquery.pagination setting
 $(document).ready(function(){
  $.pagMag.startPagination(
   perPage = 10, // items per page
   reload = 1, // 0 by default (the value of 1 will keeps the actual page even after reload, but the cookies.js module is necessary for it)
   item = 'galleryItem', // corresponds to the paginated items class
   pager = 'galleryPager' // corresponds to the identifier of one´s own pager
  );
 });
</script>

Setup modification

The size, style and colour of the digits can be modified in the pagination.css file. The prev.png and next.png arrows can be substituted by your own ones. Be careful with the size.