Skip to content

Commit

Permalink
Add center current page:
Browse files Browse the repository at this point in the history 
Issue: lyonlai#19

Squashed commit of the following:

commit d83e60d
Author: Felipe K. De Boni <[email protected]>
Date:   Fri Feb 28 00:30:33 2014 -0300

    fixing centerCurrentPage when totalPages - numberOfPages is negative

commit 09cb7fb
Author: Felipe K. De Boni <[email protected]>
Date:   Fri Feb 7 02:21:11 2014 -0200

    new feature: current active page, automatically move to center
  • Loading branch information
@rtritto
rtritto committed Nov 22, 2022
1 parent 03f4c1e commit 5a8f6b4
Show file tree
Hide file tree
Showing 3 changed files with 640 additions and 96 deletions.
42 changes: 40 additions & 2 deletions documentation/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,6 +145,12 @@ <h3>Options</h3>
<td>1</td>
<td>It marks the current page. If the current page is set out of range, an exception will be thrown.</td>
</tr>
<tr>
<td class="bp-example-docs-option-attr">centerCurrentPage</td>
<td>boolean</td>
<td>false</td>
<td>The current page will be in the center, and padded with other values. To centerCurrentPage option work, the number of pages must be odd, otherwise it will act as false. See the <a href="#center-current-page" title="Click to see the Center Current Page example">Center Current Page example</a> for more detail.</td>
</tr>
<tr>
<td class="bp-example-docs-option-attr">numberOfPages</td>
<td>number</td>
Expand Down Expand Up @@ -507,6 +513,25 @@ <h3>Controlling the Item Container Class</h3>
}
}

$('#example').bootstrapPaginator(options);
</code>
</pre>
</div>
<div id="center-current-page">
<h3>Center Current Page</h3>
<p>This behavior is activated when attribute <strong class="bp-example-docs-option-attr">centerCurrentPage</strong> is true and <strong class="bp-example-docs-option-attr">numberOfPages</strong> is odd. The following example shows the 5 pages example with center current page</p>
<div class="bp-docs-example">
<div id="bp-example-center-current-page"></div>
</div>
<pre class="javascript">
<code>
var options = {
centerCurrentPage: true,
currentPage: 3,
totalPages: 10,
numberOfPages:5
}

$('#example').bootstrapPaginator(options);
</code>
</pre>
Expand Down Expand Up @@ -624,7 +649,7 @@ <h3>getPages Function</h3>
</div>
<pre class="javascript">
<code id="get-pages-code">

</code>
</pre>
</div>
Expand Down Expand Up @@ -666,7 +691,7 @@ <h3>setOptions function</h3>
</div>
<pre class="javascript">
<code id="set-option-code">

</code>
</pre>
</div>
Expand Down Expand Up @@ -999,6 +1024,18 @@ <h3>page-changed Event</h3>
$('#bp-example-page-item-container-class').bootstrapPaginator(options);
}

function centerCurrentPageDemo(){

var options = {
centerCurrentPage: true,
currentPage: 3,
totalPages: 10,
numberOfPages: 5
}

$('#bp-example-center-current-page').bootstrapPaginator(options);
}

