Skip to content

Commit fe32754

Browse files
ObjetDirectObjetDirect
committed
Add the Paginate plugin for Bootstrap
1 parent abc1479 commit fe32754

2 files changed

Lines changed: 265 additions & 0 deletions

File tree

‎Bootstrap/bootstrap-paginate/README.md‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
# Paginate plugin for Bootstrap #
2+
3+
This plugin offers the possibility to paginate.
4+
5+
Installation
6+
------------
7+
8+
First, to make it works, the following files have to be included.
9+
10+
<pre>
11+
&lt;link type=&quot;text/css&quot; media=&quot;screen&quot; title=&quot;no title&quot; rel=&quot;stylesheet&quot; href=&quot;bootstrap.css&quot; /&gt;
12+
13+
&lt;script src=&quot;jquery.js&quot;&gt; &lt;/script&gt;
14+
&lt;script src=&quot;bootstrap.js&quot;&gt; &lt;/script&gt;
15+
&lt;script src=&quot;bootstrap-paginate.js&quot;&gt; &lt;/script&gt;
16+
</pre>
17+
18+
Launching
19+
---------
20+
21+
Define in your HTML the content of your Paginate.
22+
23+
<pre>
24+
&lt;div id=&quot;paginate&quot;&gt;
25+
&lt;/div&gt;
26+
</pre>
27+
28+
And the associated JavaScript:
29+
<pre>
30+
$(&quot;#paginate&quot;).paginate({
31+
pages: 5,
32+
pageChange: function(index) {
33+
$(&quot;table tbody&quot;).load(&quot;/user/paginate/&quot; + index);
34+
}
35+
});
36+
</pre>
37+
38+
It is possible to specify options:
39+
<pre>
40+
// Default options
41+
$.fn.paginate.defaults = {
42+
align: &quot;centered&quot;, /* values: centered, right, left, null */
43+
size: null, /* values: large, small, mini, null */
44+
previousText: &quot;&amp;laquo;&quot;,
45+
nextText: &quot;&amp;raquo;&quot;,
46+
detachedPreviousText: &quot;&amp;larr; Older&quot;,
47+
detachedNextText: &quot;Newer &amp;rarr;&quot;,
48+
previousPlacement: &quot;normal&quot;, /* values: normal, detached */
49+
nextPlacement: &quot;normal&quot;, /* values: normal, detached */
50+
pages: 10, /* Nb page max */
51+
pageChange: function(index) { }
52+
};
53+
</pre>

‎Bootstrap/bootstrap-paginate/bootstrap-paginate.js‎

