From c7a489ac5df11973d0b12454612c6ba275733c2c Mon Sep 17 00:00:00 2001 From: Eugene Simakin Date: Mon, 26 Sep 2016 19:57:12 +0300 Subject: [PATCH] Options explanation update and deprecated examples removed + plugin update --- index.html | 299 +++++++++++++++++++++++------------- js/jquery.twbsPagination.js | 189 +++++++++++++---------- 2 files changed, 294 insertions(+), 194 deletions(-) diff --git a/index.html b/index.html index 25dd1f0..a9b78f2 100644 --- a/index.html +++ b/index.html @@ -7,14 +7,14 @@ - + - - + + @@ -22,6 +22,37 @@ + + jQuery Pagination plugin @@ -80,77 +111,171 @@

});

And HTML code:

- 
    <ul id="pagination-demo" class="pagination-sm"></ul>
+ 
    <ul id="pagination-demo" class="pagination-sm"></ul>

Options and events

+ class="octicon octicon-link">Options explanation

-

- -

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Option nameDescriptionTypeDefault value
totalPagesThe number of pagesNumber1
startPageThe current page that show on startNumber1
visiblePagesMax visible pagesNumber5
initiateStartPageClickFire click at start page when plugin initializedBooltrue
hrefGenerate query string or generate #Boolfalse
pageVariableTemplate that will be replaced with page numberString'{{page}}'
totalPagesVariableWill be replaced with total pages numberString'{{total_pages}}'
pageIt can be used to customize page number labelStringnull
firstText label for the 'First' buttonString'First'
prevLabel for the 'Previous' buttonString'Previous'
nextLabel for the 'Next' buttonString'Next'
lastLabel for the 'Last' buttonString'Last'
loopCarousel-style paginationBoolfalse
onPageClickCallback on click eventFunctionnull
paginationClassThe root style for pagination componentString'pagination'
nextClassCSS class(es) for the 'Next' buttonString'page-item next'
prevClassClass(es) for the 'Previous' buttonString'page-item prev'
lastClassClass(es) for the 'Last' buttonString'page-item last'
firstClassClass(es) for the 'First' buttonString'page-item first'
pageClassClass(es) for the page buttonsString'page-item'
activeClassClass(es) for active buttonString'active'
disabledClassClass(es) for the disabled button(s)String'disabled'
anchorClassCSS class(es) for anchors inside buttonsString'page-link'

Examples

-

URL page link

- -

You can specify url using href option:

- 
    $(selector).twbsPagination({
-        totalPages: 35,
-        visiblePages: 8,
-        href: '?page={{number}}'
-    });
- -

Visible pages option

- -

The max number of visible pages specifies via visiblePages option. The following example - shows the 10 visible pages:

- 
    $(selector).twbsPagination({
-        totalPages: 35,
-        visiblePages: 10,
-    });
- -

Note: this is normal size (without pagination-sm)

- -
- -
-

Synchronized pagination elements

You can attach multiple paginators to your content and access them via class name. @@ -162,50 +287,6 @@

Synchronized pagination elements

-

Using href and hrefVariable options / Example 1

- -

Warning!
- Page has been reload -

- -

We do develop not always SAP (single page app). In that case you should have use this - options

- -
Page 1
-
- -
- -

Piece of code:

- 
   $(selector).twbsPagination({
-        totalPages: 15,
-        visiblePages: 5 ,
-        href: '?a=&page={{number}}&c=d' ,
-        onPageClick: function (event, page) {
-            $('#not-spa-demo-content').text('Page ' + page);
-        }
-    });
-
- -

Using href and hrefVariable options / Example 2

- -
Page 1
-
- -
- -

Piece of code:

- 
   $(selector).twbsPagination({
-        totalPages: 15,
-        visiblePages: 5,
-        href: '#page={{pageNumber}}&c=d',
-        hrefVariable: '{{pageNumber}}',
-        onPageClick: function (event, page) {
-            ...
-        }
-    });
-
-

License

@@ -216,7 +297,7 @@

you may not use this file except in compliance with the License. You may obtain a copy of the License at

-

http://www.apache.org/licenses/LICENSE-2.0

+

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, @@ -231,7 +312,7 @@