function numberOfPagesDemo(){

var options = {
Expand Down Expand Up @@ -1351,6 +1388,7 @@ <h3>page-changed Event</h3>
useBootstrapTooltip();
bootstrapTooltipConfiguration();
itemContainerClassDemo();
centerCurrentPageDemo();
numberOfPagesDemo();
pageUrlDemo();
presenceOfPageDemo();
Expand Down
201 changes: 107 additions & 94 deletions src/bootstrap-paginator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@
this.numberOfPages = parseInt(this.options.numberOfPages, 10); //setup the numberOfPages to be shown

//move the set current page after the setting of total pages. otherwise it will cause out of page exception.
if (options && typeof (options.currentPage) !== 'undefined') {
if (options && typeof (options.currentPage) !== 'undefined') {

this.setCurrentPage(options.currentPage);
}
Expand Down Expand Up @@ -199,21 +199,21 @@
var currentTarget = $(event.currentTarget);

switch (type) {
case "first":
currentTarget.bootstrapPaginator("showFirst");
break;
case "prev":
currentTarget.bootstrapPaginator("showPrevious");
break;
case "next":
currentTarget.bootstrapPaginator("showNext");
break;
case "last":
currentTarget.bootstrapPaginator("showLast");
break;
case "page":
currentTarget.bootstrapPaginator("show", page);
break;
case "first":
currentTarget.bootstrapPaginator("showFirst");
break;
case "prev":
currentTarget.bootstrapPaginator("showPrevious");
break;
case "next":
currentTarget.bootstrapPaginator("showNext");
break;
case "last":
currentTarget.bootstrapPaginator("showLast");
break;
case "page":
currentTarget.bootstrapPaginator("show", page);
break;
}

},
Expand Down Expand Up @@ -245,25 +245,25 @@
this.$element.addClass("pagination");

switch (size.toLowerCase()) {
case "large":
case "small":
case "mini":
this.$element.addClass($.fn.bootstrapPaginator.sizeArray[this.options.bootstrapMajorVersion][size.toLowerCase()]);
break;
default:
break;
case "large":
case "small":
case "mini":
this.$element.addClass($.fn.bootstrapPaginator.sizeArray[this.options.bootstrapMajorVersion][size.toLowerCase()]);
break;
default:
break;
}

if (this.options.bootstrapMajorVersion === 2) {
switch (alignment.toLowerCase()) {
case "center":
this.$element.addClass("pagination-centered");
break;
case "right":
this.$element.addClass("pagination-right");
break;
default:
break;
case "center":
this.$element.addClass("pagination-centered");
break;
case "right":
this.$element.addClass("pagination-right");
break;
default:
break;
}
}

Expand Down Expand Up @@ -352,43 +352,43 @@

switch (type) {

case "first":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "last":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "prev":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "next":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "page":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "first":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "last":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "prev":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "next":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
case "page":
if (!this.getValueFromOption(this.options.shouldShowPage, type, page, this.currentPage)) { return; }
text = this.options.itemTexts(type, page, this.currentPage);
title = this.options.tooltipTitles(type, page, this.currentPage);
break;
}

itemContainer.addClass(itemContainerClass).append(itemContent);

itemContent.addClass(itemContentClass).html(text).on("click", null, {type: type, page: page}, $.proxy(this.onPageItemClicked, this));
itemContent.addClass(itemContentClass).html(text).on("click", null, { type: type, page: page }, $.proxy(this.onPageItemClicked, this));

if (this.options.pageUrl) {
itemContent.attr("href", this.getValueFromOption(this.options.pageUrl, type, page, this.currentPage));
}

if (this.options.useBootstrapTooltip) {
tooltipOpts = $.extend({}, this.options.bootstrapTooltipOptions, {title: title});
tooltipOpts = $.extend({}, this.options.bootstrapTooltipOptions, { title: title });

itemContent.tooltip(tooltipOpts);
} else {
Expand Down Expand Up @@ -423,10 +423,22 @@
pageStart = (this.currentPage % this.numberOfPages === 0) ? (parseInt(this.currentPage / this.numberOfPages, 10) - 1) * this.numberOfPages + 1 : parseInt(this.currentPage / this.numberOfPages, 10) * this.numberOfPages + 1,//calculates the start page.
output = [],
i = 0,
counter = 0;
counter = 0,
padWith;

pageStart = pageStart < 1 ? 1 : pageStart;//check the range of the page start to see if its less than 1.

if (this.options.centerCurrentPage && this.numberOfPages % 2 !== 0) {
padWith = (this.numberOfPages - 1) / 2;
if (this.currentPage - padWith <= 0 || (this.totalPages - this.numberOfPages + 1) <= 0) {
pageStart = 1;
} else if (this.currentPage + padWith > this.totalPages) {
pageStart = this.totalPages - this.numberOfPages + 1;
} else {
pageStart = this.currentPage - padWith;
}
}

for (i = pageStart, counter = 0; counter < this.numberOfPages && i <= totalPages; i = i + 1, counter = counter + 1) {//fill the pages
output.push(i);
}
Expand Down Expand Up @@ -550,6 +562,7 @@
return "";
},
currentPage: 1,
centerCurrentPage: false,
numberOfPages: 5,
totalPages: 1,
pageUrl: function (type, page, current) {
Expand All @@ -563,53 +576,53 @@
var result = true;

switch (type) {
case "first":
result = (current !== 1);
break;
case "prev":
result = (current !== 1);
break;
case "next":
result = (current !== this.totalPages);
break;
case "last":
result = (current !== this.totalPages);
break;
case "page":
result = true;
break;
case "first":
result = (current !== 1);
break;
case "prev":
result = (current !== 1);
break;
case "next":
result = (current !== this.totalPages);
break;
case "last":
result = (current !== this.totalPages);
break;
case "page":
result = true;
break;
}

return result;

},
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "&lt;&lt;";
case "prev":
return "&lt;";
case "next":
return "&gt;";
case "last":
return "&gt;&gt;";
case "page":
return page;
case "first":
return "&lt;&lt;";
case "prev":
return "&lt;";
case "next":
return "&gt;";
case "last":
return "&gt;&gt;";
case "page":
return page;
}
},
tooltipTitles: function (type, page, current) {

switch (type) {
case "first":
return "Go to first page";
case "prev":
return "Go to previous page";
case "next":
return "Go to next page";
case "last":
return "Go to last page";
case "page":
return (page === current) ? "Current page is " + page : "Go to page " + page;
case "first":
return "Go to first page";
case "prev":
return "Go to previous page";
case "next":
return "Go to next page";
case "last":
return "Go to last page";
case "page":
return (page === current) ? "Current page is " + page : "Go to page " + page;
}
},
bootstrapTooltipOptions: {
Expand Down
Loading

0 comments on commit 5a8f6b4

Please sign in to comment.