Fork Me on GitHub

jPaginator

a jQuery plugin for pagination

jPaginator is a jQuery plugin for pagination. It's fun, intuitive, it comes with a slider and you can ask for an unlimited number of pages. Use it with a unique element, for more details please have a look at the code of demo1 and the plugin's options. Don't forget the CSS page "jPaginator.css". Dependencies : jQuery 1.3.2+, jQuery UI Slider

Of course, you can achieve a much better design with some CSS skills, please have a look at this tutorial by Ian Yates from webdesign.tutsplus.com.

Demo 1 : custom css

demo1

(the slider will disappear because the reset set nbPages to 20, nbVisible to 6, which mean 20/6 = 4 slides, or minSlidesForSlider = 5...)

Demo 2 : constant speed, no slide

demo2


Demo 3 : high number of pages, max acceleration

demo3



Plugin's options (with default values) :

selectedPage: null,
Current page
nbPages: 100,
Total number of pages
nbVisible: 10,
Number of pages by slide
widthPx: 30,
Page-number width (px)
marginPx: 1,
Page-number margin (px)
overBtnLeft: null,
Element id of the over button left (move forward on mouseover)
overBtnRight: null,
Element id of the over button right (move backward on mouseover)
maxBtnLeft: null,
Element id of the max button left (go to first slide on click)
maxBtnRight: null,
Element id of the max button right (go to last slide on click)
withSlider: true,
Display slider (true/false),
withAcceleration: true,
Enable acceleration (true/false)
speed: 2,
Animation speed (1 to 5)
coeffAcceleration: 2,
Acceleration speed (1 to 5)
minSlidesForSlider: 3,
Minimum number of slides to display the slider. Ex : if nbPages=32 and nbVisible=10, 32/10 = 4 slides, so if minSlidesForSlider = 5 then slider won't be displayed.
onPageClicked: function(a,num) {}
Function called when a page number is clicked (where a = the root element of the paginator)

Code of demo1

The Javascript :
$("#test1").jPaginator({ 
    nbPages:54, 
    selectedPage:22,
    overBtnLeft:'#test1_o_left', 
    overBtnRight:'#test1_o_right', 
    maxBtnLeft:'#test1_m_left', 
    maxBtnRight:'#test1_m_right',
    minSlidesForSlider:5, 
    onPageClicked: function(a,num) { 
        $("#page1").html("demo1 - page : "+num); 
    }
});  

// code for the reset button 
$("#resetdemo1").click(function(){ 
    if ( !isNumeric($("#nbpages1").val()) ) return; 
     
    $("#test1").trigger("reset",{  
        selectedPage:null, 
        nbVisible:6, 
        nbPages:$("#nbpages1").val(),
        marginPx:8, 
        speed:1 
    }); 
});
The HTML :
<div id="test1"> 

    <!-- optional left control buttons --> 
    <nav id="test1_m_left"></nav><nav id="test1_o_left"></nav> 

    <div class='paginator_p_wrap'> 
        <div class='paginator_p_bloc'> 
            <!--<a class='paginator_p'></a> // page number : dynamically added --> 
        </div> 
    </div> 

    <!-- optional right control buttons --> 
    <nav id="test1_o_right"></nav><nav id="test1_m_right"></nav> 


    <!-- slider --> 
    <div class='paginator_slider ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all'> 
        <a class='ui-slider-handle ui-state-default ui-corner-all' href='#'></a> 
    </div> 

</div>