Skip to content

Instantly share code, notes, and snippets.

@groovenectar
Last active Aug 29, 2015
Embed
What would you like to do?
jquery.pagify.js
<!doctype html>
<html>
<title>jquery.pagify.js</title>
<link rel="stylesheet" href="style.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.pagify.js"></script>
<style type="text/css">
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
</style>
<script type="text/javascript">
jQuery(function($) {
$('.example').pagify({pager_location: 'before'});
//$('.example').pagify('filter', '.test');
$('.example2').pagify({pager_location: 'both'});
});
</script>
</html>
<body>
<div class="nav"></div>
<ul class="example">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
<li>List item 8</li>
<li>List item 9</li>
<li>List item 10</li>
<li class="test">List item 11</li>
<li>List item 12</li>
<li>List item 13</li>
<li class="test">List item 14</li>
<li>List item 15</li>
<li class="test">List item 16</li>
<li>List item 17</li>
<li>List item 18</li>
<li>List item 19</li>
<li>List item 20</li>
<li class="test">List item 21</li>
<li>List item 22</li>
<li>List item 23</li>
<li class="test">List item 24</li>
<li>List item 25</li>
<li>List item 26</li>
<li class="test">List item 27</li>
<li>List item 28</li>
<li>List item 29</li>
<li>List item 30</li>
<li>List item 31</li>
<li class="test">List item 32</li>
<li>List item 33</li>
<li>List item 34</li>
<li class="test">List item 35</li>
<li>List item 36</li>
<li>List item 37</li>
<li>List item 38</li>
<li class="test">List item 39</li>
<li>List item 40</li>
<li>List item 41</li>
<li>List item 42</li>
<li>List item 43</li>
<li>List item 44</li>
<li>List item 45</li>
<li class="test">List item 46</li>
<li>List item 47</li>
<li>List item 48</li>
<li>List item 49</li>
<li>List item 50</li>
<li>List item 51</li>
<li class="test">List item 52</li>
<li>List item 53</li>
<li>List item 54</li>
<li class="test">List item 55</li>
<li>List item 56</li>
<li>List item 57</li>
<li>List item 58</li>
<li>List item 59</li>
</ul>
<div class="nav"></div>
<ul class="example2">
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
<li>List item 4</li>
<li>List item 5</li>
<li>List item 6</li>
<li>List item 7</li>
<li>List item 8</li>
<li>List item 9</li>
<li>List item 10</li>
<li class="test">List item 11</li>
<li>List item 12</li>
<li>List item 13</li>
<li class="test">List item 14</li>
<li>List item 15</li>
<li class="test">List item 16</li>
<li>List item 17</li>
<li>List item 18</li>
<li>List item 19</li>
<li>List item 20</li>
<li class="test">List item 21</li>
<li>List item 22</li>
<li>List item 23</li>
<li class="test">List item 24</li>
<li>List item 25</li>
<li>List item 26</li>
<li class="test">List item 27</li>
<li>List item 28</li>
<li>List item 29</li>
<li>List item 30</li>
<li>List item 31</li>
<li class="test">List item 32</li>
<li>List item 33</li>
<li>List item 34</li>
<li class="test">List item 35</li>
<li>List item 36</li>
<li>List item 37</li>
<li>List item 38</li>
<li class="test">List item 39</li>
<li>List item 40</li>
<li>List item 41</li>
<li>List item 42</li>
<li>List item 43</li>
<li>List item 44</li>
<li>List item 45</li>
<li class="test">List item 46</li>
<li>List item 47</li>
<li>List item 48</li>
<li>List item 49</li>
<li>List item 50</li>
<li>List item 51</li>
<li class="test">List item 52</li>
<li>List item 53</li>
<li>List item 54</li>
<li class="test">List item 55</li>
<li>List item 56</li>
<li>List item 57</li>
<li>List item 58</li>
<li>List item 59</li>
</ul>
</body>
</html>
// Based on https://github.com/jlafitte/jquery-quick-pagination
;(function ($, window, document, undefined) {
"use strict";
var defaults = {
per_page: 10, // How many items you want to show per page.
start_page: 1, // Starting page... normally you would probably leave this alone.
item_filter: ':visible', // .filter() to run on items to determine what is included
item_class: 'paginated-item', // Every item gets this class, and also this class with "-page-[NUM]" appended
nav_location: 'before', // Possible values are "before,after,both,[jQuery Object]"
nav_class: 'pager-nav', // Class name of the pagination navigation list
nav_active_class: 'pager-nav-active', // Class name of the active page li in the navigation list
transition_speed: null // Changes the speed items are faded in and out. If left null then no transitions will happen.
};
function Plugin(element, options) {
this.element = $(element);
this.options = $.extend({}, defaults, options);
this.init();
}
$.extend(Plugin.prototype, {
init: function () {
this.current_page = this.options.start_page;
this.page_count = 0;
this._loaditems();
this._render();
return this;
},
_render: function(start_page) {
start_page = start_page ? start_page : this.current_page;
// Make sure even unselected items are hidden
this.element.children().hide();
this._process_pages();
this._render_nav();
this.page(start_page);
return this;
},
_loaditems: function(filter) {
filter = filter ? filter : this.options.item_filter;
this.items = this.element.children().filter(filter);
return this;
},
filter: function(filter) {
this._loaditems(filter);
var start_page = 1;
this.reload(start_page);
return this;
},
page: function(page) {
this.current_page = page;
this.items.hide();
this.nav.find('li').removeClass(this.options.nav_active_class);
this.nav.find('.' + this._nav_item_class_name(page) ).addClass(this.options.nav_active_class);
var page_items = this.items.filter('.' + this._page_class_name(page));
if (this.options.transition_speed) {
page_items.fadeIn(this.options.transition_speed);
} else {
page_items.show();
}
return this;
},
_process_pages: function() {
var page_count = 1;
var $plugin = this;
$plugin.items.each(function (i) {
if (i >= (page_count * $plugin.options.per_page)) {
page_count++;
}
$(this).addClass($plugin.options.item_class + ' ' + $plugin._page_class_name(page_count));
});
this.page_count = page_count;
return this;
},
_build_nav: function() {
this.nav = $();
var nav_elm = $('<ol>').addClass(this.options.nav_class);
for (var i = 1; i <= this.page_count; i++) {
var nav_item = $('<li>').addClass(this._nav_item_class_name(i));
if (i == this.current_page) {
nav_item.addClass(this.options.nav_active_class);
}
var nav_link = $('<a>').data('page', i).attr('href', '#').text(i);
var $plugin = this;
nav_link.on('click', function(e) {
e.preventDefault();
$plugin.page($(this).data('page'));
});
nav_item.append(nav_link);
nav_elm.append(nav_item);
}
return nav_elm;
},
_insert_nav: function(nav, nav_location) {
if (!nav) { return; }
nav_location = nav_location ? nav_location : this.options.nav_location;
if (nav_location instanceof jQuery) {
this.nav = nav_location.append(nav).find('.' + this.options.nav_class);
} else {
switch (nav_location) {
case 'before':
nav = nav.clone(true).addClass(this.options.nav_class + '-before');
this.element.before(nav);
break;
case 'after':
nav = nav.clone(true).addClass(this.options.nav_class + '-after');
this.element.after(nav);
break;
case 'both':
this._insert_nav(nav, 'before');
this._insert_nav(nav, 'after');
return this;
break;
default:
return this;
break;
}
this.nav = this.nav.add(nav);
}
return this;
},
_render_nav: function() {
if (this.page_count < 2) {
return;
}
this._insert_nav(this._build_nav());
return this;
},
reload: function(start_page) {
start_page = start_page ? start_page : this.current_page;
this.remove();
this._render(start_page);
return this;
},
_remove_pages: function() {
var regex = new RegExp(this.options.item_class + '(-page-[0-9]+)?', 'ig');
this.items.removeClass(function (index, css) {
return (css.match(regex) || []).join(' ');
});
this.items.show();
this.page_count = 0;
return this;
},
_remove_nav: function() {
this.nav.remove();
return this;
},
remove: function() {
this._remove_nav();
this._remove_pages();
return this;
},
_page_class_name: function (page) {
return this.options.item_class + '-page-' + page;
},
_nav_item_class_name: function (page) {
return this.options.nav_class + '-page-' + page;
},
// Also removes plugin reference from this.element
// Additional functionality below
destroy: function() {
this.remove();
}
});
var plugin_name = 'pagify';
$.fn[plugin_name] = function(options) {
var args = arguments;
if (options === undefined || typeof options === 'object') {
return this.each(function () {
if (!$.data(this, 'plugin_' + plugin_name)) {
$.data(this, 'plugin_' + plugin_name, new Plugin(this, options));
}
});
} else if (typeof options === 'string' && options[0] !== '_' && options !== 'init') {
var returns;
this.each(function() {
var instance = $.data(this, 'plugin_' + plugin_name);
if (instance instanceof Plugin && typeof instance[options] === 'function') {
returns = instance[options].apply( instance, Array.prototype.slice.call(args, 1));
}
if (options === 'destroy') {
$.data(this, 'plugin_' + plugin_name, null);
}
});
return returns !== undefined ? returns : this;
}
};
}(jQuery, window, document));
.pager-nav {
padding: 0;
}
.pager-nav li {
display: inline-block;
background: #f7f7f7;
}
.pager-nav li a,
.pager-nav::before {
display: inline-block;
color: #333;
text-decoration: none;
padding: 5px 10px;
}
.pager-nav::before {
content: "Page:";
}
.pager-nav li.pager-nav-active a {
color: #fff;
background: #777;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment