Simple Pagination

This plugin is exactly what its name says... a simple pagination plugin.

demo

Now that you've seen how it looks like, let's see what you must do to use it in your website. Here are the steps in the order they must be followed:

  1. You load the jQuery library, used by the plugin.

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

  2. You load the plugin (the minified version, or the full version if you'd like to make any adjustements to it).

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

  3. You initialize the plugin with its parameters when the DOM is ready.

    <script type="text/javascript">
        $(function(){
            var perPage = 5;
            var opened = 1;
            var onClass = 'on';
            var paginationSelector = '.pages';
            $('.gallery').simplePagination(perPage, opened, onClass, paginationSelector);
        });
    </script>

And you're done!
Now, as you can see, the Simple Pagination plugin accepts four parameters:
- the number of items to show per page
- the index (1-based) of the page you want opened by default
- the class of the selected page number
- the jQuery selector of the pagination container element (div)

For the jQuery selector of the pagination container element (div) you can use either a class or an ID, like this: if you have a class the selector will use a dot
var paginationSelector = '.pages';
if you have an ID, the selector will use a hash sign
var paginationSelector = '#pages';

And you can also initialize the plugin in a single line, without separately defining the parameters:

<script type="text/javascript">
    $(function(){
        $('.gallery').simplePagination(5, 1, 'on', '.pages');
    });
</script>

You can download the plugin below. The archive includes an example and the full and minified versions of the plugin.

download the plugin

The plugin works with jQuery 1.4 and higher.

For those of you who haven't seen it before,
    $(function(){ code goes here });
is a shorthand for
    $(document).ready(function(){ code goes here });

For any questions, requests or any idea you would like to share with me, please contact me here.