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>