Skip to content

Commit

Permalink
Feature/show total pages #23 #54 created gh-pages demo and update for…
Browse files Browse the repository at this point in the history 
… older hrefVariable.
  • Loading branch information
@pavelthq
pavelthq committed Nov 6, 2015
1 parent 53df3d7 commit 44b4bfa
Show file tree
Hide file tree
Showing 3 changed files with 96 additions and 81 deletions.
35 changes: 27 additions & 8 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,8 +94,8 @@ <h3>
<li><code>visiblePages</code> maximum visible pages (default: <code>5</code>)</li>
<li><code>initiateStartPageClick</code> fire onclick event at start page on plugin initialization (default <code>true</code>)</li>
<li><code>href</code> template for pagination links (default <code>false</code>)</li>
<li><code>hrefVariable</code> variable name in href template for page number (default
<code>{{number}}</code>)
<li><code>pageVariable</code> variable name in template for page number (default
<code>{{page}}</code>)
</li>
<li><code>first</code> text label (default: <code class="highlight"><span
class="s">'First'</span></code>)
Expand Down Expand Up @@ -133,7 +133,7 @@ <h4>URL page link</h4>
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">35</span>,
visiblePages: <span class="il">8</span>,
href: <span class="s">'?page={{number}}'</span>
href: <span class="s">'?page={{page}}'</span>
});</code></pre>

<h4>Visible pages option</h4>
Expand Down Expand Up @@ -180,14 +180,14 @@ <h4>Using <code>href</code> and <code>hrefVariable</code> options / Example 1</h
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">15</span>,
visiblePages: <span class="il">5</span> ,
href: <span class="s">'?a=&page={{number}}&c=d'</span> ,
href: <span class="s">'?a=&page={{page}}&c=d'</span> ,
onPageClick: function (event, page) {
$(<span class="s">'#not-spa-demo-content'</span>).text('Page ' + page);
}
});
</code></pre>

<h4>Using <code>href</code> and <code>hrefVariable</code> options / Example 2</h4>
<h4>Using <code>href</code> and custom <code>pageVariable</code> options / Example 2</h4>

<div id="not-spa-demo-content-2" class="well">Page 1</div>
<div class="text-center">
Expand All @@ -198,8 +198,27 @@ <h4>Using <code>href</code> and <code>hrefVariable</code> options / Example 2</h
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">15</span>,
visiblePages: <span class="il">5</span>,
href: <span class="s">'#page={{pageNumber}}&c=d'</span>,
hrefVariable: <span class="s">'{{pageNumber}}'</span>,
href: <span class="s">'#page={{pg}}&c=d'</span>,
pageVariable: <span class="s">'{{pg}}'</span>,
onPageClick: function (event, page) {
...
}
});
</code></pre>

<h4>Using template variables {{page}} and {{total_pages}} in buttons</h4>

<div id="not-spa-demo-content-3" class="well">Page 1</div>
<div class="text-center">
<ul id="not-spa-demo-3" class="pagination-sm"></ul>
</div>

<p>Piece of code:</p>
<pre><code class="highlight"> $(selector).twbsPagination({
totalPages: <span class="il">15</span>,
visiblePages: <span class="il">5</span>,
href: <span class="s">'#page={{page}}&total={{total_pages}}'</span>,
page: <span class="s">'[{{page}}]'</span>,
onPageClick: function (event, page) {
...
}
Expand All @@ -210,7 +229,7 @@ <h3>
<a id="license" class="anchor" href="#license"><span
class="octicon octicon-link"></span></a>License</h3>

<p>Copyright 2014 Eugene Simakin</p>
<p>Copyright 2014-2015 Eugene Simakin</p>
<p>
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
Expand Down
125 changes: 55 additions & 70 deletions js/jquery.twbsPagination.js
View file
Original file line number Diff line number Diff line change
@@ -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-2015, Eugene Simakin
* Released under Apache 2.0 license
* http://apache.org/licenses/LICENSE-2.0.html
*/
;
(function ($, window, document, undefined) {

'use strict';
Expand Down Expand Up @@ -38,14 +37,14 @@
}

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);
var match, regexp = this.options.href.replace(/[-\/\\^$*+?.|[\]]/g, '\\$&');
regexp = regexp.replace(this.options.pageVariable, '(\\d+)');
if ((match = new RegExp(regexp, 'i').exec(window.location.href)) != null) {
this.options.startPage = parseInt(match[1], 10);
}
}

Expand Down Expand Up @@ -81,7 +80,8 @@
destroy: function () {
this.$element.empty();
this.$element.removeData('twbs-pagination');
this.$element.unbind('page');
this.$element.off('page');

return this;
},

Expand All @@ -94,71 +94,51 @@
this.setupEvents();

this.$element.trigger('page', page);

return this;
},

