├── CHANGELOG
├── README.md
├── bower.json
├── example
    ├── basic.html
    ├── circular.html
    ├── easy-paging.html
    ├── endless.html
    ├── jquery.easy-paging.js
    ├── lock.html
    ├── onclick.html
    ├── slice.html
    ├── stepwidth.html
    └── table.html
├── jquery.paging.js
├── jquery.paging.min.js
└── paging.jquery.json


/CHANGELOG:
--------------------------------------------------------------------------------
 1 | jQuery Paging Changelog
 2 | 
 3 | 
 4 | 1.2.0
 5 |  * Improved locking mechanism (dropped onLock callback and added "lock" option)
 6 | 
 7 | 1.1.1
 8 |  * Added equation derivation
 9 |  * Simplified code
10 |  * Added easyPaging example plugin
11 | 
12 | 1.1.0
13 |  * onSelect shouldn't be called when $().length == 0
14 |  * setOptions({perpage: <string>}) should work as well
15 |  * li/options should work as well -> Collect as string, not as DOM element
16 |  * Simplified active state of last/first (Show only if the first page can not be accessed via the block) buttons
17 | 
18 | 1.0.1
19 |  * Fixed clicks on nested images in navigation
20 | 
21 | 1.0.0
22 |  * First stable release
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | jQuery Pagination Plugin
  2 | ====================
  3 | 
  4 | Description
  5 | -----------
  6 | The jQuery Paging plugin aims to be as simple as possible by a native callback design, which in turn allows to design a pagination navigation in almost every feasible variation.
  7 | 
  8 | Usage
  9 | -----
 10 | Include the jquery.paging.min.js in your website and start working. There are no styles shipped with the library, it all depends on your needs and the library only does the link calculations and event management for you, plus a few extra things.
 11 | 
 12 | In order to use the Paging plugin, you're done by defining the following simple snippet:
 13 | 
 14 | ```javascript
 15 | $(".pagination").paging(1337, { // make 1337 elements navigatable
 16 | 	format: '[< ncnnn! >]', // define how the navigation should look like and in which order onFormat() get's called
 17 | 	perpage: 10, // show 10 elements per page
 18 | 	lapping: 0, // don't overlap pages for the moment
 19 | 	page: 1, // start at page, can also be "null" or negative
 20 | 	onSelect: function (page) {
 21 | 		// add code which gets executed when user selects a page, how about $.ajax() or $(...).slice()?
 22 | 		console.log(this);
 23 | 	},
 24 | 	onFormat: function (type) { // Gets called for each character of "format" and returns a HTML representation
 25 | 		switch (type) {
 26 | 		case 'block': // n and c
 27 | 			return '<a href="#">' + this.value + '</a>';
 28 | 		case 'next': // >
 29 | 			return '<a href="#">&gt;</a>';
 30 | 		case 'prev': // <
 31 | 			return '<a href="#">&lt;</a>';
 32 | 		case 'first': // [
 33 | 			return '<a href="#">first</a>';
 34 | 		case 'last': // ]
 35 | 			return '<a href="#">last</a>';
 36 | 		}
 37 | 	}
 38 | });
 39 | ```
 40 | 
 41 | The strength of the library is that every parameter you would need is pre calculated and accessable via the `this`-object inside the callbacks. The most important part is the `nncnn`-block.
 42 | 
 43 | Options
 44 | =====
 45 | 
 46 | - perpage: The number of elements per page
 47 | - page: The current page to start on
 48 | - format: A format string, look at Format
 49 | - lock: Boolean to lock/disable the pager for a while (see examples/lock.html)
 50 | - lapping: The number of elements to overlap over the coming pages, see the [mathematical derivation](https://raw.org/article/derivation-of-pagination-calculation/). 
 51 | - circular: Boolean if next/prev buttons are allowed to go circular
 52 | - stepwidth: Number of steps prev/next has to go. Default=1. =0 Gives blockwise steps
 53 | - onClick: Raw callback to be called instead of the `onSelect` precedure (see examples/onclick.html)
 54 | - onFormat: Called for every `format` directive. See Format
 55 | - refresh: `timeout` and `url` to be called periodically for updates. 
 56 | - onRefresh: Callback to be called for every refresh interval. (see jquery.paging.js)
 57 | 
 58 | 
 59 | onSelect Callback
 60 | =====
 61 | 
 62 | Every onSelect callback gets a lot of pre-calculated information on the `this` object:
 63 | 
 64 | - number: The number of elements, configured
 65 | - lapping: The number of elements overlapping, configured
 66 | - pages: Number of pages
 67 | - perpage: Number of elements per page
 68 | - page: Current page on
 69 | - slice: Two element array with bounds to slice elements on the current page (see examples/slice.html)
 70 | 
 71 | The return code of `onSelect` indicates if the link of the clicked format element should be followed (otherwise only the click-event is used)
 72 | 
 73 | Format
 74 | ======
 75 | The "format"-parameter defines how the layout should look like. The string is processed character by character from left to right. For each character, the onFormat-callback is called and a final output string is generated and applied to the selected container.
 76 | 
 77 | n = number
 78 | c = current
 79 | 
 80 | A string "nncnn!" handles several definitions at once: How many digits to show? 5 by the length of the block. Where to show the currrent page in the set? Always at the beginning? "cnnnn". Always at the end? "nnc". Always in the middle? "nncnn". The exclamation mark in the initial example means that always 5 digits will be printed. All inactive elements have a "this.active" set to false.
 81 | 
 82 | Additionally, there are other format-tokens like "<" and ">" for prev and next, "[" and "]" for first and last, "." and "-" for simple text replacements and "q" and "p" in order to build previous and next-blocks. A more of examples can be found on my blog (link below).
 83 | 
 84 | 
 85 | Build your own paginator!
 86 | =================
 87 | jQuery paging is just a small framework. You can use it as the calculation base of your own paginator. In the file *easy-paging.html* you'll find a small example plugin, which uses jQuery Paging to make a typical HTML based paginator work:
 88 | ```
 89 | <ol id="paging">
 90 | 	<li>Prev</li>
 91 | 	<li>Page #n</li>
 92 | 	<li>Page #n</li>
 93 | 	<li>Page #c</li> <!-- current element will be here -->
 94 | 	<li>Page #n</li>
 95 | 	<li>Page #n</li>
 96 | 	<li>Page #n</li>
 97 | 	<li>Page #n</li>
 98 | 	<li>Next</li>
 99 | </ol>
100 | ```
101 | 
102 | ```javascript
103 | $("#paging").easyPaging(1000, {
104 |     onSelect: function(page) {
105 |         console.log("You are on page " + page + " and you will select elements "+(this.slice[0]+1) + "-" + this.slice[1]+"!!!");
106 |     }
107 | });
108 | ```
109 | 
110 | 
111 | Ajax Select Callback
112 | ====================
113 | ```javascript
114 | function onSelectCB(page) {
115 | 
116 | 	$.ajax({
117 | 		"url": '/data.php?start=' + this.slice[0] + '&end=' + this.slice[1] + '&page=' + page,
118 | 		"success": function(data) {
119 | 			// content replace
120 | 		}
121 | 	});
122 | }
123 | ```
124 | 
125 | Slice Select Callback
126 | ======================
127 | ```javascript
128 | function onSelectCB(page) {
129 | 
130 | 	var data = this.slice;
131 | 	
132 | 	content.slice(prev[0], prev[1]).css('display', 'none');
133 | 	content.slice(data[0], data[1]).css('display', 'block');
134 | 	
135 | 	prev = data;
136 | }
137 | ```
138 | 
139 | Using cookies
140 | =============
141 | ```javascript
142 | $(".pagination").paging(1337, {
143 | 	format: '[< ncnnn! >]',
144 | 	perpage: 10,
145 | 	page: getCookie("current") || 1,
146 | 	onSelect: function (page) {
147 | 		setCookie("current", page)
148 | 		console.log(this);
149 | 	},
150 | 	onFormat: onFormatCB
151 | });
152 | ```
153 | 
154 | Lock the pager
155 | ============
156 | It's sometimes necessary to lock the pagination, because you want to disable the navigation. You can use setOptions to disable the navigation like this:
157 | ```javascript
158 | var paging = $(".pagination").paging(1337, {
159 | 	format: '[< ncnnn! >]',
160 | 	onSelect: function (page) {
161 | 
162 |                 // onSelect is called for locked pagers as well, but nothing happens, except this:
163 |                 if (page === 0) {
164 |                     console.log("Pager was clicked, while it is disabled!");
165 |                     return;
166 |                 }
167 |                 // ... rest
168 | 	},
169 | 	onFormat: onFormatCB
170 | });
171 | 
172 | // Lock the pager
173 | paging.setOptions({lock: true});
174 | 
175 | // Unlock the pager
176 | paging.setOptions({lock: false});
177 | 
178 | ```
179 | 
180 | 
181 | Further examples and documentation
182 | ==========================
183 | For further details and code examples take a look at the demonstration and documentation page on:
184 | 
185 | [jQuery Pagination](https://raw.org/article/jquery-pagination-revised/)
186 | 
187 | Build
188 | =====
189 | The library is aggressively size optimized and works best with Closure-Compiler Advanced mode.
190 | 
191 | 
192 | License
193 | ======
194 | Copyright (c) 2013, [Robert Eisele](https://raw.org/)
195 | Dual licensed under the MIT or GPL Version 2 licenses.
196 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "paging",
 3 |     "main": "jquery.paging.js",
 4 |     "version": "1.3.1",
 5 |     "homepage": "http://www.xarg.org/2011/09/jquery-pagination-revised/",
 6 |     "description": "Probably the most advanced jQuery pagination plugin.",
 7 |     "keywords": [
 8 |         "paging",
 9 |         "pagination",
10 |         "pager",
11 |         "navigation"
12 |     ],
13 |     "authors": [
14 |         "Robert Eisele <robert@xarg.org> (http://www.xarg.org/)"
15 |     ],
16 |     "dependencies": {
17 |         "jquery": ">=1.5"
18 |     },
19 |     "license": [
20 |         "MIT",
21 |         "GPL"
22 |     ],
23 |     "repository": {
24 |         "type": "git",
25 |         "url": "git://github.com/infusion/jQuery-Paging.git"
26 |     }
27 | }
28 | 


--------------------------------------------------------------------------------
/example/basic.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |     <head>
 4 |         <title>jQuery Paging Test</title>
 5 |         <style>
 6 | 
 7 |             a {
 8 |                 margin: 2px
 9 |             }
10 |         </style>
11 |     </head>
12 | 
13 |     <body>
14 |         <div id="pagination"></div>
15 | 
16 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
17 |         <script src="../jquery.paging.min.js"></script>
18 | 
19 |         <script>
20 | 
21 |             $("#pagination").paging(1337, {
22 |               format: '[< nncnn >]',
23 |               stepwidth: 0, // =0 means blockwise next/prev steps
24 |               onSelect: function(page) {
25 |                 // add code which gets executed when user selects a page
26 |                 console.log(page);
27 |               },
28 |               onFormat: function(type) {
29 |                 switch (type) {
30 |                   case 'block': // n and c
31 |                     if (this.page === this.value) {
32 |                       return '<span>' + this.value + '</span>';
33 |                     } else {
34 |                       return '<a href="#">' + this.value + '</a>';
35 |                     }
36 |                   case 'next': // >
37 |                     return '<a href="#">&gt;</a>';
38 |                   case 'prev': // <
39 |                     return '<a href="#">&lt;</a>';
40 |                   case 'first': // [
41 |                     return '<a href="#">first</a>';
42 |                   case 'last': // ]
43 |                     return '<a href="#">last</a>';
44 |                 }
45 |               }
46 |             });
47 | 
48 |         </script>
49 |     </body>
50 | </html>


--------------------------------------------------------------------------------
/example/circular.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |     <head>
 4 |         <title>jQuery Paging Test</title>
 5 |     </head>
 6 | 
 7 |     <body>
 8 | 
 9 |         <div id="paging"></div>
10 | 
11 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
12 |         <script src="../jquery.paging.min.js"></script>
13 |         <script>
14 | 
15 |             /*
16 |              * Paging has a circular attribute, which allows the pager to click in circles with next/prev buttons
17 |              */
18 |             var pager = $("#paging").paging(40, {
19 | 
20 |                 // Set up easy format
21 |                 format: "<->",
22 |                 
23 |                 circular: true,
24 |                 
25 |                 // Typical onFormat handler
26 |                 onFormat: function(type) {
27 | 
28 |                     switch (type) {
29 | 
30 |                         case 'next':
31 | 
32 |                             if (this.active) {
33 |                                 return '<a href="#' + this.value + '" class="next">&raquo;</a>';
34 |                             }
35 |                             return '<span class="disabled">&raquo;</span>';
36 | 
37 |                         case 'prev':
38 | 
39 |                             if (this.active) {
40 |                                 return '<a href="#' + this.value + '" class="prev">&laquo;</a>';
41 |                             }
42 |                             return '<span class="disabled">&laquo;</span>';
43 | 
44 |                         case 'fill':
45 |                             return this.page + "/" + this.pages;
46 | 
47 |                     }
48 |                     return ""; // return nothing for missing branches
49 |                 }
50 |             });
51 | 
52 |         </script>
53 | 
54 |     </body>
55 | </html>


--------------------------------------------------------------------------------
/example/easy-paging.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |     <head>
 4 |         <title>jQuery Easy-Paging Test</title>
 5 |     </head>
 6 | 
 7 |     <body>
 8 | 
 9 |         <ol id="paging">
10 |             <li>Prev</li>
11 |             <li>Page #n</li>
12 |             <li>Page #n</li>
13 |             <li>Page #c</li>
14 |             <li>Page #n</li>
15 |             <li>Page #n</li>
16 |             <li>Page #n</li>
17 |             <li>Page #n</li>
18 |             <li>Next</li>
19 |         </ol>
20 |         
21 |         <div id="output"></div>
22 | 
23 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
24 |         <script src="../jquery.paging.min.js"></script>
25 |         <script src="jquery.easy-paging.js"></script>
26 |         <script>
27 | 
28 | 
29 |             $("#paging").easyPaging(1000, {
30 |                 onSelect: function(page) {
31 |                     $("#output").html("You are on page " + page + " and you will select elements "+(this.slice[0]+1) + "-" + this.slice[1]+"!!!");
32 |                 }
33 |             });
34 | 
35 |         </script>
36 | 
37 |     </body>
38 | </html>


--------------------------------------------------------------------------------
/example/endless.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |     <head>
 4 |         <title>jQuery Paging Test</title>
 5 |     </head>
 6 | 
 7 |     <body>
 8 | 
 9 |         <div id="paging"></div>
10 |         <div id="page"></div>
11 | 
12 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
13 |         <script src="../jquery.paging.min.js"></script>
14 |         <script>
15 | 
16 |             /*
17 |              * Paging with a negative number of elements loops the pager endlessly
18 |              */
19 |             var pager = $("#paging").paging(-1, {
20 | 
21 |               // Set up easy format
22 |               format: "< nncnn >",
23 |         
24 |               onSelect: function(page) {
25 |                 $("#page").html(page);
26 |               },
27 |               // Typical onFormat handler
28 |               onFormat: function(type) {
29 | 
30 |                 switch (type) {
31 | 
32 |                   case 'block':
33 | 
34 |                     if (!this.active)
35 |                       return '<span class="disabled">' + this.value + '</span>';
36 |                     else if (this.value != this.page)
37 |                       return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
38 |                     return '<span class="current">' + this.value + '</span>';
39 | 
40 |                   case 'next':
41 | 
42 |                     if (this.active) {
43 |                       return '<a href="#' + this.value + '" class="next">&raquo;</a>';
44 |                     }
45 |                     return '<span class="disabled">&raquo;</span>';
46 | 
47 |                   case 'prev':
48 | 
49 |                     if (this.active) {
50 |                       return '<a href="#' + this.value + '" class="prev">&laquo;</a>';
51 |                     }
52 |                     return '<span class="disabled">&laquo;</span>';
53 | 
54 |                   case 'fill':
55 |                     return this.page + "/" + this.pages;
56 | 
57 |                 }
58 |                 return ""; // return nothing for missing branches
59 |               }
60 |             });
61 | 
62 |         </script>
63 | 
64 |     </body>
65 | </html>


--------------------------------------------------------------------------------
/example/jquery.easy-paging.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @license jQuery paging plugin v1.1.1 21/06/2014
 3 |  * http://www.xarg.org/2011/09/jquery-pagination-revised/
 4 |  *
 5 |  * Copyright (c) 2011, Robert Eisele (robert@xarg.org)
 6 |  * Dual licensed under the MIT or GPL Version 2 licenses.
 7 |  **/
 8 | 
 9 | (function($) {
10 | 
11 |     $["fn"]["easyPaging"] = function(num, o) {
12 | 
13 |         if (!$["fn"]["paging"]) {
14 |             return this;
15 |         }
16 | 
17 |         // Normal Paging config
18 |         var opts = {
19 |             "perpage": 10,
20 |             "elements": 0,
21 |             "page": 1,
22 |             "format": "",
23 |             "lapping": 0,
24 |             "onSelect": function() {
25 |             }
26 |         };
27 | 
28 |         $["extend"](opts, o || {});
29 | 
30 |         var $li = $("li", this);
31 | 
32 |         var masks = {};
33 | 
34 |         $li.each(function(i) {
35 | 
36 |             if (0 === i) {
37 |                 masks.prev = this.innerHTML;
38 |                 opts.format += "<";
39 |             } else if (i + 1 === $li.length) {
40 |                 masks.next = this.innerHTML;
41 |                 opts.format += ">";
42 |             } else {
43 |                 masks[i] = this.innerHTML.replace(/#[nc]/, function(str) {
44 |                     opts["format"] += str.replace("#", "");
45 |                     return "([...])";
46 |                 });
47 |             }
48 |         });
49 | 
50 |         opts["onFormat"] = function(type) {
51 | 
52 |             var value = "";
53 | 
54 |             switch (type) {
55 |                 case 'block':
56 | 
57 |                     value = masks[this["pos"]].replace("([...])", this["value"]);
58 | 
59 |                     if (!this['active'])
60 |                         return '<li>' + value + '</li>';
61 |                     if (this["page"] !== this["value"])
62 |                         return '<li><a href="#' + this["value"] + '">' + value + '</a></li>';
63 |                     return '<li class="current">' + value + '</li>';
64 | 
65 |                 case 'next':
66 |                 case 'prev':
67 |                     if (!this['active'])
68 |                         return '<li>' + masks[type] + '</li>';
69 |                     return '<li><a href="#' + this["value"] + '">' + masks[type] + '</a></li>';
70 |             }
71 |         };
72 | 
73 |         $(this)["paging"](num, opts);
74 |         
75 |         return this;
76 |     };
77 | 
78 | }(jQuery));
79 | 


--------------------------------------------------------------------------------
/example/lock.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |     <head>
 4 |         <title>jQuery Paging Test</title>
 5 |     </head>
 6 | 
 7 |     <body>
 8 | 
 9 |         <div id="paging"></div>
10 | 
11 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
12 |         <script src="../jquery.paging.min.js"></script>
13 |         <script>
14 | 
15 |             /*
16 |              * Paging has a lock attribute, which allows the pager to temporarily stop working
17 |              */
18 |             var pager = $("#paging").paging(40, {
19 |                 
20 |               // Set up easy format
21 |               format: "<->",
22 |               
23 |               // As long as pager is locked, onSelect will be called with page "0"
24 |               onSelect: function(page) {
25 |                 alert("You're on page #" + page);
26 |               },
27 |               
28 |               // Typical onFormat handler
29 |               onFormat: function(type) {
30 | 
31 |                 switch (type) {
32 | 
33 |                   case 'next':
34 | 
35 |                     if (this.active) {
36 |                       return '<a href="#' + this.value + '" class="next">&raquo;</a>';
37 |                     }
38 |                     return '<span class="disabled">&raquo;</span>';
39 | 
40 |                   case 'prev':
41 | 
42 |                     if (this.active) {
43 |                       return '<a href="#' + this.value + '" class="prev">&laquo;</a>';
44 |                     }
45 |                     return '<span class="disabled">&laquo;</span>';
46 | 
47 |                   case 'fill':
48 |                     return this.page + "/" + this.pages;
49 | 
50 |                 }
51 |                 return ""; // return nothing for missing branches
52 |               }
53 |             });
54 | 
55 |             pager.setOptions({
56 |               // Don't work anymore :)
57 |               lock: true
58 |             });
59 | 
60 |         </script>
61 | 
62 |     </body>
63 | </html>


--------------------------------------------------------------------------------
/example/onclick.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |     <head>
 4 |         <title>jQuery Paging Test</title>
 5 |     </head>
 6 | 
 7 |     <body>
 8 | 
 9 |         <div id="paging"></div>
10 | 
11 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
12 |         <script src="../jquery.paging.js"></script>
13 |         <script>
14 | 
15 |             /*
16 |              * Paging has a onClick handler to bypass the normal onClick handler.
17 |              * This allows more control on when the pager should be changed.
18 |              */
19 |             var pager = $("#paging").paging(1000, {
20 |                 
21 |                 // Set up onclick handler
22 |                 onClick: function(ev) {
23 | 
24 |                     ev.preventDefault();
25 | 
26 |                     var page = $(this).data('page');
27 | 
28 |                     // Call asynchronously, could be ajax, or whatever
29 |                     window.setTimeout(function() {
30 |                         pager.setPage(page);
31 |                     }, 1000);
32 | 
33 |                 },
34 |                 
35 |                 // Set up easy format
36 |                 format: "<nncnn>",
37 |                 
38 |                 // Typical onFormat handler, copied from source file
39 |                 onFormat: function(type) {
40 | 
41 |                     switch (type) {
42 | 
43 |                         case 'block':
44 | 
45 |                             if (!this.active)
46 |                                 return '<span class="disabled">' + this.value + '</span>';
47 |                             else if (this.value != this.page)
48 |                                 return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
49 |                             return '<span class="current">' + this.value + '</span>';
50 | 
51 |                         case 'right':
52 |                         case 'left':
53 | 
54 |                             if (!this.active) {
55 |                                 return "";
56 |                             }
57 |                             return '<a href="#' + this.value + '">' + this.value + '</a>';
58 | 
59 |                         case 'next':
60 | 
61 |                             if (this.active) {
62 |                                 return '<a href="#' + this.value + '" class="next">Next &raquo;</a>';
63 |                             }
64 |                             return '<span class="disabled">Next &raquo;</span>';
65 | 
66 |                         case 'prev':
67 | 
68 |                             if (this.active) {
69 |                                 return '<a href="#' + this.value + '" class="prev">&laquo; Previous</a>';
70 |                             }
71 |                             return '<span class="disabled">&laquo; Previous</span>';
72 | 
73 |                         case 'first':
74 | 
75 |                             if (this.active) {
76 |                                 return '<a href="#' + this.value + '" class="first">|&lt;</a>';
77 |                             }
78 |                             return '<span class="disabled">|&lt;</span>';
79 | 
80 |                         case 'last':
81 | 
82 |                             if (this.active) {
83 |                                 return '<a href="#' + this.value + '" class="prev">&gt;|</a>';
84 |                             }
85 |                             return '<span class="disabled">&gt;|</span>';
86 | 
87 |                         case 'fill':
88 |                             if (this.active) {
89 |                                 return "...";
90 |                             }
91 |                     }
92 |                     return ""; // return nothing for missing branches
93 |                 }
94 |             });
95 | 
96 |         </script>
97 | 
98 |     </body>
99 | </html>


--------------------------------------------------------------------------------
/example/slice.html:
--------------------------------------------------------------------------------
  1 | 
  2 | <html>
  3 | 
  4 |     <head>
  5 |         <title>jQuery Paging Test</title>
  6 |     </head>
  7 | 
  8 |     <body>
  9 | 
 10 |         <div class="paging"></div>
 11 |         <div class="element"><h5>Las Vegas</h5><p>37&deg;C / 98.6&deg;F</p></div><div class="element"><h5>Cairo</h5><p>35&deg;C / 95&deg;F</p></div><div class="element"><h5>Houston</h5><p>33&deg;C / 91.4&deg;F</p></div><div class="element"><h5>Madrid</h5><p>31&deg;C / 87.8&deg;F</p></div><div class="element"><h5>Athens</h5><p>30&deg;C / 86&deg;F</p></div><div class="element"><h5>Lisbon</h5><p>27&deg;C / 80.6&deg;F</p></div><div class="element"><h5>Rome</h5><p>27&deg;C / 80.6&deg;F</p></div><div class="element"><h5>Moscow</h5><p>23&deg;C / 73.4&deg;F</p></div><div class="element"><h5>Los Angeles</h5><p>22&deg;C / 71.6&deg;F</p></div><div class="element"><h5>San Francisco</h5><p>22&deg;C / 71.6&deg;F</p></div><div class="element"><h5>Lima</h5><p>19&deg;C / 66.2&deg;F</p></div><div class="element"><h5>Sydney</h5><p>18&deg;C / 64.4&deg;F</p></div><div class="element"><h5>Johannesburg</h5><p>17&deg;C / 62.6&deg;F</p></div><div class="element"><h5>Buenos Aires</h5><p>16&deg; / 60.8&deg;F</p></div>
 12 |         <div class="paging"></div>
 13 | 
 14 |         <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><!-- is needed for buggy hashchange-->
 15 |         <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-hashchange/v1.3/jquery.ba-hashchange.js"></script>
 16 |         <script src="../jquery.paging.min.js"></script>
 17 |         <script>
 18 | 
 19 |             /*
 20 |              * Slicing the content with two pagers and using the URL Hash event
 21 |              */
 22 |             (function() {
 23 | 
 24 |                 var prev = {
 25 |                     start: 0,
 26 |                     stop: 0
 27 |                 };
 28 | 
 29 | 
 30 |                 var content = $('.element');
 31 | 
 32 |                 var Paging = $(".paging").paging(content.length, {
 33 |                     onSelect: function() {
 34 | 
 35 |                         var data = this.slice;
 36 | 
 37 |                         content.slice(prev[0], prev[1]).css('display', 'none');
 38 |                         content.slice(data[0], data[1]).fadeIn("slow");
 39 | 
 40 |                         prev = data;
 41 | 
 42 |                         return true; // locate!
 43 |                     },
 44 |                     onFormat: function(type) {
 45 | 
 46 |                         switch (type) {
 47 | 
 48 |                             case 'block':
 49 | 
 50 |                                 if (!this.active)
 51 |                                     return '<span class="disabled">' + this.value + '</span>';
 52 |                                 else if (this.value != this.page)
 53 |                                     return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
 54 |                                 return '<span class="current">' + this.value + '</span>';
 55 | 
 56 |                             case 'right':
 57 |                             case 'left':
 58 | 
 59 |                                 if (!this.active) {
 60 |                                     return '';
 61 |                                 }
 62 |                                 return '<a href="#' + this.value + '">' + this.value + '</a>';
 63 | 
 64 |                             case 'next':
 65 | 
 66 |                                 if (this.active) {
 67 |                                     return '<a href="#' + this.value + '" class="next">Next &raquo;</a>';
 68 |                                 }
 69 |                                 return '<span class="disabled">Next &raquo;</span>';
 70 | 
 71 |                             case 'prev':
 72 | 
 73 |                                 if (this.active) {
 74 |                                     return '<a href="#' + this.value + '" class="prev">&laquo; Previous</a>';
 75 |                                 }
 76 |                                 return '<span class="disabled">&laquo; Previous</span>';
 77 | 
 78 |                             case 'first':
 79 | 
 80 |                                 if (this.active) {
 81 |                                     return '<a href="#' + this.value + '" class="first">|&lt;</a>';
 82 |                                 }
 83 |                                 return '<span class="disabled">|&lt;</span>';
 84 | 
 85 |                             case 'last':
 86 | 
 87 |                                 if (this.active) {
 88 |                                     return '<a href="#' + this.value + '" class="prev">&gt;|</a>';
 89 |                                 }
 90 |                                 return '<span class="disabled">&gt;|</span>';
 91 | 
 92 |                             case 'fill':
 93 |                                 if (this.active) {
 94 |                                     return "...";
 95 |                                 }
 96 |                         }
 97 |                         return ""; // return nothing for missing branches
 98 |                     },
 99 |                     format: '[< ncnnn! >]',
100 |                     perpage: 3,
101 |                     lapping: 0,
102 |                     page: null // we await hashchange() event
103 |                 });
104 | 
105 | 
106 |                 $(window).hashchange(function() {
107 | 
108 |                     if (window.location.hash)
109 |                         Paging.setPage(window.location.hash.substr(1));
110 |                     else
111 |                         Paging.setPage(1); // we dropped "page" support and need to run it by hand
112 |                 });
113 | 
114 |                 $(window).hashchange();
115 |             })();
116 |         </script>
117 |     </body>
118 | </html>


--------------------------------------------------------------------------------
/example/stepwidth.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | 
 3 |     <head>
 4 |         <title>jQuery Paging Test</title>
 5 |         <style>
 6 | 
 7 |             a {
 8 |                 margin: 2px
 9 |             }
10 |         </style>
11 |     </head>
12 | 
13 |     <body>
14 |         <div id="pagination"></div>
15 | 
16 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
17 |         <script src="../jquery.paging.min.js"></script>
18 | 
19 |         <script>
20 | 
21 |             $("#pagination").paging(1337, {
22 |               format: '< nncnn >',
23 |               stepwidth: 10, // =0 means blockwise next/prev steps
24 |               onSelect: function(page) {
25 |                 // add code which gets executed when user selects a page
26 |                 console.log(page);
27 |               },
28 |               onFormat: function(type) {
29 |                 switch (type) {
30 |                   case 'block': // n and c
31 |                     if (this.page === this.value) {
32 |                       return '<span>' + this.value + '</span>';
33 |                     } else {
34 |                       return '<a href="#">' + this.value + '</a>';
35 |                     }
36 |                   case 'next': // >
37 |                     return '<a href="#">[+10]</a>';
38 |                   case 'prev': // <
39 |                     return '<a href="#">[-10]</a>';
40 |                 }
41 |               }
42 |             });
43 | 
44 |         </script>
45 |     </body>
46 | </html>


--------------------------------------------------------------------------------
/example/table.html:
--------------------------------------------------------------------------------
  1 | <html>
  2 | 
  3 |     <head>
  4 |         <title>jQuery Paging Test</title>
  5 | 
  6 |         <style>
  7 |             table {
  8 |                 width: 500px;
  9 |             }
 10 |             table td {
 11 |                 width: 20%;
 12 | 
 13 |             }
 14 |            td > span {
 15 |                 width: 70px;
 16 |                 display: block;
 17 |                 float:left;
 18 |                 text-align: right;
 19 |             }
 20 |             table th {
 21 |                 background: #333;
 22 |                 color:#fff;
 23 |             }
 24 | 
 25 |             #b1, #b2 {
 26 |                 width: auto;
 27 |             }
 28 | 
 29 |         </style>
 30 |     </head>
 31 | 
 32 |     <body>
 33 | 
 34 |         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
 35 |         <script src="../jquery.paging.min.js"></script>
 36 | 
 37 |         <div style="text-align:right;width:500px">
 38 |             <input id="b1" value="&lt;" type="button"> <span id="stat"></span><input id="b2" value="&gt;" type="button"> 
 39 |             <select id="tabpage">
 40 |                 <option></option>
 41 |             </select>
 42 |         </div>
 43 |         <table id="table">
 44 |             <tr>
 45 |                 <th>#</th>
 46 |                 <th>a</th>
 47 |                 <th>b</th>
 48 |                 <th>c</th>
 49 |                 <th>d</th>
 50 |             </tr>
 51 |             <tr>
 52 |                 <td></td>
 53 |                 <td></td>
 54 |                 <td></td>
 55 |                 <td></td>
 56 |                 <td></td>
 57 |             </tr>
 58 |             <tr>
 59 |                 <td></td>
 60 |                 <td></td>
 61 |                 <td></td>
 62 |                 <td></td>
 63 |                 <td></td>
 64 |             </tr>
 65 |             <tr>
 66 |                 <td></td>
 67 |                 <td></td>
 68 |                 <td></td>
 69 |                 <td></td>
 70 |                 <td></td>
 71 |             </tr>
 72 |             <tr>
 73 |                 <td></td>
 74 |                 <td></td>
 75 |                 <td></td>
 76 |                 <td></td>
 77 |                 <td></td>
 78 |             </tr>
 79 |             <tr>
 80 |                 <td></td>
 81 |                 <td></td>
 82 |                 <td></td>
 83 |                 <td></td>
 84 |                 <td></td>
 85 |             </tr>
 86 |             <tr>
 87 |                 <td></td>
 88 |                 <td></td>
 89 |                 <td></td>
 90 |                 <td></td>
 91 |                 <td></td>
 92 |             </tr>
 93 |             <tr>
 94 |                 <td></td>
 95 |                 <td></td>
 96 |                 <td></td>
 97 |                 <td></td>
 98 |                 <td></td>
 99 |             </tr>
