jquery分页插件_可随意改变样式.docx

JQpage源码/** * plugin name:JQpage * version 1.0 * author yqm * 企鹅:2-3-8-7-5-0-3-1-0-6 * time:2015-12-8 * Explain: 在一次项目开发中，前期项目使用了easy ui,但是客户比较BT，说easy ui的datagrid太丑！！于是没办法只有自己写一个分页， * 但是又不想改变后台java代码，所以就以easy ui 的datagrid后台返回格式数据，写了一个前端的jquery分页插件。 * 本插件主要立足于尽可能的满足所有表格样式需求，所以完全可以自己定制你想要的所有样式，绝对兼容easy ui返回的后端json数据，然后又能完美的扩展其它组件， * 皆可以自定义做所有你能想到的事情，目前版本提供的是一个较为基础的分页版本，相信有一定js基础的人，都能很方便的扩展。 * * 该插件放到网络上分享给大家，若是大家有更好的建议，或者对插件做了变更，希望你能把变更并且优秀的代码也分享给我，大家一起学习完善 * 有需要帮助的同学也可以Q我 * */var StringBuffer = function(){this._strings = new Array();};StringBtotype.append=function(str){this._strings.push(str);return this;};StringBtotype.toString=function(){return this._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:#jqbase-begin,//首页up:#jqbase-up,//上一步next:#jqbase-next,//下一步end:#jqbase-end,//尾页totalRows:#jqtotalRows,//总行数totalPage:#jqtotalPage,//总页数sort:#jqsort};}/** * 初始化组件之前的方法，返回false 可以阻止组件和数据初始化 */JQtotype.before = function(){return true;};/** * 构建数据中心 */JQtotype.dataFactory = function(){ var _this = this; if(_this.url==null)return; var param = new StringBuffer(); param.append(_this.params).append(page=).append(_this.page).append(rows=).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); } });};/** * 列表展示 */JQtotype.list = function(){ var _this = this; var th = new StringBuffer(); th.append(tr); for(var key