https://www.ubbcluj.ro/js/jQuery.paginate.js

1/**
2 *
3 * @summary     jPaginate
4 * @description Paginate an html elements
5 * @version     2017.03.09
6 * Rrepository  https://github.com/asirokas/jPaginate
7 *
8 * @author      Athanasios Sirokas (www.asirokas.com)
9 * Contact      [email protected]
10 *
11 */
12( function( $ ) {
13	$.fn.paginate = function( options ) {
14		var defaults = {
15			pagination_class: "pagination",
16			items_per_page: 5,
17			prev_next: true,
18			prev_text: '«',
19			next_text: '»'
20		};
21
22		// Merge deafults into options
23		var options = $.extend( defaults, options );
24
25		obj = $( this );
26
27		// Count entries in block for pagination
28		var n = obj.children().size();
29
30		// Calculate number of pages
31		var pages = Math.ceil( n / options.items_per_page );
32
33		// Add a div after the #slideshow to put the navigation controls in
34		obj.append(
35			$( '<div/>' ).addClass( options.pagination_class + "__controls" ).append(
36				$( '<ul/>' ).addClass( options.pagination_class ) )
37		);
38
39		function createPaginationControls( pages ) {
40
41			// Add Previous button
42			if ( options.prev_next == true ) {
43				obj.find( "." + options.pagination_class ).append( '<li class="prev"><a href="#">' + options.prev_text + '</a></li>' );
44			}
45			// For each div (slide) add a link in span for controls
46			for ( var i = 0; i < pages; i++ ) {
47				obj.find( "." + options.pagination_class ).append( '<li><a href="#' + ( i + 1 ) + '">' + ( i + 1 ) + '</a></li>' );
48			};
49
50			// Add Next Button
51			if ( options.prev_next == true ) {
52				obj.find( "." + options.pagination_class ).append( '<li class="next"><a href="#">' + options.next_text + '</a></li>' );
53			}
54		}
55
56		function showPage( page_number ) {
57			var start_from = ( page_number * options.items_per_page );
58			var end_on = ( ( page_number + 1 ) * options.items_per_page );
59			obj.children().not( '.pagination__controls' ).css( 'display', 'none' ).slice( start_from, end_on ).css( 'display', 'block' );
60		}
61
62		createPaginationControls( pages );
63		showPage( 0 );
64
65		obj.find( '.pagination li' ).not( ".prev,.next" ).first().addClass( 'active' );
66
67		// Navigate to the coresponding slide when clicking on a nav-control
68		obj.find( '.pagination li' ).not( ".prev,.next" ).click( function() {
69
70			// Reset the obj element to match the current pagination element
71			obj = $(this).parent().parent().parent();
72
73			if ( options.prev_next == true ) {
74				var pageIndex = $( this ).index() - 1;
75			} else {
76				var pageIndex = $( this ).index();
77			};
78
79			// remove active class from all elements
80			$( this ).parent().children().removeClass( 'active' );
81			$( this ).addClass( 'active' );
82			showPage( pageIndex );
83		} );
84
85		// Navigate to the previous slide when clicking on the prev button
86		obj.find( '.pagination li.prev' ).click( function() {
87
88			// Reset the obj element to match the current pagination element
89			obj = $(this).parent().parent().parent();
90
91			pageIndex = $( this ).parent().find( 'li.active' ).index() - 2;
92			if ( pageIndex < 0 ) pageIndex = 0;
93
94			$( this ).parent().find( 'li.active' ).removeClass( 'active' );
95			$( this ).parent().find( 'li:nth-child(' + ( pageIndex + 2 ) + ')' ).addClass( 'active' );
96			showPage( pageIndex );
97		} );
98
99		// Navigate to the next slide when clicking on the next button
100		obj.find( '.pagination li.next' ).click( function() {
101
102			// Reset the obj element to match the current pagination element
103			obj = $(this).parent().parent().parent();
104
105			pageIndex = $( this ).parent().find( 'li.active' ).index();
106			if ( pageIndex > pages - 1 ) pageIndex = pages - 1;
107
108			$( this ).parent().find( 'li.active' ).removeClass( 'active' );
109			$( this ).parent().find( 'li:nth-child(' + ( pageIndex + 2 ) + ')' ).addClass( 'active' );
110			showPage( pageIndex );
111		} );
112
113	};
114} )( jQuery );