Lines changed: 212 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,212 @@
1+
/**
2+
* Paginate plugin for Boostrap
3+
* An example of HTML to use it:
4+
*
5+
<div id="paginate"></div>
6+
7+
* And the JavaScript:
8+
*
9+
$("#paginate").paginate({
10+
pages: 5,
11+
pageChange: function(index) {
12+
$("table tbody").load("/user/paginate/" + index);
13+
}
14+
});
15+
*/
16+
17+
!function($) {
18+
"use strict";
19+
20+
/* PAGINATE PUBLIC CLASS DEFINITION
21+
* ============================== */
22+
23+
var Paginate = function(element, options) {
24+
var self = this;
25+
26+
// Base
27+
this.$element = $(element);
28+
this.options = $.extend({}, $.fn.paginate.defaults, options);
29+
this.index = 0;
30+
this.maxLink = 10;
31+
this.indexMin = 0;
32+
this.indexMax = this.indexMin + this.maxLink;
33+
34+
// Decoration
35+
this.$element.addClass("pagination");
36+
this.options.align && this.$element.addClass("pagination-" + this.options.align);
37+
this.options.size && this.$element.addClass("pagination-" + this.options.size);
38+
39+
// Childs
40+
this.$ul = $("<ul></ul>");
41+
42+
if(this.options.previousPlacement == "detached"){
43+
this.$previous = $("<li class='previous'><a href='#' data-index='previous'>" + this.options.detachedPreviousText + "</a></li>");
44+
45+
} else {
46+
this.$previous = $("<li><a href='#' data-index='previous'>" + this.options.previousText + "</a></li>");
47+
}
48+
49+
if(this.options.previousPlacement == "detached"){
50+
this.$next = $("<li class='next'><a href='#' data-index='next'>" + this.options.detachedNextText + "</a></li>");
51+
52+
} else {
53+
this.$next = $("<li><a href='#' data-index='next'>" + this.options.nextText + "</a></li>");
54+
}
55+
56+
this.insertIndexes();
57+
58+
// Listeners
59+
this.$element.on("click", "li:not(.disabled) a", function(event){
60+
event.preventDefault();
61+
var $a = $(this), index = $a.data("index");
62+
63+
switch(index){
64+
case "previous":
65+
self.index--;
66+
break;
67+
68+
case "next":
69+
self.index++;
70+
break;
71+
72+
default:
73+
self.index = window.parseInt(index);
74+
break;
75+
}
76+
77+
self.update();
78+
$.isFunction(self.options.pageChange) && self.options.pageChange(self.index);
79+
self.$element.trigger("paginate", [self.index]);
80+
});
81+
82+
// Display the element
83+
this.update();
84+
this.$element.append(this.$ul);
85+
};
86+
87+
Paginate.prototype.insertIndexes = function(){
88+
var length = Math.min(this.options.pages, this.indexMax)
89+
90+
this.$ul.append(this.$previous);
91+
92+
for(var i = this.indexMin; i < length; i++){
93+
this.$ul.append("<li><a href='#' data-index='" + i + "'>" + (i+1) + "</a></li>");
94+
}
95+
96+
this.$ul.append(this.$next);
97+
98+
if(length <= 0){
99+
this.$element.hide();
100+
101+
} else {
102+
this.$element.show();
103+
}
104+
};
105+
106+
Paginate.prototype.update = function(){
107+
if(this.index < this.indexMin || this.indexMax <= this.index + 1){
108+
// We have to flush the elements
109+
this.$ul.find("li").remove();
110+
111+
this.indexMin = this.index < this.indexMin ? this.indexMin + 1 - this.maxLink : this.indexMax - 1;
112+
this.indexMax = this.indexMin + this.maxLink;
113+
this.insertIndexes();
114+
115+
} else {
116+
this.$ul.find("li").removeClass("disabled");
117+
}
118+
119+
if(this.index <= 0) {
120+
this.$previous.addClass("disabled");
121+
122+
} else {
123+
this.$previous.removeClass("disabled");
124+
}
125+
126+
this.$ul.find("a[data-index='" + this.index + "']").parents("li:first").addClass("disabled");
127+
128+
if(this.index < this.options.pages - 1) {
129+
this.$next.removeClass("disabled");
130+
131+
} else {
132+
this.$next.addClass("disabled");
133+
}
134+
};
135+
136+
Paginate.prototype.index = function(){
137+
return index;
138+
};
139+
140+
Paginate.prototype.option = function(options){
141+
if(!options){
142+
return;
143+
}
144+
145+
var changePrevious = false, changeNext = false;
146+
147+
for(var i in options) {
148+
switch(i){
149+
case "previousPlacement":
150+
case "previousText":
151+
changePrevious = true;
152+
153+
case "nextText":
154+
case "detachedNextText":
155+
changeNext = true;
156+
157+
default:
158+
this.options[i] = options[i];
159+
break;
160+
}
161+
}
162+
163+
if(changePrevious){
164+
this.$previous.find("a").text(this.options.previousPlacement == "detached" ? this.options.detachedPreviousText : this.options.previousText);
165+
}
166+
167+
if(changeNext){
168+
this.$next.find("a").text(this.options.nextPlacement == "detached" ? this.options.detachedNextText : this.options.nextText);
169+
}
170+
171+
this.update();
172+
};
173+
174+
/* PAGINATE PLUGIN DEFINITION
175+
* ======================== */
176+
177+
$.fn.paginate = function(opts) {
178+
return this.each(function() {
179+
var $this = $(this), data = $this.data("paginate"), options = typeof opts == "object" && opts;
180+
181+
if(data){
182+
data.option(options)
183+
184+
} else {
185+
$this.data("paginate", new $.fn.paginate.Constructor(this, options));
186+
}
187+
});
188+
};
189+
190+
$.fn.paginate.defaults = {
191+
align: "centered", /* values: centered, right, left, null */
192+
size: null, /* values: large, small, mini, null */
193+
previousText: "&laquo;",
194+
nextText: "&raquo;",
195+
detachedPreviousText: "&larr; Older",
196+
detachedNextText: "Newer &rarr;",
197+
previousPlacement: "normal", /* values: normal, detached */
198+
nextPlacement: "normal", /* values: normal, detached */
199+
pages: 10, /* Nb page max */
200+
pageChange: function(index) { }
201+
};
202+
203+
$.fn.paginate.Constructor = Paginate;
204+
205+
/* PAGINATE DATA-API
206+
* =============== */
207+
208+
$(function() {
209+
$("body").find("div[data-role=paginate], div.paginate").paginate();
210+
});
211+
212+
}(window.jQuery);

0 commit comments

Comments
 (0)