【www.gdgbn.com--jquery】

进行修改删除操作的时候能记住当前页；
3：查询后翻页的时候可以可以记住当前查询的条件

3.2实现
html

复制代码 代码如下:

jquery
为了我们的控件可以随意使用，我们将其写成插件的形式，首先搭个框架，我们将插件命名为simplepage
复制代码 代码如下:
(function($){
$.fn.simplepage=function(o){
var options={
//配置参数
};
return //sth
}
})(jquery)

默认有哪些参数呢？
由于需要发送当前页，每页显示数量，所以需要 currentpage，pagesize 两个基本参数；
由于需要查询表格内容，所以需要一个放置查询条件的表单 form；
由于需要修改删除后记住当前页，所以需要一个标志指示当前进行的是何操作type；
为了使我们的程序更具有灵活性，加上获取数据后需要加载到的container，还有就是分页控件加载的pager，
具体如下
复制代码 代码如下:
var options={
pager: ".pager",//表格控件的容器
container: ".tabledata",//放置表格数据的容器
form: "#form",//放置查询条件的表单
pageform: "#pageform",//放置隐藏与的div
url: "",//发送请求的地址
currentpage: 1,
pagesize: 2
type: null,//可选：action,
pageshow:7
}

为了便于维护，我们声明一个独立的对象来进行获取数据，绑定事件的操作，我们将这个函数命名为$.page
复制代码 代码如下:
$.page = {
//
setpage: function(o){
},
//获取当前页
getcurrentpage: function(o){
},
//获取每页显示数量
getpagesize: function(o){
},
//生成发送所需要的json数据
gendata: function(o){
},
//发送数据
loaddata: function(o){
}
} 

 

 

实现以上所声明的函数，当分页第一次加载的时候，我们需要从服务器获取总页数来生成分页控件，所以首先实现loaddata函数
复制代码 代码如下:

loaddata: function(o){
var that = this;
var data = that.gendata(o);
$.ajax({
url: o.url,
data: data,
type: "post",
datatype: "html",
cache: false,
success: function(result){
var res = $(result).find("tbody").html();
var totalpage = $(result).find("#totalpage").val();
var currentpage = $(result).find("#currentpage").val();
o.currentpage=currentpage;
o.pager.empty();
$.line.setline(totalpage,o); //调用生成分页控件的函数
},
error: function(){
alert("error");
}
})
}

下面我们实现上面生成分页控件的函数$.line.setline
复制代码 代码如下:

$.line={
setline:function(totalpage,o){
for(var i=0;i var a=$("").html(""+(i+1)+"").addclass("pagea").bind("click",function(){
var s=$(this);
s.siblings().removeclass("pageactive");
s.addclass("pageactive");
o.currentpage=s.text();
$.page.loaddata(o);
});
if(o.currentpage==i+1){
a.addclass("pageactive");
}
o.pager.append(a);
}
var limit=this.getlimit(o,totalpage);
var apage=o.pager.find("a.pagea").not("a.previous,a.nextall,a.record");
apage.hide();
apage.slice(limit.start,limit.end).show();
var prev=$("").html("上一页").addclass("pagea previous").unbind("click").bind("click",function(){
var pageactive=o.pager.find("a.pageactive");
var s=$(this);
if(pageactive.prev().text()=="上一页"){
alert("已经是第一页!");
return false;
}
pageactive.removeclass("pageactive");
pageactive.prev().addclass("pageactive");
o.currentpage=pageactive.prev().text();
$.page.loaddata(o);
});
var next=$("").html("下一页").addclass("pagea nextall").unbind("click").bind("click",function(){
var pageactive=o.pager.find("a.pageactive");
var s=$(this);
if(pageactive.next().text()=="下一页"){
alert("已经是最后一页!");
return false;
}
pageactive.removeclass("pageactive");
pageactive.next().addclass("pageactive");
o.currentpage=pageactive.next().text();
$.page.loaddata(o);
});
var pageactivetext=o.pager.find("a.pageactive").text();
var record=$("").html(""+pageactivetext+"/"+totalpage+"").addclass("pagea record");
o.pager.prepend(prev).prepend(record).append(next);
}
}

 

  在上面的代码中我们给当前的页面加上了pageactive类，所以现在我们可以实现$.page的getcurrentpage函数，非常简单
