1.JQpage源码
/**
*pluginname:JQpage
*version1.0
*authoryqm
*企鹅:2-3-8-7-5-0-3-1-0-6
*time:2015-12-8
*Explain:在一次项目开发中，前期项目使用了easyui,但是客户比较BT，说easyui的datagrid太丑！！于是没办法只有自己写一个分页，
*但是又不想改变后台java代码，所以就以easyui的datagrid后台返回格式数据，写了一个前端的jquery分页插件。
*本插件主要立足于尽可能的满足所有表格样式需求，所以完全可以自己定制你想要的所有样式，绝对兼容easyui返回的后端json数据，然后又能完美的扩展其它组件，
*皆可以自定义做所有你能想到的事情，目前版本提供的是一个较为基础的分页版本，相信有一定js基础的人，都能很方便的扩展。
*
*该插件放到网络上分享给大家，若是大家有更好的建议，或者对插件做了变更，希望你能把变更并且优秀的代码也分享给我，大家一起学习完善
*有需要帮助的同学也可以Q我
*
*/
var StringBuffer = function(){
this._strings = new Array();
};
StringBuffer.prototype.append=function(str){
this._strings.push(str);
returnthis;
};
StringBuffer.prototype.toString=function(){
returnthis._strings.join("");
};
var JQpage = function(){
this.page=1;//起始页
this.rows=10;//每页显示的行数
this.url=null;//获取远程数据的地址
this.params='';//远程访问的参数,可直接使用$('#form').serialize()
this.tableTarget=null;//表格，带选择符
this.pageTarget=null;//分页控制区域，带选择符
this.data=null;//分页数据
this.fields=null;//所有字段
this.rowColor=['#FFF','#F7F8FA'];//隔行换色的两种颜色
this.rowHoverColor='#FACE6D';
this.pageComponent={
begin:'#jqpage-base-begin',//首页
up:'#jqpage-base-up',//上一步
next:'#jqpage-base-next',//下一步
end:'#jqpage-base-end',//尾页
totalRows:'#jqpage-totalRows',//总行数
totalPage:'#jqpage-totalPage',//总页数
sort:'#jqpage-sort'
};
}
/**
*初始化组件之前的方法，返回false可以阻止组件和数据初始化
*/
JQpage.prototype.before = function(){
returntrue;
};
/**
*构建数据中心
*/
JQpage.prototype.dataFactory = function(){
var _this = this;
if(_this.url==null)return;
var param = new StringBuffer();
param.append(_this.params).append("&page=").append(_this.page).append("&row s=").append(_this.rows);
$.ajax({
type: "POST",
url: _this.url,
data: param.toString(),
dataType:"JSON",
async: false,
success: function(data){
_this.data = data;//初始化数据
_this.list();//构建列表
_this.pagination();//构建分页工具条
_this.local();//构建本地组件
_this.sort();//构建排序组件
},
beforeSend:function(){
return _this.before();
},
error:function(XMLHttpRequest, textStatus, errorThrown){
alert("JQpage组件初始化失败！"+textStatus+":"+errorThrown);
}
});
};
/**
*列表展示
*/
JQpage.prototype.list = function(){
var _this = this;
var th = new StringBuffer();
th.append('
for(var key in _this.fields){
if(_this.fields[key].attribute && _this.fields[key].attribute.th){ th.append('
for(var op in _this.fields[key].attribute.th){
th.append(op).append('="').append(_this.fields[key].attribute.th[op]).appen d('" ');
}
th.append('>');
}else{
th.append('
}
th.append(_this.fields[key].name).append('
}
th.append('
$(_this.tableTarget).html(th.toString());//th列头输出
var tr = new StringBuffer();
$.each(_this.data.rows, function(i,item){
tr.append('
for(var key in _this.fields){
if(_this.fields[key].attribute &&
_this.fields[key].attribute.td){
tr.append('
for(var op in _this.fields[key].attribute.td){
tr.append(op).append('="').append(_this.fields[key].attribute.td[op]).appen d('" ');
}
tr.append('>');
}else{
tr.append('
}
if(_this.fields[key].formatter){
tr.append(_this.fields[key].formatter(item[key],item,i));
}else{
tr.append(item[key]);
}
tr.append('
}
tr.append('
});
$(_this.tableTarget).append(tr.toString());
$(_this.tableTarget).find('tr').each(function(i){
this.style.backgroundColor=_this.rowColor[i%2];
$(this).bind({
mouseover:function(){
this.style.backgroundColor=_this.rowHoverColor;
},
mouseout:function(){
this.style.backgroundColor=_this.rowColor[i%2];
}
});
});
};
/**
*分页控制
*/
JQpage.prototype.pagination = function(){
var _this = this;
var pageAll = Math.ceil(_this.data.total/_this.rows);
var pageTarget = $(_this.pageTarget);
var aup = pageTarget.find(_this.pageComponent.up);//上一页
var anext = pageTarget.find(_this.pageComponent.next);//下一页
var abegin = pageTarget.find(_this.pageComponent.begin);//首页
var aend = pageTarget.find(_this.pageComponent.end);//尾页
aup.css({cursor:'auto'}).unbind();
anext.css({cursor:'auto'}).unbind();
abegin.css({cursor:'auto'}).unbind();
aend.css({cursor:'auto'}).unbind();
if(_this.page == 1 && pageAll > 1){//当起始页小于0时移除超链接
anext.css({cursor:'pointer'}).bind('click',function(){_this.next();});
aend.css({cursor:'pointer'}).bind('click',function(){_this.end();});
} elseif(_this.page == pageAll){//当当前页大于等于总页数时移除超链接 aup.css({cursor:'pointer'}).bind('click',function(){_this.up();});
abegin.css({cursor:'pointer'}).bind('click',function(){_this.begin();});
}elseif(_this.page>1 && _this.page anext.css({cursor:'pointer'}).bind('click',function(){_this.next();}); aend.css({cursor:'pointer'}).bind('click',function(){_this.end();}); aup.css({cursor:'pointer'}).bind('click',function(){_this.up();}); abegin.css({cursor:'pointer'}).bind('click',function(){_this.begin();}); } }; /** *构建本地组件，可以自己从写实现,以下是默认实现 */ JQpage.prototype.local = function(){ var _this = this; var target = $(_this.pageTarget); var pageAll = Math.ceil(_this.data.total/_this.rows); target.find("select").empty(); for(var num = 1; num <= pageAll; num++) {//下拉列表框选择页数 $(" value="+num+">"+num+"").appendTo(target.find("select")); } target.find("select").val(_this.page)//设置列表框选中值,进入第几页 .change(function(){//列表框改变触发 _this.page=target.find("select").val();//对开始值赋值 _this.init(); }); target.find("input").val(_this.rows)//设置文本框的值，没设置的情况下默认是10 .blur(function(){ _this.rows = target.find("input").val();//对每页显示数量赋值 _this.init(); }); target.find(_this.pageComponent.totalRows).text(_this.data.total); target.find(_this.pageComponent.totalPage).text(pageAll); }; /** *排序组件组件扫描对象ID标签下的子标签a，每个a标签必带 sortName="createDate"sortOrder="asc"的值还有desc */ JQpage.prototype.sort = function(){ var _this = this; if($(this.pageComponent.sort)) $(this.pageComponent.sort).children("a").unbind().each(function(){ var that = $(this); that.bind({ click:function(){ that.siblings().removeClass().addClass('jqpage-sort-asc'); that.addClass('jqpage-sort-hover'); that.removeClass('jqpage-sort-asc'); var order = that.attr('sortOrder'); if(order=='desc'){ that.removeClass('jqpage-sort-desc'); that.addClass('jqpage-sort-asc'); that.attr('sortOrder','asc'); }else{ that.removeClass('jqpage-sort-desc'); that.addClass('jqpage-sort-desc'); that.attr('sortOrder','desc'); } _this.params='&sortOrder='+order+'&sortName='+that.attr('sortName'); _this.init(); } }); }); }; /** *下一页 */ JQpage.prototype.next = function(){ this.page+=1; this.dataFactory(); }; /** *上一页 */ JQpage.prototype.up=function(){ this.page-=1; this.dataFactory(); }; /** *开始 */ JQpage.prototype.begin=function(){ this.page=1; this.dataFactory(); }; /** *尾页 */ JQpage.prototype.end=function(){ this.page=Math.ceil(this.data.total/this.rows); this.dataFactory(); }; /** *初始化 */ JQpage.prototype.init=function(){ this.dataFactory(); } 2.CSS #listTable{ background-color:#E0DCDD; } #listTable th{ background-color:#74B0EE; font-weight:normal; height:28px; color:#fff; text-align:center; } #listTable td{ text-align:center; } .jqpage-nav{ width:100%; height:28px; line-height:28px; } .jqpage-sort{ width:30%; float:left; } .jqpage-sort a{ height:10px; line-height:10px; display:block; float:left; padding:5px; padding-right:15px; border:1pxsolid#ccc; cursor:pointer; } .jqpage-sort-hover{ color:#FF8C01; } .jqpage-sort a:HOVER{ color:#FF8C01; } .jqpage-sort-asc{ background:url("../images/n_asc.png")no-repeat97%3px; } .jqpage-sort-desc{ background:url("../images/n_desc.png")no-repeat97%3px; } .jqpage-menu{ width:60%; float:right; } .jqpage-menu span{ display:block; float:right; margin-right:5px; position:relative; } .jqpage-menu img{ margin-top:3px; } .jqpage-menu input{ width:35px; height:12px; border:1pxsolid#ccc; margin-top:5px; } #jqpage-base-begin,#jqpage-base-up,#jqpage-base-next,#jqpage-base-end{ display:block; position:absolute; height:18px; top:5px; } #jqpage-base-begin{ width:23px; left:3px; } #jqpage-base-up{ width:18px; left:33px; } #jqpage-base-next{ width:18px; left:57px; } #jqpage-base-end{ width:23px; left:83px; } 3.案列 以下是自己页面的源码，原封不动的贴上来供大家参考，源码使用了分页所有的功能，并且还扩展了些许，另外调用了一些其它函数，就不用给出了，末尾给上了效果图 <%@page language="java"contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Transitional//EN""https://www.doczj.com/doc/587928667.html,/TR/html4/loose.dtd">
上面搜索条件部分CSS自己写的就不贴上来了
4.使用说明
1、_page.fields对象包含后台json传递进来的属性对应的名称，每一个属性被附加定义
了一些组件：
----name：属性对应显示在列头“th”中的名称
---- attribute：属性对应在html的“th”列头与“td”单元格所有本身支持的属性和样式
---- formatter：格式化输出到单元格显示的内容包含三个参数value,rows,index
2、_page.tableTarget对象指定要显示列表的table容器
3、_page.pageTarget对象指定分页工具条的容器
4、_page.url对象指定访问后台的地址
5、_page.local = function(){} 该对象方法用于本地分页其它组件的自定义编写
6、_page.init()初始化，并加载分页组件和数据
5.符源码默认使用的表格样式，贴进去就可以用看效果
改下page.tableTarget，_page.pageTarget,_page.url,执行_page.init()就可看效果分页工具条的table
|
数据列表的table
