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

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{