1.pagination.js (这里会用到utils.js中的一些方法 myAjax,nano,uuid)
var template = '<ul class="pagination hide"><li><a href="javascript:void(0)">«</a></li><li><a href="javascript:void(0)">»</a></li></ul>';//页码显示
var cache = {};
var request = function ($dom, page, fun) {
var settings = cache[$dom.data('uuid')];//获取数据
settings.showConfig && settings.showConfig.$notData && settings.showConfig.$notData.removeClass('active');//有数据则将id为notData的标签隐藏
if (settings.showConfig.$allBtn) {//如果设置了该属性
settings.showConfig.$allBtn.html('<i class="fa fa-square-o"></i> 全选');//添加全选按钮
settings.showConfig.$allBtn.data('checked', true);//附加数据
}
var data = getArgs($dom, page);
utils.myAjax[settings.method](settings.url, data, function (response) {
handle(response, $dom, page);
fun && fun(response);
}, function (XMLHttpRequest, textStatus, errorThrown) {
if (XMLHttpRequest.status == 200) {
if (page > 0) {
request($dom, page - 1, fun);
return;
}
$dom.find('.pagination').addClass('hide');
settings.showConfig && $(settings.showConfig.target).empty();
settings.showConfig && settings.showConfig.callback && settings.showConfig.callback();
settings.callback && settings.callback();
settings.showConfig && settings.showConfig.$notData && settings.showConfig.$notData.addClass('active');
} else {
settings.error(XMLHttpRequest, textStatus, errorThrown);
}
});
};
var getArgs = function ($dom, page) {
var settings = cache[$dom.data('uuid')];
var condition = settings._condition;
var result = condition.length ? condition + '&' : '';
result += 'size=' + settings.size + '&page=' + page;
return result;
};
var handle = function (response, $dom, page) {
var settings = cache[$dom.data('uuid')];
settings.page = page;
response.totalPages > 1 ? $dom.find('.pagination').removeClass('hide') : $dom.find('.pagination').addClass('hide');
var start = response.number - Number(settings.half), end = response.number + Number(settings.half) + (settings.even ? 0 : 1);
if (response.totalPages > settings.numericButtons) {
if (start <= 0) {
start = 1;
end = settings.numericButtons;
}
if (end > response.totalPages) {
end = response.totalPages;
start = end - (settings.numericButtons - 1);
}
} else {
start = 1;
end = response.totalPages;
}
var li = $('li', $dom);
li.length > 2 && li.slice(1, li.length - 1).remove();
li = li.first();
$('li:first', $dom).toggleClass('disabled', response.first);
$('li:last', $dom).toggleClass('disabled', response.last);
for (var i = end; i >= start; i--) {
var node = $('<li><a href="javascript:void(0)">' + i + '</a></li>');
li.after(node);
response.number == i - 1 && node.addClass('active');
$('a', node).on('click', numberEvent);
}
settings.showConfig && show(settings.showConfig, response);
settings.callback(response);
};
var show = function (config, response) {
var target = typeof config.target==="string"?$(config.target):config.target;
target.empty();
var template=typeof config.template==="string"?$(config.template):config.template;
var html = template ? template.text() : config.html;
$.each(response.content, function (i, item) {
item._number = i + 1;
item._index = item._number + response.size * response.number;
config.before && config.before(item, response);
var node = $(utils.template.nano(html, item));
target.append(node);
$('[data-click]', node).on('click', function (e) {
return config.method[$(this).data('click')].apply(this, [item, e]);
});
config.after && config.after(node, item, response);
});
config.callback && config.callback(response, target);
config.$allBtn && target.find(':checkbox[name=checkbox]').click(function () {
if (target.find(':checkbox[name=checkbox]').length == target.find(':checkbox[name=checkbox]:checked').length) {
config.$allBtn.html('<i class="fa fa-check-square-o"></i> 取消');
config.$allBtn.data('checked', false);
} else {
config.$allBtn.html('<i class="fa fa-square-o"></i> 全选');
config.$allBtn.data('checked', true);
}
});
};
var prevEvent = function () {
var $dom = $(this).closest('ul').parent();
if (!$('li:first', $dom).hasClass('disabled')) {
var settings = cache[$dom.data('uuid')];
request($dom, Number(settings.page) - 1);
}
};
var nextEvent = function () {
var $dom = $(this).closest('ul').parent();
if (!$('li:last', $dom).hasClass('disabled')) {
var settings = cache[$dom.data('uuid')];
request($dom, Number(settings.page) + 1);
}
};
var numberEvent = function () {
var $dom = $(this).closest('ul').parent();
request($dom, Number($(this).text()) - 1);
};
var methods = {
initializer: function (options) {
return this.each(function () {
var $this = $(this);
$this.data('uuid') || $this.attr('data-uuid', utils.uuid.uuid());
var settings = cache[$this.data('uuid')];
if (typeof settings === "undefined") {
settings = $.extend({}, $.fn.pagination.defaults, options || {});
settings.half = Math.ceil(settings.numericButtons / 2) - 1;
settings.even = (settings.numericButtons % 2) == 1;
cache[$this.data('uuid')] = settings;
$this.html(template);
$('li:first a', $this).on('click', prevEvent);
$('li:last a', $this).on('click', nextEvent);
if (settings.showConfig) {
if (settings.showConfig.allBtn) {
settings.showConfig.$allBtn = $(settings.showConfig.allBtn).click(function () {
var checked = $(this).data('checked');
checked == null && (checked = true);
var length = $(settings.showConfig.target).find(':checkbox[name=checkbox]').each(function () {
this.checked = checked;
}).length;
if (length) {
checked ? $(this).html('<i class="fa fa-check-square-o"></i> 取消') : $(this).html('<i class="fa fa-square-o"></i> 全选');
$(this).data('checked', !checked);
}
});
}
if (settings.showConfig.notData) {
settings.showConfig.$notData = typeof settings.showConfig.notData==="string"?$(settings.showConfig.notData):settings.showConfig.notData;
}
}
}
//else {
// request($this, 0);
//}
});
},
destroy: function () {
return this.each(function () {
var $this = $(this);
cache[$this.data('uuid')] = null;
});
},
query: function () {
var fun = arguments[1];
return this.each(function () {
var $this = $(this);
var settings = cache[$this.data('uuid')];
if (settings == null) {
$.error('pagination is not initializer...');
} else {
settings._condition = settings.form ? $(settings.form).serialize().replace(/\+/g," ") : '';
request($this, 0, fun);
}
});
},
refresh: function () {
return this.each(function () {
var $this = $(this);
var settings = cache[$this.data('uuid')];
if (settings == null) {
$.error('pagination is not initializer...');
} else {
request($this, settings.page);
}
});
},
set: function () {
var options = arguments[1];
return this.each(function () {
var $this = $(this);
var settings = cache[$this.data('uuid')];
$.extend(true, settings, options);
});
}
};
$.fn.extend({
pagination: function () {
var method = arguments[0];
if (methods[method]) {
method = methods[method];
} else if (typeof method === "object" || !method) {
method = methods.initializer;
} else {
$.error("Method" + method + "does not exist on jQuery.pagination");
return this;
}
return method.apply(this, arguments);
}
});
$.fn.pagination.defaults = {
size: 15,
page: 0,
numericButtons: 10,
showConfig: null,
form: null,
method: 'get',
callback: function (response) {
},
error: function (response) {
console.error(response);
}
};
页面调用
$('#pagination').pagination({
url: '/about/list',
size:5,
showConfig: {
target: 'table #tbody', //查询数据显示区域
template: '#template',//js静态模板 id
allBtn: '#all', //全选框 id
notData: '#notData', //无数据显示时提示区域
before: function (item) { //发送请求之前的函数
//。。。
},
callback: function (response, $dom) {//请求成功后的回调函数,response为请求到的数据,dom为数据显示区域
//。。
},
method: { //静态模板中定义的一些data-click方法
del: function (item) {
utils.modal.confirm('删除提示', '您确定要删除该条记录吗?', function (bool) {
bool && utils.ajax.get('/about/delete', {id: item.id}, function () {
$('#pagination').pagination('refresh');
});
});
},
enable: function (item) {
var msg = item.enable ? '您确定要禁用该条记录吗' : '您确定要启用该条记录吗';
utils.modal.confirm('提示信息', msg, function (bool) {
bool && utils.ajax.get('/about/enable', {id: item.id}, function () {
$('#pagination').pagination('refresh');
});
});
},
edit: function (item) {
utils.form.set('form[name=editForm]', item);
$('#editModal').modal('toggle');
},
sort: function (item) {
$('[data-toggle=tooltip]').tooltip('hide');
var arg = $(this).data('arg');
var tr = $(this).closest('tr');
var target = arg == 'up' ? tr.prev() : tr.next();
if (target.length) {
arg == 'up' ? target.before(tr) : target.after(tr);
$('a.btn[data-click=saveSort]').removeClass('hide');
var id = tr.find('input[name=id]').val();
var orderBy = tr.find('input[name=orderBy]').val();
var target_id = target.find('input[name=id]').val();
var target_orderBy = target.find('input[name=orderBy]').val();
tr.find('input[name=orderBy]').val(target_orderBy);
target.find('input[name=orderBy]').val(orderBy);
sort[id] = target_orderBy;
sort[target_id] = orderBy;
$('table tbody tr td:first-child').not(':hidden').each(function (i) {
$(this).text(i + 1 + cache.response.size * cache.response.number);
});
}
}
}
}
}).pagination('query');
后台分页可以使用spring data提供的一些接口和类 (Pageable→PageRequest ; Page →PageImpl(content,pageable,total))