jQuery Pagination Plugin: Smart Paginator - mshahbazsaleem/SmartPaginator GitHub Wiki

Smart Paginator is a comprehensive jQuery Pagination plugin that makes adding pagination very simple task, all the navigation logic is built in and it is also very customizable. Smart Paginator jQuery Pagination plugincan also filter your data automatically on client side. Click the screen shot below for the demonstration to see the various filter options provided by Smart Paginator. Smart Paginator supports variety of parameters and custom themes, that can be used to customize the look and feel to your desire.

Smart Paginator Parameters

totalrecords: Total no of records e.g. 50
recordsperpage: No of records on each page e.g. 10
controlsalways: If true next,prev,first and last buttons will be always visible
datacontainer: ID of HTML element which has the data you want to filter e.g id of some table
dataelement: Child elements type that you want to filter e.g. 'tr' in case your data container is a table, see the demonstration for different options.
length: This parameter determines the no of navigation buttons to be generated also next, prev, first and last button are displayed depending on this parameter. If value of length is greater than totalrecords/recordsperpage then next, prev, first and last buttons will not be displayed, default value of length is 10.
initval: Initial page to be selected, default is 0.
next: Text on Next button e.g. 'Next'
prev: Text on Previous button e.g. 'Prev'
first: Text on First button e.g. 'First'
last: Text on Last button e.g. 'Last'
go: Text on Go button e.g. 'Go'
theme: CSS class for theme e.g.'green'
display: Navigation display depending on the value 'double' or 'single'
onchange: callback function to be called on each value change, this function will give you the page no, starting index of data and end index of data.

Styling Smart Paginator

Styling Smart Paginator is very easy, you just need to define four CSS classes, for example to create theme named "green" we'll define our CSS like below.

.green
{
	background-color: #4f7305;
}
.green.normal
{
	background-color: #588500;
	color: White;
	border: solid 1px #5f9000;
}
.green.active
{
	background-color: #344C00;
	color: #F8EB00;
	border: solid 1px #5f9000;
}
.green .btn
{
	background-color: #588500;
	color: White;
	border: solid 1px #5f9000;
}

Now you can pass "green" as a parameter value for theme in the initializer method for Smart Paginator.

Using Smart Paginator

In your HTML file add the following in the head section.

Add a reference to latest jQuery script

<li>Add a reference to smartpaginator.js file</li>

<li>Add a reference to smartpaginator.css</li>

Create a text block element (e.g. div)within the body of your HTML file as shown below.

<div id="smart-paginator" > </>

Also add the following code to your HTML file’s head section.

   <script type="text/javascript">
        $(document).ready(function() {
              $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange

            });

            function onChange(newPageValue) {
                alert(newPageValue);
            }
    </script>

Here is the complete code for the example above.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Smart Pagination</title>
    
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>

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

    <link href="smartpaginator.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {

            $('#smart-paginator').smartpaginator({ totalrecords: 100, recordsperpage: 10, initval:0 , next: 'Next', prev: 'Prev', first: 'First', last: 'Last', theme: 'green', onchange: onChange

            });

            function onChange(newPageValue) {
                alert(newPageValue);
            }
        });
    </script>

</head>
<body>
    <div id="smart-paginator">
    </div>
</body>
</html>

Update History

Mar 15, 2011 Published.
Apr 03, 2011 Updated demo and added New Parameters 'recordStartIndex', and 'recordEndIndex' to onchange callback function.
Apr 21, 2011 Minor issue fixed and demo updated.
Feb 21, 2012 Vertical alignment issue fixed.
Feb 22, 2012 Next,prev,first and last button visibility parameter added.

For more useful web development resources and jQuery plugins, visit http://www.egrappler.com