jQuery mmPaginator. Just another jQuery plugin

What is jQuery mmPaginator?

In today web applications you often need to display search results, long lists of objects in catalog, long lists of post titles and so on...
jQuery mmPaginator is a jQuery plugin which creates a pagination system for your results page. In his basic use all you have to do is simply pass the script the total number of records and how many records you want to show per page.
More than this: you can easily use it to create a carousel, a news rotation system an image gallery and so on with the customFunction feature.

How does it work?

Basically it's a client side script that creates links to the same page in which is implemented.

What does the script need to run?

First of all: download the script HERE (zip with all you need).
Then you need both jQuery Library and jQuery UI Core.
That's all you need to run jQuery mmPaginator.

Implementation.

To implement jQuery mmPaginator first of all, upload all the files (js,css,images) to your server; then you have to include all the needed files in your web page.


                    	<head>

                        ...

                    	<link rel="stylesheet" type="text/css" href="/myfolder/jquery.mmPaginator.css" />

                        <script src="/myfolder/jquery.min.js" type="text/javascript"></script>

                        <script src="/myfolder/jquery-ui.min.js" type="text/javascript"></script>

                        <script src="/myfolder/jquery.mmPaginator.js" type="text/javascript"></script>

This is a tipycal implementation but you'd better use the apis from google apis content distribution network:
http://code.google.com/intl/it-IT/apis/libraries/devguide.html#jquery

Now you can add a <div> where you want the mmPaginator to be created. For example:


                    	<div id="mymmPaginator"></div>

The final step is to inizialize the mmPaginator. You can do that using the jQuery .ready() event.
So in your javascript code you'll use:


                    	<script>

                            $(document).ready(function(){

                              $("#mymmPaginator").mmPaginator({

                                numRows:n,

                                rowsPerPage:20

                            });

                        </script>

This is the basic (click here for an example) implementation of the mmPaginator; numRows represent the total number of results while, rowsPerPage is how many results you are going to display in each page. The jQuery mmPaginator will calculate the number of pages and create the links.
Now that mmPaginator is up and running you have to modify your server side script accordingly; consider that what the script does is to add a parameter to the URL of the page. This parameter is pgrOff and the value is the value of the page (click on page 4 will add prgOff=4). Now you can easily create your server side script. For example a typical implementation with MySql and C# could be something like that:


                    	<%

                        	double start=0;

                            const int perPage=20;

							if(Convert.ToDouble(Request.QueryString["pgrOff"])>0){

							    start=Convert.ToDouble(Request.QueryString["pgrOff"])*perPage-perPage;

							}else{

							    start=0;

							}

                            //now you can create your query

                            strSQL="SELECT * FROM myTable LIMIT "+start+","+perPage

                        %>

This is just an example of what you can do server side.

Options.

These are all the options of jQuery mmPaginator:

OPTION	DEFAULT VALUE	TYPE
numLinks	10	int
> this is the number of the links visible in the mmPaginator
numRows	1	int
> this is the number of the results (or images, etc...)
rowsPerPage	1	int
> this is the number of the results you want to show in each page
pagHeight	70	int
> this is the total height of the mmPaginator (in pixels)
pagWidth	580	int
> this is the total width of the mmPaginator (in pixels)
pagBgColor	'#FFF'	string
> this is the mmPaginator background color
scrollBarColor	'#DDD'	string
> this is the color of the scroll bar
borderColor	'#000'	string
> this is the color of the mmPaginator border
pagHighlightColor	'#F00'	string
> this is the color of the link (page number) of the selected page
infoFontColor	'#000'	string
> this is the color of the info text of the mmPaginator
totalPagesLabel	'Total pages:'	string
> you can overwrite the 'Total pages:' label with your own text
selectedPagelabel	'Selected page:'	string
> you can overwrite the 'Selected page:' label with your own text
hideBorder	true	bool
> this option shows or hide the mmPaginator border
hideInfo	false	bool
> this option shows or hide the mmPaginator infos (Total, Selected pages)
showNextPrev	true	bool
> shows or hide the next and previous arrow
previousLabel	'Previous page'	string
> you can overwrite the 'Previous page' (alt of the image) with your own text
nextLabel	'Next page'	string
> you can overwrite the 'Next page' (alt of the image) with your own text
startPage	1	int
> usually mmPaginator will start from page 1, but if you have the need to start with another page, simply change this value with a valid int; obviously you have to pay attention to not create links or start with a page out of the bounds (page < 0 or > total pages)
customFunction	false	bool
> this is not properly an option: infact here you can overwrite the normal action of the mmPaginator itself and create your fully custom function; mmPaginator pass to the function the value of the pgrOff parameter.

Using customFunction.

With this option you can create your custom function; for example you could simply create an image gallery click here for an example.
You could also combine the mmPaginator with jQuery $.ajax function (click here for an example) to load some content from the web server and fill it in your container. Think at a carousel or a news viewer...

moveToPage method

You can also use the moveToPage method to move the mmPaginator to a page from your javascript code:
$("mymmPaginator").mmPaginator("moveToPage","n"); where n is the page number.

Monteleone.me