196 lines
6.8 KiB
Plaintext
196 lines
6.8 KiB
Plaintext
|
/*
|
||
|
|
* Created with Sublime Text 3.
|
||
|
|
* license: http://www.lovewebgames.com/jsmodule/index.html
|
||
|
|
* User: 田想兵
|
||
|
|
* Date: 2015-06-11
|
||
|
|
* Time: 16:27:55
|
||
|
|
* Contact: 55342775@qq.com
|
||
|
|
*/
|
||
|
|
(function(root, factory) {
|
||
|
|
//amd
|
||
|
|
if (typeof define === 'function' && define.amd) {
|
||
|
|
define(['$', 'query'], factory);
|
||
|
|
} else if (typeof exports === 'object') { //umd
|
||
|
|
module.exports = factory();
|
||
|
|
} else {
|
||
|
|
root.Paging = factory(window.Zepto || window.jQuery || $, Query);
|
||
|
|
}
|
||
|
|
})(this, function($, Query) {
|
||
|
|
$.fn.Paging = function(settings) {
|
||
|
|
var arr = [];
|
||
|
|
$(this).each(function() {
|
||
|
|
var options = $.extend({
|
||
|
|
target: $(this)
|
||
|
|
}, settings);
|
||
|
|
var lz = new Paging();
|
||
|
|
lz.init(options);
|
||
|
|
arr.push(lz);
|
||
|
|
});
|
||
|
|
return arr;
|
||
|
|
};
|
||
|
|
|
||
|
|
function Paging() {
|
||
|
|
var rnd = Math.random().toString().replace('.', '');
|
||
|
|
this.id = 'Paging_' + rnd;
|
||
|
|
}
|
||
|
|
Paging.prototype = {
|
||
|
|
init: function(settings) {
|
||
|
|
this.settings = $.extend({
|
||
|
|
callback: null,
|
||
|
|
current: $("#pageNum").val(),
|
||
|
|
prevTpl: "이전",
|
||
|
|
nextTpl: "다음",
|
||
|
|
firstTpl: "처음",
|
||
|
|
lastTpl: "마지막",
|
||
|
|
ellipseTpl: "...",
|
||
|
|
toolbar: false,
|
||
|
|
hash:true
|
||
|
|
}, settings);
|
||
|
|
this.target = $(this.settings.target);
|
||
|
|
this.container = $('<div id="' + this.id + '" class="ui-paging-container"/>');
|
||
|
|
this.target.append(this.container);
|
||
|
|
this.render(this.settings);
|
||
|
|
this.format();
|
||
|
|
this.bindEvent();
|
||
|
|
},
|
||
|
|
render: function(ops) {
|
||
|
|
this.count = ops.count || this.settings.count;
|
||
|
|
this.pagesize = ops.pagesize || this.settings.pagesize;
|
||
|
|
this.current = ops.current || this.settings.current;
|
||
|
|
this.pagecount = Math.ceil(this.count / this.pagesize);
|
||
|
|
this.format();
|
||
|
|
},
|
||
|
|
bindEvent: function() {
|
||
|
|
var _this = this;
|
||
|
|
this.container.on('click', 'li.js-page-action,li.ui-pager', function(e) {
|
||
|
|
if ($(this).hasClass('ui-pager-disabled') || $(this).hasClass('focus')) {
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
if ($(this).hasClass('js-page-action')) {
|
||
|
|
if ($(this).hasClass('js-page-first')) {
|
||
|
|
_this.current = 1;
|
||
|
|
}
|
||
|
|
if ($(this).hasClass('js-page-prev')) {
|
||
|
|
_this.current = Math.max(1, _this.current - 1);
|
||
|
|
}
|
||
|
|
if ($(this).hasClass('js-page-next')) {
|
||
|
|
_this.current = Math.min(parseInt(_this.pagecount), parseInt(_this.current) + 1);
|
||
|
|
}
|
||
|
|
if ($(this).hasClass('js-page-last')) {
|
||
|
|
_this.current = _this.pagecount;
|
||
|
|
}
|
||
|
|
} else if ($(this).data('page')) {
|
||
|
|
_this.current = parseInt($(this).data('page'));
|
||
|
|
}
|
||
|
|
_this.go();
|
||
|
|
});
|
||
|
|
/*
|
||
|
|
$(window).on('hashchange',function(){
|
||
|
|
var page= parseInt(Query.getHash('page'));
|
||
|
|
if(_this.current !=page){
|
||
|
|
_this.go(page||1);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
*/
|
||
|
|
},
|
||
|
|
go: function(p) {
|
||
|
|
var _this = this;
|
||
|
|
this.current = p || this.current;
|
||
|
|
this.current = Math.max(1, _this.current);
|
||
|
|
this.current = Math.min(this.current, _this.pagecount);
|
||
|
|
this.format();
|
||
|
|
if(this.settings.hash){
|
||
|
|
Query.setHash({
|
||
|
|
page:this.current
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
locationHref(this.current);
|
||
|
|
this.settings.callback && this.settings.callback(this.current, this.pagesize, this.pagecount);
|
||
|
|
|
||
|
|
},
|
||
|
|
changePagesize: function(ps) {
|
||
|
|
this.render({
|
||
|
|
pagesize: ps
|
||
|
|
});
|
||
|
|
},
|
||
|
|
format: function() {
|
||
|
|
var html = '<ul>'
|
||
|
|
html += '<li class="js-page-first js-page-action ui-pager" >' + this.settings.firstTpl + '</li>';
|
||
|
|
html += '<li class="js-page-prev js-page-action ui-pager">' + this.settings.prevTpl + '</li>';
|
||
|
|
if (this.pagecount > 11) {
|
||
|
|
html += '<li data-page="1" class="ui-pager">1</li>';
|
||
|
|
if (this.current <= 6) {
|
||
|
|
html += '<li data-page="2" class="ui-pager">2</li>';
|
||
|
|
html += '<li data-page="3" class="ui-pager">3</li>';
|
||
|
|
html += '<li data-page="4" class="ui-pager">4</li>';
|
||
|
|
html += '<li data-page="5" class="ui-pager">5</li>';
|
||
|
|
html += '<li data-page="6" class="ui-pager">6</li>';
|
||
|
|
html += '<li data-page="7" class="ui-pager">7</li>';
|
||
|
|
html += '<li class="ui-paging-ellipse">' + this.settings.ellipseTpl + '</li>';
|
||
|
|
} else
|
||
|
|
if (this.current > 6 && this.current <= this.pagecount - 6) {
|
||
|
|
html += '<li>' + this.settings.ellipseTpl + '</li>';
|
||
|
|
html += '<li data-page="' + (this.current - 4) + '" class="ui-pager">' + (this.current - 4) + '</li>';
|
||
|
|
html += '<li data-page="' + (this.current - 3) + '" class="ui-pager">' + (this.current - 3) + '</li>';
|
||
|
|
html += '<li data-page="' + (this.current - 2) + '" class="ui-pager">' + (this.current - 2) + '</li>';
|
||
|
|
html += '<li data-page="' + (this.current - 1) + '" class="ui-pager">' + (this.current - 1) + '</li>';
|
||
|
|
html += '<li data-page="' + this.current + '" class="ui-pager">' + this.current + '</li>';
|
||
|
|
html += '<li data-page="' + (parseInt(this.current) + 1) + '" class="ui-pager">' + (parseInt(this.current) + 1) + '</li>';
|
||
|
|
html += '<li data-page="' + (parseInt(this.current) + 2) + '" class="ui-pager">' + (parseInt(this.current) + 2) + '</li>';
|
||
|
|
html += '<li data-page="' + (parseInt(this.current) + 3) + '" class="ui-pager">' + (parseInt(this.current) + 3) + '</li>';
|
||
|
|
html += '<li data-page="' + (parseInt(this.current) + 4) + '" class="ui-pager">' + (parseInt(this.current) + 4) + '</li>';
|
||
|
|
html += '<li class="ui-paging-ellipse" class="ui-pager">' + this.settings.ellipseTpl + '</li>';
|
||
|
|
} else {
|
||
|
|
html += '<li class="ui-paging-ellipse" >' + this.settings.ellipseTpl + '</li>';
|
||
|
|
for (var i = this.pagecount - 6; i < this.pagecount; i++) {
|
||
|
|
html += '<li data-page="' + i + '" class="ui-pager">' + i + '</li>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
for (var i = 1; i <= this.pagecount; i++) {
|
||
|
|
html += '<li data-page="' + i + '" class="ui-pager">' + i + '</li>'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
html += '<li class="js-page-next js-page-action ui-pager">' + this.settings.nextTpl + '</li>';
|
||
|
|
html += '</ul>';
|
||
|
|
this.container.html(html);
|
||
|
|
if (this.current == 1) {
|
||
|
|
$('.js-page-prev', this.container).addClass('ui-pager-disabled');
|
||
|
|
$('.js-page-first', this.container).addClass('ui-pager-disabled');
|
||
|
|
}
|
||
|
|
if (this.current == this.pagecount) {
|
||
|
|
$('.js-page-next', this.container).addClass('ui-pager-disabled');
|
||
|
|
}
|
||
|
|
this.container.find('li[data-page="' + this.current + '"]').addClass('focus').siblings().removeClass('focus');
|
||
|
|
if (this.settings.toolbar) {
|
||
|
|
this.bindToolbar();
|
||
|
|
}
|
||
|
|
},
|
||
|
|
bindToolbar: function() {
|
||
|
|
var _this = this;
|
||
|
|
var html = $('<li class="ui-paging-toolbar"><input type="text" class="ui-paging-count"/><a href="javascript:void(0)">선택</a></li>');
|
||
|
|
var sel = $('.ui-select-pagesize', html);
|
||
|
|
|
||
|
|
sel.val(this.pagesize);
|
||
|
|
$('input', html).val(this.current);
|
||
|
|
$('input', html).click(function() {
|
||
|
|
$(this).select();
|
||
|
|
}).keydown(function(e) {
|
||
|
|
if (e.keyCode == 13) {
|
||
|
|
var current = parseInt($(this).val()) || 1;
|
||
|
|
_this.go(current);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
$('a', html).click(function() {
|
||
|
|
var current = parseInt($(this).prev().val()) || 1;
|
||
|
|
_this.go(current);
|
||
|
|
});
|
||
|
|
sel.change(function() {
|
||
|
|
_this.changePagesize($(this).val());
|
||
|
|
});
|
||
|
|
this.container.children('ul').append(html);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return Paging;
|
||
|
|
});
|