100 |             <tr>
101 |                 <td></td>
102 |                 <td></td>
103 |                 <td></td>
104 |                 <td></td>
105 |                 <td></td>
106 |             </tr>
107 |             <tr>
108 |                 <td></td>
109 |                 <td></td>
110 |                 <td></td>
111 |                 <td></td>
112 |                 <td></td>
113 |             </tr>
114 |             <tr>
115 |                 <td></td>
116 |                 <td></td>
117 |                 <td></td>
118 |                 <td></td>
119 |                 <td></td>
120 |             </tr>
121 |         </table>
122 |         <p><em>P</em>: Prime number, <em>F</em>: Fibonacci number, <em>E</em>: Perfect number, <em>B</em>: Power of two, <em>T</em>: Power of ten</p>
123 | 
124 |         <script>
125 | 
126 |             (function() {
127 | 
128 | 
129 |                 var CURTAB, STAT, numbers = [];
130 | 
131 | 
132 |                 var
133 |                         TABLE = $('#table tr'),
134 |                         B1 = $('#b1'),
135 |                         B2 = $('#b2'),
136 |                         STAT = $('#stat');
137 | 
138 | 
139 | 
140 |                 B1.click(function() {
141 |                     TabPage.setPage(CURTAB - 1);
142 |                 });
143 | 
144 |                 B2.click(function() {
145 |                     TabPage.setPage(CURTAB + 1);
146 |                 });
147 | 
148 |                 var TabPage = $("#tabpage").change(function() {
149 |                     TabPage.setPage($(this).val());
150 |                 }).paging(100, {
151 |                     onSelect: function(page) {
152 | 
153 |                         var k = this.slice[0];
154 |                         var data = this;
155 | 
156 |                         TABLE.each(function(i) {
157 | 
158 |                             $(this).find("td").each(function(j) {
159 | 
160 |                                 if (j >= 1) {
161 | 
162 |                                     if (k < data.number) {
163 |                                         var str = "";
164 | 
165 |                                         if (0 === numbers[k]) {
166 |                                             // int
167 |                                             this.style.color = '#ccc'
168 |                                         } else {
169 | 
170 |                                             this.style.color = '#000';
171 | 
172 |                                             if (numbers[k] & 1) {
173 |                                                 // prime
174 |                                                 str += 'P';
175 |                                             }
176 | 
177 |                                             if (numbers[k] & 2) {
178 |                                                 // fibonacci
179 |                                                 str += 'F';
180 |                                             }
181 | 
182 |                                             if (numbers[k] & 4) {
183 |                                                 // perfect
184 |                                                 str += 'E';
185 |                                             }
186 | 
187 |                                             if (numbers[k] & 8) {
188 |                                                 // 2^
189 |                                                 str += "B";
190 |                                             }
191 | 
192 |                                             if (numbers[k] & 16) {
193 |                                                 // 10^
194 |                                                 str += "T";
195 |                                             }
196 |                                         }
197 | 
198 |                                         this.innerHTML = "<span>" + k + "</span><sub> " + str + "</sub>";
199 |                                     } else {
200 |                                         this.style.color = '#000';
201 |                                         this.innerHTML = "<span>&nbsp;</span><sub></sub>";
202 |                                     }
203 | 
204 |                                     ++k;
205 |                                 } else
206 |                                     this.innerHTML = '<span>' + (i + (40 - data.lapping) * (page - 1) / 4) + '</span>';
207 | 
208 |                             });
209 | 
210 |                         });
211 | 
212 | 
213 |                         STAT.html('(' + this.slice[0] + ' - ' + (this.slice[1] - 1) + ')');
214 | 
215 |                         return false; // don't locate!
216 |                     },
217 |                     onFormat: function(type) {
218 | 
219 |                         switch (type) {
220 | 
221 |                             case 'prev':
222 |                                 CURTAB = this.page;
223 |                                 B1.attr('disabled', !this.active);
224 |                                 break;
225 | 
226 |                             case 'next':
227 |                                 CURTAB = this.page;
228 |                                 B2.attr('disabled', !this.active);
229 |                                 break;
230 | 
231 |                             case 'fill':
232 |                                 //STAT.html('(showing ' + (1 + this.start) + ' - ' + this.stop + ')');
233 |                                 break;
234 | 
235 |                             case 'block':
236 | 
237 |                                 if (!this.active)
238 |                                     return '<option class="disabled">' + this.value + '</option>';
239 |                                 else if (this.value != this.page)
240 |                                     return '<option>' + this.value + '</option>';
241 |                                 return '<option style="font-weight:bold;" selected="selected">' + this.value + '</option>';
242 |                         }
243 |                         return "";
244 |                     },
245 |                     format: '<.> *',
246 |                     perpage: 40,
247 |                     lapping: 0,
248 |                     page: 0
249 |                 });
250 | 
251 | 
252 | 
253 | 
254 |                 // Generate dummy data
255 | 
256 |                 var i, j;
257 |                 for (i = 10000; i--; ) {
258 |                     numbers[i] = 1;
259 |                 }
260 | 
261 |                 for (i = 2; i <= 100; ++i)
262 |                     if (numbers[i])
263 |                         for (j = i; j * i < 10000; ++j)
264 |                             numbers[i * j] = 0;
265 | 
266 |                 numbers[0] = numbers[1] = 2;
267 |                 j = [2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610, 987, 1597, 2584, 4181, 6765];
268 | 
269 |                 for (i = j.length; i--; numbers[j[i]] |= 2) {
270 |                 }
271 | 
272 |                 numbers[6] |= 4;
273 |                 numbers[28] |= 4;
274 |                 numbers[496] |= 4;
275 |                 numbers[8128] |= 4;
276 | 
277 |                 for (i = 1; i < 10000; i <<= 1) {
278 |                     numbers[i] |= 8;
279 |                 }
280 | 
281 |                 for (i = 1; i < 10000; i *= 10) {
282 |                     numbers[i] |= 16;
283 |                 }
284 | 
285 |             })();
286 | 
287 |         </script>
288 |     </body>
289 | </html>


--------------------------------------------------------------------------------
/jquery.paging.js:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * @license jQuery paging plugin v1.3.1 23/06/2014
  3 |  * http://www.xarg.org/2011/09/jquery-pagination-revised/
  4 |  *
  5 |  * Copyright (c) 2011, Robert Eisele (robert@xarg.org)
  6 |  * Dual licensed under the MIT or GPL Version 2 licenses.
  7 |  **/
  8 | 
  9 | (function($, window, undefined) {
 10 | 
 11 | 
 12 |     $["fn"]["paging"] = function(number, opts) {
 13 | 
 14 |         var self = this,
 15 |         Paging = {
 16 | 
 17 |             "setOptions": function(opts) {
 18 | 
 19 |                 var parseFormat = function(format) {
 20 | 
 21 |                     var gndx = 0, group = 0, num = 1, res = {
 22 |                         fstack:    [], // format stack
 23 |                         asterisk:  0, // asterisk?
 24 |                         inactive:  0, // fill empty pages with inactives up to w?
 25 |                         blockwide: 5, // width of number block
 26 |                         current:   3, // position of current element in number block
 27 |                         rights:    0, // num of rights
 28 |                         lefts:     0 // num of lefts
 29 |                     }, tok, pattern = /[*<>pq\[\]().-]|[nc]+!?/g;
 30 | 
 31 |                     var known = {
 32 |                         "[": "first",
 33 |                         "]": "last",
 34 |                         "<": "prev",
 35 |                         ">": "next",
 36 |                         "q": "left",
 37 |                         "p": "right",
 38 |                         "-": "fill",
 39 |                         ".": "leap"
 40 |                     }, count = {};
 41 | 
 42 |                     while ((tok = pattern["exec"](format))) {
 43 | 
 44 |                         tok = "" + (tok);
 45 | 
 46 |                         if (undefined === known[tok]) {
 47 | 
 48 |                             if ("(" === tok) {
 49 |                                 group = ++gndx;
 50 |                             } else if (")" === tok) {
 51 |                                 group = 0;
 52 |                             } else if (num) {
 53 | 
 54 |                                 if ("*" === tok) {
 55 |                                     res.asterisk = 1;
 56 |                                     res.inactive = 0;
 57 |                                 } else {
 58 |                                     // number block is the only thing left here
 59 |                                     res.asterisk = 0;
 60 |                                     res.inactive = "!" === tok.charAt(tok.length - 1);
 61 |                                     res.blockwide = tok["length"] - res.inactive;
 62 |                                     if (!(res.current = 1 + tok.indexOf("c"))) {
 63 |                                         res.current = (1 + res.blockwide) >> 1;
 64 |                                     }
 65 |                                 }
 66 | 
 67 |                                 res.fstack.push({
 68 |                                     ftype: "block", // type
 69 |                                     fgroup: 0,      // group
 70 |                                     fpos: 0         // pos
 71 |                                 });
 72 |                                 num = 0;
 73 |                             }
 74 | 
 75 |                         } else {
 76 | 
 77 |                             res.fstack.push({
 78 |                                 ftype: known[tok], // type
 79 |                                 fgroup: group,     // group
 80 |                                 fpos: undefined === count[tok] ? count[tok] = 1 : ++count[tok] // pos
 81 |                             });
 82 | 
 83 |                             if ("q" === tok)
 84 |                                 ++res.lefts;
 85 |                             else if ("p" === tok)
 86 |                                 ++res.rights;
 87 |                         }
 88 |                     }
 89 |                     return res;
 90 |                 };
 91 | 
 92 |                 Paging.opts = $.extend(Paging.opts || {
 93 | 
 94 |                     "lapping": 0, // number of elements overlap
 95 | 
 96 |                     "perpage": 10, // number of elements per page
 97 | 
 98 |                     "page": 1, // current page
 99 |                     
100 |                     "stepwidth": 1, // stepwidth for prev/next -> if = 0 then blockwise steps
101 | 
102 |                     "refresh": {
103 |                         "interval": 10,
104 |                         "url": null
105 |                     }, // refresh callback information
106 | 
107 |                     "format": "", // visual format string
108 | 
109 |                     "lock": false, // set to true, if you want to disable the pagination for a while. 
110 | 
111 |                     "circular": false, // set to true if you want the next/prev buttons go circular
112 | 
113 |                     "onClick": null, // Alternative click handler to bypass onSelect mechanism
114 | 
115 |                     "onFormat": function(type) {	// callback for every format element
116 | 
117 |                     /** EXAMPLE **
118 | 
119 |                         switch (type) {
120 | 
121 |                             case 'block':
122 | 
123 |                                 if (!this.active)
124 |                                     return '<span class="disabled">' + this.value + '</span>';
125 |                                 else if (this.value != this.page)
126 |                                     return '<em><a href="#' + this.value + '">' + this.value + '</a></em>';
127 |                                 return '<span class="current">' + this.value + '</span>';
128 | 
129 |                             case 'right':
130 |                             case 'left':
131 | 
132 |                                 if (!this.active) {
133 |                                     return "";
134 |                                 }
135 |                                 return '<a href="#' + this.value + '">' + this.value + '</a>';
136 | 
137 |                             case 'next':
138 | 
139 |                                 if (this.active) {
140 |                                     return '<a href="#' + this.value + '" class="next">Next &raquo;</a>';
141 |                                 }
142 |                                 return '<span class="disabled">Next &raquo;</span>';
143 | 
144 |                             case 'prev':
145 | 
146 |                                 if (this.active) {
147 |                                     return '<a href="#' + this.value + '" class="prev">&laquo; Previous</a>';
148 |                                 }
149 |                                 return '<span class="disabled">&laquo; Previous</span>';
150 | 
151 |                             case 'first':
152 | 
153 |                                 if (this.active) {
154 |                                     return '<a href="#' + this.value + '" class="first">|&lt;</a>';
155 |                                 }
156 |                                 return '<span class="disabled">|&lt;</span>';
157 | 
158 |                             case 'last':
159 | 
160 |                                 if (this.active) {
161 |                                     return '<a href="#' + this.value + '" class="prev">&gt;|</a>';
162 |                                 }
163 |                                 return '<span class="disabled">&gt;|</span>';
164 | 
165 |                             case 'fill':
166 |                                 if (this.active) {
167 |                                     return "...";
168 |                                 }
169 |                         }
170 |                         return ""; // return nothing for missing branches
171 | 
172 |                         **/
173 |                     },
174 |                     "onSelect": function(page) {	// callback for page selection
175 | 
176 |                         /** EXAMPLE SLICE **
177 | 
178 |                         var data = this.slice;
179 | 
180 |                         content.slice(prev[0], prev[1]).css('display', 'none');
181 |                         content.slice(data[0], data[1]).css('display', 'block');
182 | 
183 |                         prev = data;
184 | 
185 |                         **/
186 | 
187 | 
188 |                         /** EXAMPLE AJAX **
189 | 
190 |                         $.ajax({
191 |                             "url": '/data.php?start=' + this.slice[0] + '&end=' + this.slice[1] + '&page=' + page,
192 |                             "success": function(data) {
193 |                                 // content replace
194 |                             }
195 |                         });
196 | 
197 |                         **/
198 | 
199 |                         // Return code indicates if the link of the clicked format element should be followed (otherwise only the click-event is used)
200 |                         return true;
201 |                     },
202 |                     "onRefresh": function(json) { // callback for new data of refresh api
203 | 
204 |                         /** EXAMPLE **
205 |                         if (json.number) {
206 |                             Paging.setNumber(json.number);
207 |                         }
208 | 
209 |                         if (json.options) {
210 |                             Paging.setOptions(json.options);
211 |                         }
212 | 
213 |                         Paging.setPage(); // Call with empty params to reload the paginator
214 |                         **/
215 |                     }
216 |                 }, opts || {});
217 | 
218 |                 Paging.opts["lapping"]|= 0;
219 |                 Paging.opts["perpage"]|= 0;
220 |                 if (Paging.opts["page"] !== null)
221 |                     Paging.opts["page"]|= 0;
222 | 
223 |                 // If the number of elements per page is less then 1, set it to default
224 |                 if (Paging.opts["perpage"] < 1) {
225 |                     Paging.opts["perpage"] = 10;
226 |                 }
227 | 
228 |                 if (Paging.interval)
229 |                     window.clearInterval(Paging.interval);
230 | 
231 |                 if (Paging.opts["refresh"]["url"]) {
232 | 
233 |                     Paging.interval = window.setInterval(function() {
234 | 
235 |                         $["ajax"]({
236 |                             "url": Paging.opts["refresh"]["url"],
237 |                             "success": function(data) {
238 | 
239 |                                 if (typeof(data) === "string") {
240 | 
241 |                                     try {
242 |                                         data = $["parseJSON"](data);
243 |                                     } catch (o) {
244 |                                         return;
245 |                                     }
246 |                                 }
247 |                                 Paging.opts["onRefresh"](data);
248 |                             }
249 |                         });
250 | 
251 |                     }, 1000 * Paging.opts["refresh"]["interval"]);
252 |                 }
253 | 
254 |                 Paging.format = parseFormat(Paging.opts["format"]);
255 |                 return Paging;
256 |             },
257 | 
258 |             "setNumber": function(number) {
259 |                 Paging.number = (undefined === number || number < 0) ? -1 : number;
260 |                 return Paging;
261 |             },
262 | 
263 |             "setPage": function(page) {
264 | 
265 |                 if (Paging.opts["lock"]) {
266 |                     Paging.opts["onSelect"](0, self);
267 |                     return Paging;
268 |                 }
269 | 
270 |                 if (undefined === page) {
271 | 
272 |                     page = Paging.opts["page"];
273 | 
274 |                     if (null === page) {
275 |                         return Paging;
276 |                     }
277 | 
278 |                 } else if (Paging.opts["page"] == page) { // Necessary to be ==, not ===
279 |                     return Paging;
280 |                 }
281 | 
282 |                 Paging.opts["page"] = (page|= 0);
283 | 
284 |                 var number = Paging.number;
285 |                 var opts = Paging.opts;
286 | 
287 |                 var rStart, rStop;
288 | 
289 |                 var pages, buffer;
290 | 
291 |                 var groups = 1, format = Paging.format;
292 | 
293 |                 var data, tmp, node, lapping;
294 | 
295 |                 var count = format.fstack["length"], i = count;
296 | 
297 | 
298 |                 // If the lapping is greater than perpage, reduce it to perpage - 1 to avoid endless loops
299 |                 if (opts["perpage"] <= opts["lapping"]) {
300 |                     opts["lapping"] = opts["perpage"] - 1;
301 |                 }
302 | 
303 |                 lapping = number <= opts["lapping"] ? 0 : opts["lapping"] | 0;
304 | 
305 | 
306 |                 // If the number is negative, the value doesn"t matter, we loop endlessly with a constant width
307 |                 if (number < 0) {
308 | 
309 |                     number = -1;
310 |                     pages = -1;
311 | 
312 |                     rStart = Math.max(1, page - format.current + 1 - lapping);
313 |                     rStop  = rStart + format.blockwide;
314 | 
315 |                 } else {
316 | 
317 |                     /* Calculate the number of pages
318 |                      * http://www.xarg.org/2016/10/derivation-of-pagination-calculation/
319 |                      *
320 |                      */
321 |                     pages = 1 + Math.ceil((number - opts["perpage"]) / (opts["perpage"] - lapping));
322 | 
323 |                     // If current page is negative, start at the end and
324 |                     // Set the current page into a valid range, includes 0, which is set to 1
325 |                     page = Math.max(1, Math.min(page < 0 ? 1 + pages + page : page, pages));
326 | 
327 |                     // Do we need to print all numbers?
328 |                     if (format.asterisk) {
329 |                         rStart = 1;
330 |                         rStop  = 1 + pages;
331 | 
332 |                         // Disable :first and :last for asterisk mode as we see all buttons
333 |                         format.current   = page;
334 |                         format.blockwide = pages;
335 | 
336 |                     } else {
337 | 
338 |                         // If no, start at the best position and stop at max width or at num of pages
339 |                         rStart = Math.max(1, Math.min(page - format.current, pages - format.blockwide) + 1);
340 |                         rStop = format.inactive ? rStart + format.blockwide : Math.min(rStart + format.blockwide, 1 + pages);
341 |                     }
342 |                 }
343 | 
344 |                 while (i--) {
345 | 
346 |                     tmp = 0; // default everything is visible
347 |                     node = format.fstack[i];
348 | 
349 |                     switch (node.ftype) {
350 | 
351 |                         case "left":
352 |                             tmp = (node.fpos < rStart);
353 |                             break;
354 |                         case "right":
355 |                             tmp = (rStop <= pages - format.rights + node.fpos);
356 |                             break;
357 | 
358 |                         case "first":
359 |                             tmp = (format.current < page);
360 |                             break;
361 |                         case "last":
362 |                             tmp = (format.blockwide < format.current + pages - page);
363 |                             break;
364 | 
365 |                         case "prev":
366 |                             tmp = (1 < page);
367 |                             break;
368 |                         case "next":
369 |                             tmp = (page < pages);
370 |                             break;
371 |                     }
372 |                     groups|= tmp << node.fgroup; // group visible?
373 |                 }
374 | 
375 |                 data = {
376 |                     "number":   number, // number of elements
377 |                     "lapping":  lapping, // overlapping
378 |                     "pages":    pages, // number of pages
379 |                     "perpage":  opts["perpage"], // number of elements per page
380 |                     "page":     page, // current page
381 |                     "slice": [ // two element array with bounds of the current page selection
382 |                         (tmp = page * (opts["perpage"] - lapping) + lapping) - opts["perpage"], // Lower bound
383 |                         Math.min(tmp, number) // Upper bound
384 |                     ]
385 |                 };
386 | 
387 |                 buffer = "";
388 | 
389 |                 function buffer_append(opts, data, type) {
390 | 
391 |                     type = "" + (opts["onFormat"].call(data, type));
392 | 
393 |                     if (data["value"]) {
394 |                         buffer += type.replace(/<a/i, '<a data-page="' + data["value"] + '"');
395 |                     } else {
396 |                         buffer += type;
397 |                     }
398 |                 }
399 | 
400 |                 while (++i < count) {
401 | 
402 |                     node = format.fstack[i];
403 | 
404 |                     tmp = (groups >> node.fgroup & 1);
405 | 
406 |                     switch (node.ftype) {
407 |                         case "block":
408 |                             for (; rStart < rStop; ++rStart) {
409 | 
410 |                                 data["value"]  = rStart;
411 |                                 data["pos"]    = 1 + format.blockwide - rStop + rStart;
412 | 
413 |                                 data["active"] = rStart <= pages || number < 0;     // true if infinity series and rStart <= pages
414 |                                 data["first"]  = 1 === rStart;                      // check if it is the first page
415 |                                 data["last"]   = rStart === pages && 0 < number;    // false if infinity series or rStart != pages
416 | 
417 |                                 buffer_append(opts, data, node.ftype);
418 |                             }
419 |                             continue;
420 | 
421 |                         case "left":
422 |                             data["value"]  = node.fpos;
423 |                             data["active"] = node.fpos < rStart; // Don't take group-visibility into account!
424 |                             break;
425 | 
426 |                         case "right":
427 |                             data["value"]  = pages - format.rights + node.fpos;
428 |                             data["active"] = rStop <= data["value"]; // Don't take group-visibility into account!
429 |                             break;
430 | 
431 |                         case "prev":
432 |                         case "next":
433 |                           
434 |                             var p_ = 0;
435 |                             
436 |                             if (opts["stepwidth"] === 0) {
437 |                               
438 |                               if (node.ftype === "next") {
439 | 
440 |                                 if (page <= format.current) {
441 |                                   p_ = format.current + format.blockwide;
442 |                                 } else {
443 |                                   p_ = page + format.blockwide;
444 |                                 }
445 |                                 
446 |                               } else {
447 |                                 p_ = page - format.blockwide;
448 |                               }
449 |                               
450 |                             } else {
451 |                               p_ = node.ftype ==="next" ? page + opts["stepwidth"] : page - opts["stepwidth"];
452 |                             }
453 |                             
454 |                             if (opts["circular"]) {
455 |                                 data["active"] = 1;
456 |                                 data["value"]  = 1 + (pages + p_ - 1) % pages;
457 |                             } else if (node.ftype === "next" && number < 0) { // if type=next and infinity navigation
458 |                                 data["active"] = 1;
459 |                                 data["value"]  = p_;
460 |                             } else {
461 |                                 data["value"]  = Math.max(1, Math.min(p_, pages));
462 |                                 data["active"] = tmp && 1 < page && page < pages;
463 |                             }
464 |                             break;
465 | 
466 |                         case "first":
467 |                             data["value"]  = 1;
468 |                             data["active"] = tmp && 1 < page;
469 |                             break;
470 | 
471 |                         case "last":
472 |                             if (number < 0) {
473 |                                 data["active"]  = 1;
474 |                                 data["value"]   = 1 + page;
475 |                             } else {
476 |                                 data["value"]   = pages;
477 |                                 data["active"]  = tmp && page < pages;
478 |                             }
479 |                             break;
480 | 
481 |                         case "leap":
482 |                         case "fill":
483 |                             data["pos"]    = node.fpos;
484 |                             data["active"] = tmp; // tmp is true by default and changes only for group behaviour
485 |                             buffer_append(opts, data, node.ftype);
486 |                             continue;
487 |                     }
488 | 
489 |                     data["pos"]   = node.fpos;
490 |                     data["last"]  = /* void */
491 |                     data["first"] = undefined;
492 | 
493 |                     buffer_append(opts, data, node.ftype);
494 |                 }
495 | 
496 |                 if (self.length) {
497 | 
498 |                     $("a", self["html"](buffer)).click(opts['onClick'] || function(ev) {
499 |                         ev["preventDefault"]();
500 | 
501 |                         var obj = this;
502 | 
503 |                         do {
504 | 
505 |                             if ('a' === obj["nodeName"].toLowerCase()) {
506 |                                 break;
507 |                             }
508 | 
509 |                         } while ((obj = obj["parentNode"]));
510 | 
511 |                         Paging["setPage"]($(obj).data("page"));
512 | 
513 |                         if (Paging.locate) {
514 |                             window.location = obj["href"];
515 |                         }
516 |                     });
517 | 
518 |                     Paging.locate = opts["onSelect"].call({
519 |                         "number":   number,
520 |                         "lapping":  lapping,
521 |                         "pages":    pages,
522 |                         "slice":    data["slice"]
523 |                     }, page, self);
524 |                 }
525 |                 return Paging;
526 |             }
527 |         };
528 | 
529 |         return Paging
530 |                 ["setNumber"](number)
531 |                 ["setOptions"](opts)
532 |                 ["setPage"]();
533 |     };
534 | 
535 | }(jQuery, this));
536 | 