buildListItems: function (pages) {
var $listItems = $();
var listItems = [];

// Add "first" page button
if (this.options.first) {
$listItems = $listItems.add(this.buildItem('first', 1));
listItems.push(this.buildItem('first', 1));
}

// Add "previous" page button
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));
}

// Add "pages"
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]));
}

// Add "next" page button
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));
}

// Add "last" page button
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 = $('<li></li>'),
itemContent = $('<a></a>'),
var $itemContainer = $('<li></li>'),
$itemContent = $('<a></a>'),
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;
}
itemText = this.options[type] ? this.makeText(this.options[type], page) : page;
$itemContainer.addClass(this.options[type + 'Class']);
$itemContainer.data('page', page);
$itemContainer.data('page-type', type);
$itemContainer.append($itemContent.attr('href', this.makeHref(page)).html(itemText));

itemContainer.data('page', page);
itemContainer.data('page-type', type);
itemContainer.append(itemContent.attr('href', this.makeHref(page)).html(itemText));
return itemContainer;
return $itemContainer;
},

getPages: function (currentPage) {
Expand Down Expand Up @@ -188,7 +168,7 @@
},

render: function (pages) {
var that = this;
var _this = this;
this.$listContainer.children().remove();
this.$listContainer.append(this.buildListItems(pages));

Expand All @@ -199,21 +179,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;
Expand All @@ -223,26 +203,29 @@
},

setupEvents: function () {
var base = this;
var _this = this;
this.$listContainer.find('li').each(function () {
var $this = $(this);
$this.off();
if ($this.hasClass(base.options.disabledClass) || $this.hasClass(base.options.activeClass)) {
$this.click(function (evt) {
evt.preventDefault();
});
if ($this.hasClass(_this.options.disabledClass) || $this.hasClass(_this.options.activeClass)) {
$this.on('click', false);
return;
}
$this.click(function (evt) {
// Prevent click event if href is not set.
!base.options.href && evt.preventDefault();
base.show(parseInt($this.data('page'), 10));
!_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.makeText(this.options.href, page) : "#";
},

makeText: function (text, page) {
return text.replace(this.options.pageVariable, page)
.replace(this.options.totalPagesVariable, this.options.totalPages)
}

};
Expand All @@ -255,7 +238,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);
Expand All @@ -264,12 +247,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',
Expand All @@ -293,4 +278,4 @@
return this;
};

})(jQuery, window, document);
})(window.jQuery, window, document);
17 changes: 14 additions & 3 deletions js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ $(document).ready(function () {
$('#not-spa-demo').twbsPagination({
totalPages: 15,
visiblePages: 5,
href: "?a=&page={{number}}&c=d",
href: "?a=&page={{page}}&c=d",
onPageClick: function (event, page) {
$('#not-spa-demo-content').text('Page ' + page);
}
Expand All @@ -31,11 +31,22 @@ $(document).ready(function () {
$('#not-spa-demo-2').twbsPagination({
totalPages: 15,
visiblePages: 5,
href: "#page={{pageNumber}}&c=d",
hrefVariable: '{{pageNumber}}',
href: "#page={{pg}}&c=d",
pageVariable: '{{pg}}',
onPageClick: function (event, page) {
$('#not-spa-demo-content-2').text('Page ' + page);
}
});

$('#not-spa-demo-3').twbsPagination({
totalPages: 15,
visiblePages: 5,
last: 'last[{{total_pages}}]',
page: '[{{page}}]',
href: '#page={{page}}&total={{total_pages}}',
onPageClick: function (event, page) {
$('#not-spa-demo-content-3').text('Page ' + page);
}
});
});

0 comments on commit 44b4bfa

Please sign in to comment.