复制代码 代码如下:

 

getcurrentpage: function(o){
var p = o.pager.find("a.pageactive").text();
return p;
}

接着我们实现生成json数据的gendata函数，json格式为{key:value,key:value}
复制代码 代码如下:

gendata: function(o){
var sdata = $.extend({}, { "currentpage": o.currentpage,
"pagesize": o.pagesize}, $.jsonobj(o.pageform));
return sdata;
},

上面的$.jsonobj为自定义的函数，为了生成我们需要的json格式以便发送查询的数据，只支持input，select
复制代码 代码如下:
$.jsonobj = function(form){
//判断是否有序列化的东东
if (!$(form).html() || $(form).html() == null || $.trim($(form).html()) == "") {
return null;
}
var formel = $(form).find("input[type="text"]");
var formselect = $(form).find("select");
var json = "{";
for (var i = 0; i < formel.length - 1; i++) {
var name = formel.eq(i).attr("name");
var val = """ + formel.eq(i).val() + """;
json += name;
json += ":";
json += val;
json += ",";
}
var lname = formel.eq(formel.length - 1).attr("name");
var lval = """ + formel.eq(formel.length - 1).val() + """;
json += lname;
json += ":";
json += lval;
if (formselect) {
json += ",";
for (var i = 0; i < formselect.length - 1; i++) {
var name = formselect.eq(i).attr("name");
var val = """ + formselect.eq(i).val() + """;
json += name;
json += ":";
json += val;
json += ",";
}
var lname = formselect.eq(formselect.length - 1).attr("name");
var lval = """ + formselect.eq(formselect.length - 1).val() + """;
json += lname;
json += ":";
json += lval;
}
json += "}";
var jsonobj = eval("(" + json + ")")
return jsonobj;
}

 

  接着我们为查询表单的按钮绑定事件，我们扩展下我们的$.page函数
复制代码 代码如下:

 

handlequeryline:function(o){
$(o.form).find(".query").click(function(){
//$(o.pageform).append($(o.form).clone(true));
$(o.pageform).empty();
$(o.form).find("input[type="text"]").each(function(){
var vals = $(this).val();
var s = $(this).clone().val(vals);
$(o.pageform).append(s);
});
$(o.form).find("select").each(function(){
var vals = $(this).val();
var s = $(this).clone().val(vals);
$(o.pageform).append(s);
});
$.page.query(o);
});
}

ok，基本的函数已经完成，下面完成主函数
复制代码 代码如下:

$.fn.simplepage = function(os){
var options = {
pager: ".pager",//表格控件的容器
container: ".tabledata",//放置表格数据的容器
form: "#form",//放置查询条件的表单
pageform: "#pageform",//放置隐藏与的div
url: "",//发送请求的地址
currentpage: 1,
pagesize: 2,
type: null,//可选：action,
pageshow:7//,
};
var o = $.extend(options, os);
return this.each(function(){
o.pager = $(this).find(o.pager);
o.container = $(this).find(o.container);
//首先清除click事件
o.pager.unbind("click");
if (o.type == "action") {
//指定的动作，比如删除时的事件，这时需要在当前页刷新数据
o.currentpage = $.page.getpagesize(o);
o.pagesize = $.page.getcurrentpage(o);
$.page.loaddata(o);
return;
}
$.page.loaddata(o);
$.line.handlequeryline(o);
})
}

现在我们的分页还不是很好看，我们用firebug查看下生成的分页结构，写了如下样式
复制代码 代码如下:

 

 

.pager a {
display: block;
float: left;
width: 16px;
height: 16px;
margin: 5px;
}
.pager a.pagea{
background:url("../images/grid/page.png") no-repeat left 0px transparent;
display:inline-block;
font-size:14px;
margin:0 3px;
padding-left:6px;
text-align:center;
vertical-align:bottom;
height:auto;
width:auto;
cursor:pointer;
}
.pager a.pagea span{
background:url("../images/grid/page.png") no-repeat right 0px transparent;
display:inline-block;
height:24px;
line-height:22px;
padding-right:6px;
}
.pager a.pageactive{
background:url("../images/grid/page.png") no-repeat left -24px transparent;
}

本文来源：http://www.gdgbn.com/wangyezhizuo/27355/