--------------------------------------------------------------------------------
/jquery.paging.min.js:
--------------------------------------------------------------------------------
 1 | /*
 2 | jQuery paging plugin v1.3.1 23/06/2014
 3 | http://www.xarg.org/2011/09/jquery-pagination-revised/
 4 | 
 5 | Copyright (c) 2011, Robert Eisele (robert@xarg.org)
 6 | Dual licensed under the MIT or GPL Version 2 licenses.
 7 | */
 8 | (function(p,x,u){p.fn.paging=function(A,B){var v=this,b={setOptions:function(c){b.a=p.extend(b.a||{lapping:0,perpage:10,page:1,stepwidth:1,refresh:{interval:10,url:null},format:"",lock:!1,circular:!1,onClick:null,onFormat:function(){},onSelect:function(){return!0},onRefresh:function(){}},c||{});b.a.lapping|=0;b.a.perpage|=0;null!==b.a.page&&(b.a.page|=0);1>b.a.perpage&&(b.a.perpage=10);b.interval&&x.clearInterval(b.interval);b.a.refresh.url&&(b.interval=x.setInterval(function(){p.ajax({url:b.a.refresh.url,
 9 | success:function(c){if("string"===typeof c)try{c=p.parseJSON(c)}catch(m){return}b.a.onRefresh(c)}})},1E3*b.a.refresh.interval));b.format=function(c){for(var b=0,e=0,q=1,h={g:[],i:0,h:0,b:5,current:3,l:0,m:0},a,p=/[*<>pq\[\]().-]|[nc]+!?/g,r={"[":"first","]":"last","<":"prev",">":"next",q:"left",p:"right","-":"fill",".":"leap"},n={};a=p.exec(c);)a=""+a,u===r[a]?"("===a?e=++b:")"===a?e=0:q&&("*"===a?(h.i=1,h.h=0):(h.i=0,h.h="!"===a.charAt(a.length-1),h.b=a.length-h.h,(h.current=1+a.indexOf("c"))||(h.current=
10 | 1+h.b>>1)),h.g.push({c:"block",j:0,f:0}),q=0):(h.g.push({c:r[a],j:e,f:u===n[a]?n[a]=1:++n[a]}),"q"===a?++h.m:"p"===a&&++h.l);return h}(b.a.format);return b},setNumber:function(c){b.s=u===c||0>c?-1:c;return b},setPage:function(c){function y(c,a,b){b=""+c.onFormat.call(a,b);q=a.value?q+b.replace(/<a/i,'<a data-page="'+a.value+'"'):q+b}if(b.a.lock)return b.a.onSelect(0,v),b;if(u===c){if(c=b.a.page,null===c)return b}else if(b.a.page==c)return b;b.a.page=c|=0;var m=b.s,e=b.a,q,h=1,a=b.format,z=a.g.length,
11 | r=z;e.perpage<=e.lapping&&(e.lapping=e.perpage-1);var n=m<=e.lapping?0:e.lapping|0;if(0>m){var f=m=-1;var k=Math.max(1,c-a.current+1-n);var t=k+a.b}else f=1+Math.ceil((m-e.perpage)/(e.perpage-n)),c=Math.max(1,Math.min(0>c?1+f+c:c,f)),a.i?(k=1,t=1+f,a.current=c,a.b=f):(k=Math.max(1,Math.min(c-a.current,f-a.b)+1),t=a.h?k+a.b:Math.min(k+a.b,1+f));for(;r--;){var l=0;var g=a.g[r];switch(g.c){case "left":l=g.f<k;break;case "right":l=t<=f-a.l+g.f;break;case "first":l=a.current<c;break;case "last":l=a.b<
12 | a.current+f-c;break;case "prev":l=1<c;break;case "next":l=c<f}h|=l<<g.j}var d={number:m,lapping:n,pages:f,perpage:e.perpage,page:c,slice:[(l=c*(e.perpage-n)+n)-e.perpage,Math.min(l,m)]};for(q="";++r<z;){g=a.g[r];l=h>>g.j&1;switch(g.c){case "block":for(;k<t;++k)d.value=k,d.pos=1+a.b-t+k,d.active=k<=f||0>m,d.first=1===k,d.last=k===f&&0<m,y(e,d,g.c);continue;case "left":d.value=g.f;d.active=g.f<k;break;case "right":d.value=f-a.l+g.f;d.active=t<=d.value;break;case "prev":case "next":var w=0;w=0===e.stepwidth?
13 | "next"===g.c?c<=a.current?a.current+a.b:c+a.b:c-a.b:"next"===g.c?c+e.stepwidth:c-e.stepwidth;e.circular?(d.active=1,d.value=1+(f+w-1)%f):"next"===g.c&&0>m?(d.active=1,d.value=w):(d.value=Math.max(1,Math.min(w,f)),d.active=l&&1<c&&c<f);break;case "first":d.value=1;d.active=l&&1<c;break;case "last":0>m?(d.active=1,d.value=1+c):(d.value=f,d.active=l&&c<f);break;case "leap":case "fill":d.pos=g.f;d.active=l;y(e,d,g.c);continue}d.pos=g.f;d.last=d.first=u;y(e,d,g.c)}v.length&&(p("a",v.html(q)).click(e.onClick||
14 | function(a){a.preventDefault();a=this;do if("a"===a.nodeName.toLowerCase())break;while(a=a.parentNode);b.setPage(p(a).data("page"));b.o&&(x.location=a.href)}),b.o=e.onSelect.call({number:m,lapping:n,pages:f,slice:d.slice},c,v));return b}};return b.setNumber(A).setOptions(B).setPage()}})(jQuery,this);


--------------------------------------------------------------------------------
/paging.jquery.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "paging",
 3 |     "title": "jQuery Pagination Plugin",
 4 |     "description": "Probably the most advanced jQuery pagination plugin.",
 5 |     "version": "1.3.1",
 6 |     "keywords": [
 7 |         "paging",
 8 |         "pagination",
 9 |         "pager",
10 |         "navigation"
11 |     ],
12 |     "author": {
13 |         "name": "Robert Eisele",
14 |         "url": "http://www.xarg.org/"
15 |     },
16 |     "licenses": [{
17 |             "type": "MIT",
18 |             "url": "http://www.opensource.org/licenses/MIT"
19 |         }, {
20 |             "type": "GPLv2",
21 |             "url": "http://www.opensource.org/licenses/GPL-2.0"
22 |         }],
23 |     "dependencies": {
24 |         "jquery": ">=1.5"
25 |     },
26 |     "homepage": "https://github.com/infusion/jQuery-Paging",
27 |     "demo": "http://www.xarg.org/2011/09/jquery-pagination-revised/"
28 | }
29 | 


--------------------------------------------------------------------------------