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('<tr>');for(var key in _this.fields){if(_this.fields[key].attribute && _this.fields[key].attribute.th){ th.append('<th ');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>');}th.append(_this.fields[key].name).append('</th>');}th.append('</tr>');$(_this.tableTarget).html(th.toString());//th列头输出var tr = new StringBuffer();$.each(_this.data.rows, function(i,item){tr.append('<tr id=tr').append(i).append('>');for(var key in _this.fields){if(_this.fields[key].attribute &&_this.fields[key].attribute.td){tr.append('<td ');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('<td>');}if(_this.fields[key].formatter){tr.append(_this.fields[key].formatter(item[key],item,i));}else{tr.append(item[key]);}tr.append('</td>')}tr.append('</tr>');});$(_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 <pageAll) {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++) {//下拉列表框选择页数$("<optionvalue="+num+">"+num+"</option>").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"%><!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.01Transitional//EN""/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type"content="text/html; charset=UTF-8"><title>JQpage分页</title></head><body><div class="jqpage-nav"id="jqpage-nav"><div class="jqpage-sort"id="jqpage-sort"><a class="jqpage-sort-ascjqpage-sort-hover"sortName="createDate"sortOrder="asc">创建时间</a><a class="jqpage-sort-asc"style="border-left: 0"sortName="updateDate"sortOrder="asc">更新时间</a><a class="jqpage-sort-asc"style="border-left: 0"sortName="birthData"sortOrder="asc">出生时间</a></div><div class="jqpage-menu"><span style="border: 1px solid #93BFE6;background-color: #D6EBFE;height: 15px;padding: 1px 4px;line-height: 15px;margin-top: 3px;" id="pageTagetMenu">跳转</span><span><input type="text"id="pageTarget"></span><span><img src="../r/hssoft/www/anjian/default/images/n_page.png"><a id="jqpage-base-begin"></a><a id="jqpage-base-up"></a><a id="jqpage-base-next"></a><a id="jqpage-base-end"></a></span><span>每页<input type="text"id="jqpage-pageRows">条记录，共<a id="jqpage-total"></a>条记录,页数<a id="jqpage-now"></a>/<a id="jqpage-totalPage"></a>页</span></div></div><table align="center"id="listTable"cellspacing="1"width="100%"></table><script type="text/javascript">var ryList={sex:null,zjlx:null,getText:function(value,data){var val="";$.each(data,function(){if(value==this.id){val = this.text;}});return val;},formatter:function(value,row,index){return forGrList.createHtml(row.civicId,index)},update:function(id){var opt={title:'人员修改',width:670,height:310,url:main.base+'/dsr/get.jspx?page=edit&id='+id};main.dialog(opt);},detail:function(id){var opt={title:'详细信息',width:670,height:280,url:main.base+'/dsr/get.jspx?page=detail&id='+id};main.dialog(opt);},del:function(id,index){$.messager.confirm('确认','您确认想要删除记录吗？',function(r){ if (r){$.post(main.base+'/dsr/deleteStatus.jspx?id='+id,function(msg){$('#tr'+index).remove();});}});},search:function(){var parms = $('#searchForm').serialize();_jqpage.params=encodeURI(parms);_jqpage.init();},select:function(){var table = $(_jqpage.tableTarget);var cbox = table.find("input:checked");var box = table.find(":checkbox");if(cbox.length!=box.length){table.find(":checkbox").prop("checked", true);}else{table.find(":checkbox").prop("checked", false);}}};var _jqpage;$(function() {_jqpage = new JQpage();_jqpage.fields={civicId:{},//占位no:{name:'序号',formatter:function(value,rows,index){return index+1;},attribute:{th:{width:'5%'},td:{style:'background-color:#EBF1FF;color:#5C5C5C' }}},userName:{name:'用户名',attribute:{th:{width:'10%'}}},sex:{name:'性别',attribute:{th:{width:'10%'}},formatter:function(value,rows,index){return ryList.getText(value,ryList.sex);;}},contactNumber:{name:'联系电话',attribute:{th:{width:'10%'}}},certificateType:{name:'证件类型',attribute:{th:{width:'10%'}},formatter:function(value,rows,index){return ryList.getText(value,ryList.zjlx);;}},certificateNo:{name:'证件号',attribute:{th:{width:'10%'}}},updateDate:{name:'更新日期',attribute:{th:{width:'15%'}}},birthData:{name:'出生日期',attribute:{th:{width:'15%'}}},xxx:{name:'操作',width:'10%',attribute:{th:{width:'10%'}},formatter:function(value,rows,index){return ryList.formatter(value,rows,index);}}};_jqpage.fields.civicId={name:'全选',formatter:function(value,rows,index){return'<input type="checkbox" value='+value+' />' },attribute:{th:{width:'4%',style:'color:blue;cursor:pointer;',onclick:'ryList.select()'},td:{align:'center',style:'background-color:#EBF1FF;'}}};_jqpage.tableTarget="#listTable";_jqpage.pageTarget="#jqpage-nav";_jqpage.url=main.base+'/dsr/page.jspx';_jqpage.local=function(){var _this = this;var pageAll = Math.ceil(_this.data.total/_this.rows);$('#jqpage-pageRows').unbind();$("#jqpage-pageRows").val(_this.rows).blur(function(){ _this.rows = $(this).val();//对每页显示数量赋值if(_this.rows<1 || _this.rows>_this.data.total)return;_this.init();});$('#jqpage-total').text(_this.data.total);$('#jqpage-now').text(_this.page);$('#jqpage-totalPage').text(pageAll);$('#pageTagetMenu').unbind();$('#pageTagetMenu').css({cursor:'pointer'}).bind('click',function(){ _this.page= $('#pageTarget').val();//对开始值赋值if(_this.page<1 || _this.page>pageAll)return;_this.init();})};//加载分页组件前，执行的初始化操作_jqpage.before=function(){try{//初始化性别ryList.sex = $.parseJSON($.ajax({url:main.basePath+'/json/sex.json',async: false }).responseText);//初始化证件类型ryList.zjlx = $.parseJSON($.ajax({url:main.basePath+'/json/zjlx.json',async: false }).responseText);}catch(e){alert( + ": " + e.message);returnfalse;}returntrue;};_jqpage.init();});</script></body></html>上面搜索条件部分CSS自己写的就不贴上来了4.使用说明1、_page.fields对象包含后台json传递进来的属性对应的名称，每一个属性被附加定义了一些组件：----name：属性对应显示在列头“th”中的名称---- attribute：属性对应在html的“th”列头与“td”单元格所有本身支持的属性和样式---- formatter：格式化输出到单元格显示的内容包含三个参数value,rows,index2、_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 align="center"id="pageTable"border="0"bgcolor="#cccccc"width="100%"><tr><td align="right"><a>每页<input type="text"value=""size="1">条 </a><a>共<span id="jqpage-totalRows"></span>条记录 </a> <a id="jqpage-base-begin">首页</a> <a id="jqpage-base-up">上一页</a> <a id="jqpage-base-next"style="cursor: pointer;">下一页</a> <a id="jqpage-base-end"style="cursor: pointer;">尾页</a> <a>第<select></select>页/共</a><a id="jqpage-totalPage"></a>页</td></tr></table>数据列表的table<table align="center" id="listTable" cellspacing="1"width="100%"></table>。