1)引入对应JS源码 jquery.simplePagination.js
/**
* simplePagination.js v1.6
* A simple jQuery pagination plugin.
* http://flaviusmatis.github.com/simplePagination.js/
*
* Copyright 2012, Flavius Matis
* Released under the MIT license.
* http://flaviusmatis.github.com/license.html
*/
(function($){
var methods = {
init: function(options) {
var o = $.extend({
items: 1,
itemsOnPage: 1,
pages: 0,
displayedPages: 5,
edges: 2,
currentPage: 0,
hrefTextPrefix: '#page-',
hrefTextSuffix: '',
prevText: 'Prev',
nextText: 'Next',
ellipseText: '…',
cssStyle: 'light-theme',
listStyle: '',
labelMap: [],
selectOnClick: true,
nextAtFront: false,
invertPageOrder: false,
useStartEdge : true,
useEndEdge : true,
onPageClick: function(pageNumber, event) {
// Callback triggered when a page is clicked
// Page number is given as an optional parameter
},
onInit: function() {
// Callback triggered immediately after initialization
}
}, options || {});
var self = this;
o.pages = o.pages ? o.pages : Math.ceil(o.items / o.itemsOnPage) ? Math.ceil(o.items / o.itemsOnPage) : 1;
if (o.currentPage)
o.currentPage = o.currentPage - 1;
else
o.currentPage = !o.invertPageOrder ? 0 : o.pages - 1;
o.halfDisplayed = o.displayedPages / 2;
this.each(function() {
self.addClass(o.cssStyle + ' simple-pagination').data('pagination', o);
methods._draw.call(self);
});
o.onInit();
return this;
},
selectPage: function(page) {
methods._selectPage.call(this, page - 1);
return this;
},
prevPage: function() {
var o = this.data('pagination');
if (!o.invertPageOrder) {
if (o.currentPage > 0) {
methods._selectPage.call(this, o.currentPage - 1);
}
} else {
if (o.currentPage < o.pages - 1) {
methods._selectPage.call(this, o.currentPage + 1);
}
}
return this;
},
nextPage: function() {
var o = this.data('pagination');
if (!o.invertPageOrder) {
if (o.currentPage < o.pages - 1) {
methods._selectPage.call(this, o.currentPage + 1);
}
} else {
if (o.currentPage > 0) {
methods._selectPage.call(this, o.currentPage - 1);
}
}
return this;
},
getPagesCount: function() {
return this.data('pagination').pages;
},
setPagesCount: function(count) {
this.data('pagination').pages = count;
},
getCurrentPage: function () {
return this.data('pagination').currentPage + 1;
},
destroy: function(){
this.empty();
return this;
},
drawPage: function (page) {
var o = this.data('pagination');
o.currentPage = page - 1;
this.data('pagination', o);
methods._draw.call(this);
return this;
},
redraw: function(){
methods._draw.call(this);
return this;
},
disable: function(){
var o = this.data('pagination');
o.disabled = true;
this.data('pagination', o);
methods._draw.call(this);
return this;
},
enable: function(){
var o = this.data('pagination');
o.disabled = false;
this.data('pagination', o);
methods._draw.call(this);
return this;
},
updateItems: function (newItems) {
var o = this.data('pagination');
o.items = newItems;
o.pages = methods._getPages(o);
this.data('pagination', o);
methods._draw.call(this);
},
updateItemsOnPage: function (itemsOnPage) {
var o = this.data('pagination');
o.itemsOnPage = itemsOnPage;
o.pages = methods._getPages(o);
this.data('pagination', o);
methods._selectPage.call(this, 0);
return this;
},
getItemsOnPage: function() {
return this.data('pagination').itemsOnPage;
},
_draw: function() {
var o = this.data('pagination'),
interval = methods._getInterval(o),
i,
tagName;
methods.destroy.call(this);
tagName = (typeof this.prop === 'function') ? this.prop('tagName') : this.attr('tagName');
var $panel = tagName === 'UL' ? this : $('<ul' + (o.listStyle ? ' class="' + o.listStyle + '"' : '') + '></ul>').appendTo(this);
// Generate Prev link
if (o.prevText) {
methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage - 1 : o.currentPage + 1, {text: o.prevText, classes: 'prev'});
}
// Generate Next link (if option set for at front)
if (o.nextText && o.nextAtFront) {
methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
}
// Generate start edges
if (!o.invertPageOrder) {
if (interval.start > 0 && o.edges > 0) {
if(o.useStartEdge) {
var end = Math.min(o.edges, interval.start);
for (i = 0; i < end; i++) {
methods._appendItem.call(this, i);
}
}
if (o.edges < interval.start && (interval.start - o.edges != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (interval.start - o.edges == 1) {
methods._appendItem.call(this, o.edges);
}
}
} else {
if (interval.end < o.pages && o.edges > 0) {
if(o.useStartEdge) {
var begin = Math.max(o.pages - o.edges, interval.end);
for (i = o.pages - 1; i >= begin; i--) {
methods._appendItem.call(this, i);
}
}
if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (o.pages - o.edges - interval.end == 1) {
methods._appendItem.call(this, interval.end);
}
}
}
// Generate interval links
if (!o.invertPageOrder) {
for (i = interval.start; i < interval.end; i++) {
methods._appendItem.call(this, i);
}
} else {
for (i = interval.end - 1; i >= interval.start; i--) {
methods._appendItem.call(this, i);
}
}
// Generate end edges
if (!o.invertPageOrder) {
if (interval.end < o.pages && o.edges > 0) {
if (o.pages - o.edges > interval.end && (o.pages - o.edges - interval.end != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (o.pages - o.edges - interval.end == 1) {
methods._appendItem.call(this, interval.end);
}
if(o.useEndEdge) {
var begin = Math.max(o.pages - o.edges, interval.end);
for (i = begin; i < o.pages; i++) {
methods._appendItem.call(this, i);
}
}
}
} else {
if (interval.start > 0 && o.edges > 0) {
if (o.edges < interval.start && (interval.start - o.edges != 1)) {
$panel.append('<li class="disabled"><span class="ellipse">' + o.ellipseText + '</span></li>');
} else if (interval.start - o.edges == 1) {
methods._appendItem.call(this, o.edges);
}
if(o.useEndEdge) {
var end = Math.min(o.edges, interval.start);
for (i = end - 1; i >= 0; i--) {
methods._appendItem.call(this, i);
}
}
}
}
// Generate Next link (unless option is set for at front)
if (o.nextText && !o.nextAtFront) {
methods._appendItem.call(this, !o.invertPageOrder ? o.currentPage + 1 : o.currentPage - 1, {text: o.nextText, classes: 'next'});
}
},
_getPages: function(o) {
var pages = Math.ceil(o.items / o.itemsOnPage);
return pages || 1;
},
_getInterval: function(o) {
return {
start: Math.ceil(o.currentPage > o.halfDisplayed ? Math.max(Math.min(o.currentPage - o.halfDisplayed, (o.pages - o.displayedPages)), 0) : 0),
end: Math.ceil(o.currentPage > o.halfDisplayed ? Math.min(o.currentPage + o.halfDisplayed, o.pages) : Math.min(o.displayedPages, o.pages))
};
},
_appendItem: function(pageIndex, opts) {
var self = this, options, $link, o = self.data('pagination'), $linkWrapper = $('<li></li>'), $ul = self.find('ul');
pageIndex = pageIndex < 0 ? 0 : (pageIndex < o.pages ? pageIndex : o.pages - 1);
options = {
text: pageIndex + 1,
classes: ''
};
if (o.labelMap.length && o.labelMap[pageIndex]) {
options.text = o.labelMap[pageIndex];
}
options = $.extend(options, opts || {});
if (pageIndex == o.currentPage || o.disabled) {
if (o.disabled || options.classes === 'prev' || options.classes === 'next') {
$linkWrapper.addClass('disabled');
} else {
$linkWrapper.addClass('active');
}
$link = $('<span class="current">' + (options.text) + '</span>');
} else {
$link = $('<a href="' + o.hrefTextPrefix + (pageIndex + 1) + o.hrefTextSuffix + '" class="page-link">' + (options.text) + '</a>');
$link.click(function(event){
return methods._selectPage.call(self, pageIndex, event);
});
}
if (options.classes) {
$link.addClass(options.classes);
}
$linkWrapper.append($link);
if ($ul.length) {
$ul.append($linkWrapper);
} else {
self.append($linkWrapper);
}
},
_selectPage: function(pageIndex, event,callback) {
var o = this.data('pagination');
o.currentPage = pageIndex;
if (o.selectOnClick) {
methods._draw.call(this);
}
return o.onPageClick(pageIndex + 1, event);
}
};
$.fn.pagination = function(method) {
// Method calling logic
if (methods[method] && method.charAt(0) != '_') {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist on jQuery.pagination');
}
};
})(jQuery);
2)css simplePagination.css
/**
* CSS themes for simplePagination.js
* Author: Flavius Matis - http://flaviusmatis.github.com/
* URL: https://github.com/flaviusmatis/simplePagination.js
*/
ul.simple-pagination {
list-style: none;
}
.simple-pagination {
display: block;
overflow: hidden;
padding: 0 5px 5px 0;
margin: 0;
}
.simple-pagination ul {
list-style: none;
padding: 0;
margin: 0;
}
.simple-pagination li {
list-style: none;
padding: 0;
margin: 0;
float: left;
}
/*------------------------------------*\
Compact Theme Styles
\*------------------------------------*/
.compact-theme a, .compact-theme span {
float: left;
color: #333;
font-size:14px;
line-height:24px;
font-weight: normal;
text-align: center;
border: 1px solid #AAA;
border-left: none;
min-width: 14px;
padding: 0 7px;
box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}
.compact-theme a:hover {
text-decoration: none;
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#efefef), color-stop(100%,#bbbbbb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* IE10+ */
background: linear-gradient(top, #efefef 0%,#bbbbbb 100%); /* W3C */
}
.compact-theme li:first-child a, .compact-theme li:first-child span {
border-left: 1px solid #AAA;
border-radius: 3px 0 0 3px;
}
.compact-theme li:last-child a, .compact-theme li:last-child span {
border-radius: 0 3px 3px 0;
}
.compact-theme .current {
background: #bbbbbb; /* Old browsers */
background: -moz-linear-gradient(top, #bbbbbb 0%, #efefef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bbbbbb), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* IE10+ */
background: linear-gradient(top, #bbbbbb 0%,#efefef 100%); /* W3C */
cursor: default;
}
.compact-theme .ellipse {
background: #EAEAEA;
padding: 0 10px;
cursor: default;
}
/*------------------------------------*\
Light Theme Styles
\*------------------------------------*/
.light-theme a, .light-theme span {
float: left;
color: #666;
font-size:14px;
line-height:24px;
font-weight: normal;
text-align: center;
border: 1px solid #BBB;
min-width: 14px;
padding: 0 7px;
margin: 0 5px 0 0;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background: #efefef; /* Old browsers */
background: -moz-linear-gradient(top, #ffffff 0%, #efefef 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#efefef 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#efefef 100%); /* IE10+ */
background: linear-gradient(top, #ffffff 0%,#efefef 100%); /* W3C */
}
.light-theme a:hover {
text-decoration: none;
background: #FCFCFC;
}
.light-theme .current {
background: #666;
color: #FFF;
border-color: #444;
box-shadow: 0 1px 0 rgba(255,255,255,1), 0 0 2px rgba(0, 0, 0, 0.3) inset;
cursor: default;
}
.light-theme .ellipse {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
font-weight: bold;
cursor: default;
}
/*------------------------------------*\
Dark Theme Styles
\*------------------------------------*/
.dark-theme a, .dark-theme span {
float: left;
color: #CCC;
font-size:14px;
line-height:24px;
font-weight: normal;
text-align: center;
border: 1px solid #222;
min-width: 14px;
padding: 0 7px;
margin: 0 5px 0 0;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background: #555; /* Old browsers */
background: -moz-linear-gradient(top, #555 0%, #333 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#555), color-stop(100%,#333)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #555 0%,#333 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #555 0%,#333 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, #555 0%,#333 100%); /* IE10+ */
background: linear-gradient(top, #555 0%,#333 100%); /* W3C */
}
.dark-theme a:hover {
text-decoration: none;
background: #444;
}
.dark-theme .current {
background: #222;
color: #FFF;
border-color: #000;
box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
cursor: default;
}
.dark-theme .ellipse {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
font-weight: bold;
cursor: default;
}
/*------------------------------------*\
zkmgtaobao Theme Styles
\*------------------------------------*/
.zkmgtaobao-theme a, .zkmgtaobao-theme span {
float: left;
color: #303030;
font-size:14px;
line-height:24px;
font-weight: normal;
text-align: center;
border: 1px solid #bfb7f9;
min-width: 14px;
padding: 0 7px;
margin: 0 5px 0 0;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.2);
background: #ffffff; /* Old browsers */
background: -moz-linear-gradient(top, white 0%, #ffffff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,white), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, white 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, white 0%,#ffffff 100%); /* Opera11.10+ */
background: -ms-linear-gradient(top, white 0%,#ffffff 100%); /* IE10+ */
background: linear-gradient(top, white 0%,#ffffff 100%); /* W3C */
}
.zkmgtaobao-theme a:hover {
text-decoration: none;
background: #ffffff;
}
.zkmgtaobao-theme .current {
background: #7a9eeb;
color: #ffffff;
border-color: #7a9eeb;
box-shadow: 0 1px 0 rgba(255,255,255,0.2), 0 0 1px 1px rgba(0, 0, 0, 0.1) inset;
cursor: default;
}
.zkmgtaobao-theme .ellipse {
background: none;
border: none;
border-radius: 0;
box-shadow: none;
font-weight: bold;
cursor: default;
}
.tzdr-pagination {
float:right;
}
3)封闭JS
/**
*
* @param url String
* @param callback function
* @param paginationQuery String
* @param form formId
*/
liuqing.pager = function(url,callback,paginationQuery,form) {
if ("undefined" == typeof paginationQuery) {
paginationQuery = ".tzdr-pagination";
}
var queryFun = function(page,form) {
var dataForm = $.easyui.loadFormData(form);
dataForm["page"] = page;
$.post(basepath + url,dataForm,
function(pageInfoData){
var rows = pageInfoData.pageResults;
var totalCount = pageInfoData.totalCount;
var pageSize = pageInfoData.countOfCurrentPage;
var currentPage = pageInfoData.currentPage;
try{
callback(rows);
}
catch(e){}
$(paginationQuery).pagination({
items: totalCount,
itemsOnPage: pageSize,
currentPage: currentPage,
prevText: '上一页',
nextText: '下一页',
cssStyle: 'zkmgtaobao-theme',
onPageClick: function(page, event) {
queryFun(page);
}
});
});
}
queryFun();
};
4) 架构封闭
/** * 查询对象 */ $.extend({easyui:{}}); $.extend($.easyui,{ submitForm:function(id){ Liuqing.submitForm(id); }, rechangeSetValue:function(jqueryFind,valueTag,clickCallback,initCallback) { Liuqing.rechangeSetValue(jqueryFind,valueTag,clickCallback,initCallback); }, to$:function(money,digit){ return Liuqing.formatMoney(money, digit); }, $to:function(s,n) { return Liuqing.parseMoney(s,n); }, showWindow:function(jqueryFind,callback) { openWindow(jqueryFind,callback); }, closeWindow:function(jqueryFind,callback) { closeWindow(jqueryFind,callback); }, loadFormData:function(form) { return Liuqing.loadFormData(form); }, pager:function(url,callback,paginationQuery,form) { Liuqing.pager(url,callback,paginationQuery,form); } });
5)项目引入
<link rel="stylesheet" type="text/css" href="../static/plugins/pager/simplePagination.css" />
<script type="text/javascript" src="../static/plugins/pager/jquery.simplePagination.js"></script>
6)调用方法
<script type="text/javascript">
$(document).ready(function(){
$.easyui.pager("fuserTrade/getListData",function(rows){
$("#rows_id").html("");
$(rows).each(function (){
$("#rows_id").append("<ol><li class=\"sif_sl_time\">" + this.id + "</li></ol>");
});
});
});
</script>
运行结果