diff --git a/documentation/index.html b/documentation/index.html index 03a91aa..3e484fb 100644 --- a/documentation/index.html +++ b/documentation/index.html @@ -145,6 +145,12 @@

Options

1 It marks the current page. If the current page is set out of range, an exception will be thrown. + + centerCurrentPage + boolean + false + 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 Center Current Page example for more detail. + numberOfPages number @@ -507,6 +513,25 @@

Controlling the Item Container Class

} } + $('#example').bootstrapPaginator(options); + + + +
+

Center Current Page

+

This behavior is activated when attribute centerCurrentPage is true and numberOfPages is odd. The following example shows the 5 pages example with center current page

+
+
+
+ 
+                
+        var options = {
+            centerCurrentPage: true,
+            currentPage: 3,
+            totalPages: 10,
+            numberOfPages:5
+        }
+
         $('#example').bootstrapPaginator(options);
@@ -624,7 +649,7 @@

getPages Function

                 
-        
+
@@ -666,7 +691,7 @@

setOptions function

                 
-    
+
@@ -999,6 +1024,18 @@

page-changed Event

$('#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 = { @@ -1351,6 +1388,7 @@

page-changed Event

useBootstrapTooltip(); bootstrapTooltipConfiguration(); itemContainerClassDemo(); + centerCurrentPageDemo(); numberOfPagesDemo(); pageUrlDemo(); presenceOfPageDemo(); diff --git a/src/bootstrap-paginator.js b/src/bootstrap-paginator.js index 87ff952..003cf9c 100644 --- a/src/bootstrap-paginator.js +++ b/src/bootstrap-paginator.js @@ -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); } @@ -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; } }, @@ -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; } } @@ -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 { @@ -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); } @@ -550,6 +562,7 @@ return ""; }, currentPage: 1, + centerCurrentPage: false, numberOfPages: 5, totalPages: 1, pageUrl: function (type, page, current) { @@ -563,21 +576,21 @@ 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; @@ -585,31 +598,31 @@ }, itemTexts: function (type, page, current) { switch (type) { - case "first": - return "<<"; - case "prev": - return "<"; - case "next": - return ">"; - case "last": - return ">>"; - case "page": - return page; + case "first": + return "<<"; + case "prev": + return "<"; + case "next": + return ">"; + case "last": + return ">>"; + 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: { diff --git a/test/test.html b/test/test.html index 4fa0c0b..62a4a6f 100644 --- a/test/test.html +++ b/test/test.html @@ -1735,6 +1735,499 @@ equal(container.hasClass("pagination-centered"),false,"container must not have class pagination-centered when alignment is 'right'"); }) + + /** + * + * Tests the get page result with center option. When the current page is 1 under the configuration, there will be no first and previous page, + * current page will be 1, next page will be 2, and last page will be 11. Second page within the pages item is 2. + * + * */ + test("test centerCurrentPage, getPage result, current page 1",function(){ + options = { + containerClass:"pagination" + , currentPage:1 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var pages = container.bootstrapPaginator("getPages"); + + equal(pages.current,1,"Current page of initial setup is 1.") + + equal(pages.first,1,"No first page in the initial setup") + + equal(pages.prev, 1, "No previous page in the initial setup") + + equal(pages.next, 2, "Next page of initial setup is 2") + + equal(pages.last, 11, "Last page of initial setup is 11") + + equal(pages[1],2,"page number 1's value must be 2"); + + + + }) + + /** + * + * Tests the get page result with center option. When the current page is 2 under the configuration, first and previous page is 1, + * next is 3, last is 11, the 3rd page item is 3. + * + * */ + test("test centerCurrentPage, getPage result, current page 2",function(){ + options = { + containerClass:"pagination" + , currentPage:2 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var pages = container.bootstrapPaginator("getPages"); + + equal(pages.current,2,"Current page of initial setup is 2.") + + equal(pages.first,1,"First page is one") + + equal(pages.prev, 1, "Previous page is 1") + + equal(pages.next, 3, "Next page of initial setup is 3") + + equal(pages.last, 11, "Last page of initial setup is 11") + + equal(pages[2],3,"page number 2's value must be 3"); + + equal(pages.length, 3, "Length of the pages is 3") + + + }) + + /** + * + * Tests the get page result with center option. When the current page is 3 under the configuration, first page is 1 and previous page is 2, + * next is 4, last is 11, the 4rd page item is 4. + * + * */ + test("test centerCurrentPage, getPage result, current page 3",function(){ + options = { + containerClass:"pagination" + , currentPage:3 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var pages = container.bootstrapPaginator("getPages"); + + equal(pages.current,3,"Current page of initial setup is 3.") + + equal(pages.first,1,"First page is one") + + equal(pages.prev, 2, "Previous page is 2") + + equal(pages.next, 4, "Next page of initial setup is 4") + + equal(pages.last, 11, "Last page of initial setup is 11") + + equal(pages[2],4,"page number 2's value must be 4"); + + equal(pages.length, 3, "Length of the pages is 3") + + + }) + + /** + * Tests the get page result with center option, when the current page is 10, first is 1, previous is 9, next and last are 11. + * + * */ + test("test centerCurrentPage, getPage result, current page 10",function(){ + options = { + containerClass:"pagination" + , currentPage:10 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var pages = container.bootstrapPaginator("getPages"); + + equal(pages.current,10,"Current page of initial setup is 10.") + + equal(pages.first,1,"First page is 1") + + equal(pages.prev, 9, "Previous page is 9") + + equal(pages.next, 11, "Next page is 11") + + equal(pages.last, 11, "Last page is 11") + + equal(pages.length, 3, "Length of the pages is 3") + }) + + /** + * Tests the get page result with center option, when the current page is 11, first is 1, previous is 10, no next and last item. + * the length of pages is 2. + * + * */ + test("test centerCurrentPage, getPage result, current page 11",function(){ + options = { + containerClass:"pagination" + , currentPage:11 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var pages = container.bootstrapPaginator("getPages"); + + equal(pages.current,11,"Current page of initial setup is 11.") + + equal(pages.first,1,"First page is 1") + + equal(pages.prev, 10, "Previous page is 10") + + equal(pages.next, 11, "No next page") + + equal(pages.last, 11, "No last page") + + equal(pages.length, 3, "Length of the pages is 3") + }) + + /** + * Test case 1, there will be 5 items, 1,2,3 and >, >> + * */ + test("test centerCurrentPage, rendering for page = 1",function(){ + + options = { + containerClass:"pagination" + , currentPage:1 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var containerChildren = container.children(); + + equal(containerChildren.length,1,"must be only 1 element in the container"); + + var outerContainer = $(containerChildren[0]) + + ok(outerContainer.is("ul"),"outer container element is ul"); + + var pageItems = outerContainer.children(); + + equal(pageItems.length,5,"page items in this case is 3 page items plus next and last"); + + equal($($(pageItems[0]).children()[0]).text(),'1',"first page is 1, no previous and first"); + + ok($(pageItems[0]).hasClass("active"),"first page 1 is an active page"); + + equal($($(pageItems[1]).children()[0]).text(),'2',"second item is 2"); + + equal($($(pageItems[2]).children()[0]).text(),'3',"third item is 3"); + + equal($($(pageItems[3]).children()[0]).text(),">","fourth item is next"); + + equal($($(pageItems[4]).children()[0]).text(),">>","fifth item is last"); + + }) + + /** + * Test case 2, there will be 7 items, <<, <, 1, 2, 3 and >, >> + * */ + test("test centerCurrentPage, rendering for page = 2", function(){ + + container.bootstrapPaginator("destroy"); + + options = { + containerClass:"pagination" + , currentPage:2 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var containerChildren = container.children(); + + equal(containerChildren.length,1,"must be only 1 element in the container"); + + var outerContainer = $(containerChildren[0]) + + ok(outerContainer.is("ul"),"outer container element is ul"); + + var pageItems = outerContainer.children(); + + equal(pageItems.length,7,"page items in this case is first, previous, 3 page items plus next and last"); + + equal($($(pageItems[0]).children()[0]).text(),'<<',"first item is first page with text <<"); + + equal($($(pageItems[1]).children()[0]).text(),'<',"second item is previous page wiht text <"); + + equal($($(pageItems[2]).children()[0]).text(),'1',"third page item is 1"); + + equal($($(pageItems[3]).children()[0]).text(),'2',"fourth page item is 2"); + + ok($(pageItems[3]).hasClass("active"),"fourth page item is an active page"); + + equal($($(pageItems[4]).children()[0]).text(),'3',"fifth page item is 3"); + + equal($($(pageItems[5]).children()[0]).text(),">","sixth item is next"); + + equal($($(pageItems[6]).children()[0]).text(),">>","seventh item is last"); + + }) + + /** + * Test case 3, there will be 7 items, <<, <, 2, 3, 4 and >, >> + * */ + test("test centerCurrentPage, rendering for page = 3", function(){ + + container.bootstrapPaginator("destroy"); + + options = { + containerClass:"pagination" + , currentPage:3 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var containerChildren = container.children(); + + equal(containerChildren.length,1,"must be only 1 element in the container"); + + var outerContainer = $(containerChildren[0]) + + ok(outerContainer.is("ul"),"outer container element is ul"); + + var pageItems = outerContainer.children(); + + equal(pageItems.length,7,"page items in this case is first, previous, 3 page items plus next and last"); + + equal($($(pageItems[0]).children()[0]).text(),'<<',"first item is first page with text <<"); + + equal($($(pageItems[1]).children()[0]).text(),'<',"second item is previous page wiht text <"); + + equal($($(pageItems[2]).children()[0]).text(),'2',"third page item is 2"); + + equal($($(pageItems[3]).children()[0]).text(),'3',"fourth page item is 3"); + + ok($(pageItems[3]).hasClass("active"),"fourth page item is an active page"); + + equal($($(pageItems[4]).children()[0]).text(),'4',"fifth page item is 4"); + + equal($($(pageItems[5]).children()[0]).text(),">","sixth item is next"); + + equal($($(pageItems[6]).children()[0]).text(),">>","seventh item is last"); + + }) + + /** + * Test case 10, there will be 7 items, <<, <, 9, 10, 11, >, >> + * */ + test("test centerCurrentPage, rendering for page = 10", function(){ + + container.bootstrapPaginator("destroy"); + + options = { + containerClass:"pagination" + , currentPage:10 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var containerChildren = container.children(); + + equal(containerChildren.length,1,"must be only 1 element in the container"); + + var outerContainer = $(containerChildren[0]) + + ok(outerContainer.is("ul"),"outer container element is ul"); + + var pageItems = outerContainer.children(); + + equal(pageItems.length,7,"page items in this case is first, previous, 3 page items plus next and last"); + + equal($($(pageItems[0]).children()[0]).text(),'<<',"first item is first page with text <<"); + + equal($($(pageItems[1]).children()[0]).text(),'<',"second item is previous page wiht text <"); + + equal($($(pageItems[2]).children()[0]).text(),'9',"third page item is 9"); + + equal($($(pageItems[3]).children()[0]).text(),'10',"fourth page item is 10"); + + ok($(pageItems[3]).hasClass("active"),"fourth page item is an active page"); + + equal($($(pageItems[4]).children()[0]).text(),'11',"fourth page item is 11"); + + equal($($(pageItems[5]).children()[0]).text(),">","fifth item is next"); + + equal($($(pageItems[6]).children()[0]).text(),">>","sixth item is last"); + + }) + + /** + * Test case 11, there will be 5 items, <<, <, 9, 10, 11 + * */ + test("test centerCurrentPage, rendering for page = 11",function(){ + + options = { + containerClass:"pagination" + , currentPage:11 + , numberOfPages: 3 + , totalPages:11 + , centerCurrentPage:true + , pageUrl:function(type,page){ + return null; + } + , onPageClicked:null + , onPageChanged:null + + + }; + + container.bootstrapPaginator(options); + + var containerChildren = container.children(); + + equal(containerChildren.length,1,"must be only 1 element in the container"); + + var outerContainer = $(containerChildren[0]) + + ok(outerContainer.is("ul"),"outer container element is ul"); + + var pageItems = outerContainer.children(); + + equal(pageItems.length,5,"page items in this case is first, previous, 3 page items"); + + equal($($(pageItems[0]).children()[0]).text(),'<<',"first item is first page with text <<"); + + equal($($(pageItems[1]).children()[0]).text(),'<',"second item is previous page wiht text <"); + + equal($($(pageItems[2]).children()[0]).text(),'9',"third page item is 9"); + + equal($($(pageItems[3]).children()[0]).text(),'10',"fourth page item is 10"); + + equal($($(pageItems[4]).children()[0]).text(),'11',"fifth page item is 11"); + + ok($(pageItems[4]).hasClass("active"),"fifth page item is an active page"); + }) + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + module("Bad input testing",{