diff --git a/js/jquery.twbsPagination.js b/js/jquery.twbsPagination.js index f96332a..15bb5ee 100644 --- a/js/jquery.twbsPagination.js +++ b/js/jquery.twbsPagination.js @@ -1,12 +1,11 @@ /*! - * jQuery pagination plugin v1.2.6 + * jQuery pagination plugin v1.4 * http://esimakin.github.io/twbs-pagination/ * - * Copyright 2014, Eugene Simakin + * Copyright 2014-2016, Eugene Simakin * Released under Apache 2.0 license * http://apache.org/licenses/LICENSE-2.0.html */ -; (function ($, window, document, undefined) { 'use strict'; @@ -33,19 +32,23 @@ throw new Error('Visible pages option is not correct!'); } + // hide if only one page exists + if (this.options.totalPages == 1) { + return this; + } + if (this.options.totalPages < this.options.visiblePages) { this.options.visiblePages = this.options.totalPages; } if (this.options.onPageClick instanceof Function) { - this.$element.first().bind('page', this.options.onPageClick); + this.$element.first().on('page', this.options.onPageClick); } if (this.options.href) { - var m, regexp = this.options.href.replace(/[-\/\\^$*+?.|[\]]/g, '\\$&'); - regexp = regexp.replace(this.options.hrefVariable, '(\\d+)'); - if ((m = new RegExp(regexp, 'i').exec(window.location.href)) != null) { - this.options.startPage = parseInt(m[1], 10); + this.options.startPage = this.getPageFromQueryString(); + if (!this.options.startPage) { + this.options.startPage = 1; } } @@ -64,11 +67,11 @@ this.$element.append(this.$listContainer); } - this.render(this.getPages(this.options.startPage)); - this.setupEvents(); - if (this.options.initiateStartPageClick) { - this.$element.trigger('page', this.options.startPage); + this.show(this.options.startPage); + } else { + this.render(this.getPages(this.options.startPage)); + this.setupEvents(); } return this; @@ -81,7 +84,8 @@ destroy: function () { this.$element.empty(); this.$element.removeData('twbs-pagination'); - this.$element.unbind('page'); + this.$element.off('page'); + return this; }, @@ -89,76 +93,55 @@ if (page < 1 || page > this.options.totalPages) { throw new Error('Page is incorrect.'); } + this.currentPage = page; this.render(this.getPages(page)); this.setupEvents(); this.$element.trigger('page', page); + return this; }, buildListItems: function (pages) { - var $listItems = $(); + var listItems = []; if (this.options.first) { - $listItems = $listItems.add(this.buildItem('first', 1)); + listItems.push(this.buildItem('first', 1)); } if (this.options.prev) { var prev = pages.currentPage > 1 ? pages.currentPage - 1 : this.options.loop ? this.options.totalPages : 1; - $listItems = $listItems.add(this.buildItem('prev', prev)); + listItems.push(this.buildItem('prev', prev)); } for (var i = 0; i < pages.numeric.length; i++) { - $listItems = $listItems.add(this.buildItem('page', pages.numeric[i])); + listItems.push(this.buildItem('page', pages.numeric[i])); } if (this.options.next) { var next = pages.currentPage < this.options.totalPages ? pages.currentPage + 1 : this.options.loop ? 1 : this.options.totalPages; - $listItems = $listItems.add(this.buildItem('next', next)); + listItems.push(this.buildItem('next', next)); } if (this.options.last) { - $listItems = $listItems.add(this.buildItem('last', this.options.totalPages)); + listItems.push(this.buildItem('last', this.options.totalPages)); } - return $listItems; + return listItems; }, buildItem: function (type, page) { - var itemContainer = $('
  • '), - itemContent = $(''), - itemText = null; - - switch (type) { - case 'page': - itemText = page; - itemContainer.addClass(this.options.pageClass); - break; - case 'first': - itemText = this.options.first; - itemContainer.addClass(this.options.firstClass); - break; - case 'prev': - itemText = this.options.prev; - itemContainer.addClass(this.options.prevClass); - break; - case 'next': - itemText = this.options.next; - itemContainer.addClass(this.options.nextClass); - break; - case 'last': - itemText = this.options.last; - itemContainer.addClass(this.options.lastClass); - break; - default: - break; - } + var $itemContainer = $('
  • '), + $itemContent = $(''), + itemText = this.options[type] ? this.makeText(this.options[type], page) : page; - itemContainer.data('page', page); - itemContainer.data('page-type', type); - itemContainer.append(itemContent.attr('href', this.makeHref(page)).html(itemText)); - return itemContainer; + $itemContainer.addClass(this.options[type + 'Class']); + $itemContainer.data('page', page); + $itemContainer.data('page-type', type); + $itemContainer.append($itemContent.attr('href', this.makeHref(page)).addClass(this.options.anchorClass).html(itemText)); + + return $itemContainer; }, getPages: function (currentPage) { @@ -188,9 +171,12 @@ }, render: function (pages) { - var that = this; + var _this = this; this.$listContainer.children().remove(); - this.$listContainer.append(this.buildListItems(pages)); + var items = this.buildListItems(pages); + jQuery.each(items, function(key, item){ + _this.$listContainer.append(item); + }); this.$listContainer.children().each(function () { var $this = $(this), @@ -199,21 +185,21 @@ switch (pageType) { case 'page': if ($this.data('page') === pages.currentPage) { - $this.addClass(that.options.activeClass); + $this.addClass(_this.options.activeClass); } break; case 'first': - $this.toggleClass(that.options.disabledClass, pages.currentPage === 1); + $this.toggleClass(_this.options.disabledClass, pages.currentPage === 1); break; case 'last': - $this.toggleClass(that.options.disabledClass, pages.currentPage === that.options.totalPages); + $this.toggleClass(_this.options.disabledClass, pages.currentPage === _this.options.totalPages); break; case 'prev': - $this.toggleClass(that.options.disabledClass, !that.options.loop && pages.currentPage === 1); + $this.toggleClass(_this.options.disabledClass, !_this.options.loop && pages.currentPage === 1); break; case 'next': - $this.toggleClass(that.options.disabledClass, - !that.options.loop && pages.currentPage === that.options.totalPages); + $this.toggleClass(_this.options.disabledClass, + !_this.options.loop && pages.currentPage === _this.options.totalPages); break; default: break; @@ -223,26 +209,54 @@ }, setupEvents: function () { - var base = this; - this.$listContainer.find('li').each(function () { + var _this = this; + this.$listContainer.off('click').on('click', 'li', function (evt) { var $this = $(this); - $this.off(); - if ($this.hasClass(base.options.disabledClass) || $this.hasClass(base.options.activeClass)) { - $this.click(function (evt) { - evt.preventDefault(); - }); - return; + if ($this.hasClass(_this.options.disabledClass) || $this.hasClass(_this.options.activeClass)) { + return false; } - $this.click(function (evt) { - // Prevent click event if href is not set. - !base.options.href && evt.preventDefault(); - base.show(parseInt($this.data('page'), 10)); - }); + // Prevent click event if href is not set. + !_this.options.href && evt.preventDefault(); + _this.show(parseInt($this.data('page'))); }); }, - makeHref: function (c) { - return this.options.href ? this.options.href.replace(this.options.hrefVariable, c) : "#"; + makeHref: function (page) { + return this.options.href ? this.generateQueryString(page) : "#"; + }, + + makeText: function (text, page) { + return text.replace(this.options.pageVariable, page) + .replace(this.options.totalPagesVariable, this.options.totalPages) + }, + getPageFromQueryString: function (searchStr) { + var search = this.getSearchString(searchStr), + regex = new RegExp(this.options.pageVariable + '(=([^&#]*)|&|#|$)'), + page = regex.exec(search); + if (!page || !page[2]) { + return null; + } + page = decodeURIComponent(page[2]); + page = parseInt(page); + if (isNaN(page)) { + return null; + } + return page; + }, + generateQueryString: function (pageNumber, searchStr) { + var search = this.getSearchString(searchStr), + regex = new RegExp(this.options.pageVariable + '=*[^&#]*'); + if (!search) return ''; + return '?' + search.replace(regex, this.options.pageVariable + '=' + pageNumber); + + }, + getSearchString: function (searchStr) { + var search = searchStr || window.location.search; + if (search === '') { + return null; + } + if (search.indexOf('?') === 0) search = search.substr(1); + return search; } }; @@ -255,7 +269,7 @@ var $this = $(this); var data = $this.data('twbs-pagination'); - var options = typeof option === 'object' && option; + var options = typeof option === 'object' ? option : {}; if (!data) $this.data('twbs-pagination', (data = new TwbsPagination(this, options) )); if (typeof option === 'string') methodReturn = data[ option ].apply(data, args); @@ -264,12 +278,14 @@ }; $.fn.twbsPagination.defaults = { - totalPages: 0, + totalPages: 1, startPage: 1, visiblePages: 5, initiateStartPageClick: true, href: false, - hrefVariable: '{{number}}', + pageVariable: '{{page}}', + totalPagesVariable: '{{total_pages}}', + page: null, first: 'First', prev: 'Previous', next: 'Next', @@ -277,13 +293,14 @@ loop: false, onPageClick: null, paginationClass: 'pagination', - nextClass: 'next', - prevClass: 'prev', - lastClass: 'last', - firstClass: 'first', - pageClass: 'page', + nextClass: 'page-item next', + prevClass: 'page-item prev', + lastClass: 'page-item last', + firstClass: 'page-item first', + pageClass: 'page-item', activeClass: 'active', - disabledClass: 'disabled' + disabledClass: 'disabled', + anchorClass: 'page-link' }; $.fn.twbsPagination.Constructor = TwbsPagination; @@ -293,4 +310,6 @@ return this; }; -})(jQuery, window, document); + $.fn.twbsPagination.version = "1.4"; + +})(window.jQuery, window, document);