自己尝试着写了个分页插件,发出来请大家指正
/** * 分页插件 * co-hedahong001 */ (function($) { var page = { pageSize:10, pageNo:1, count:0, maxPage:0 }; function load(){ var opts = $.fn.paging.defaults; var params={}; if (opts.formId) { if(opts.validate){ if(!$("#"+opts.formId).form('validate')){ $("label.error-msg").html("[查询条件有误...]"); return false; }else{ $("label.error-msg").html(""); } } $.extend(params,page,parseForm(opts.formId)); }else{ $.extend(params,page); } $.ajax({ url:opts.url, dataType:opts.dataType, type:opts.type, async:opts.async, timeout:20000, data:params, success: function(data){ page.count = data.count; page.maxPage = data.maxPage refresh(); $("div.error-msg").html(""); if (opts.success) { opts.success(data.result); } if (data.result.length==0) { alert("没有符合条件的记录"); } }, error:function(res,msg,e){ if (opts.error) { opts.error(res,msg,e); }else{ $("label.error-msg").html("[数据加载异常("+msg+")]"); } } }); } /** 解析form元素并拼接成json格式数据同时完成表单验证*/ function parseForm(id){ var json={},form=$("#"+id)[0]; for(var i=0;i<form.length;i++){ if(isNull(form[i].value)){continue;} if(form[i].disabled){continue;} var t = form[i].type; if(t=="text"||t=="select-one"||t=="hidden"||t=="checkbox"||t=="radio"){ if(form[i].name){ if(t=="radio"){ if(!json[form[i].name]){ json[form[i].name]=$("input[name='"+form[i].name+"']:checked").val(); } continue; } if(t=="checkbox"){ if(!json[form[i].name]){ var vals=[]; $("input[name='"+form[i].name+"']:checked").each(function(i){ vals[i]=this.value; }); if (vals.length>0) { json[form[i].name]=vals.join(","); } continue; } } json[form[i].name]=form[i].value; } } } return json; } function init(target,opts){ if (target.children().size()>0) { return; } var _first = $("<input>").attr("type","button").val("|<<").click(function(){ page.pageNo=1; load(); }); var _previous = $("<input>").attr("type","button").val("<<").click(function(){ page.pageNo = page.pageNo-1; if (page.pageNo<1) { page.pageNo = 1; } load(); }); var _next = $("<input>").attr("type","button").val(">>").click(function(){ page.pageNo = page.pageNo+1; if (page.pageNo>page.maxPage) { page.pageNo = 1; } load(); }); var _last = $("<input>").attr("type","button").val(">>|").click(function(){ if (page.maxPage>0) { page.pageNo=page.maxPage; load(); } }); var _error = $("<label>").css("color","red").addClass("error-msg"); var _count = $("<label>").addClass("paging-count").html(page.count); var _max = $("<label>").addClass("paging-max").html(page.maxPage); var _pageNo = $("<label>").addClass("paging-pageNo").html(1); if (!opts.pageSize||opts.pageSize<10) { opts.pageSize=10; } var _pageList = $("<select>").css("width","40px").append($("<option>").val(opts.pageSize).html(opts.pageSize)).change(function(){ page.pageNo=1; page.pageSize=parseInt(this.value); load(); }); if(opts.pageList){ _pageList.html(""); for(var i=0; i<opts.pageList.length; i++) { $("<option>").val(opts.pageList[i]).html(opts.pageList[i]).appendTo(_pageList); } } _pageList.val(opts.pageSize); page.pageSize=opts.pageSize; var _info = $("<label>").append(" 共 ").append(_count).append(" 条记录,每页 ").append(_pageList).append(" 条,共 ").append(_max).append(" 页,当前第 ").append(_pageNo).append(" 页 "); target.append(_error).append(_info).append(_first).append(_previous).append(_next).append(_last); } function refresh(){ $("label.paging-count").html(page.count); $("label.paging-max").html(page.maxPage); $("label.paging-pageNo").html(page.pageNo); } $.fn.paging = function(options) { $.extend($.fn.paging.defaults, options); if (options.data) { $.extend(params,options.data); } init(this,$.fn.paging.defaults); }; $.fn.paging.defaults={ url:"", // 数据地址 type:"post", // 请求类型 dataType:"json", // 数据格式 data:null, // 请求参数 async:true, // 是否同步 validate:false, // 是否验证(依赖:jquery.validatebox.js,jquery.form.js) formId:null, // 参数表单 pageList:[10,20,30,40,50], // 每页显示数 pageSize:10, // 每页显示条数 success:null, // 成功后处理函数 error:null // 错误状态监听函数 }; $.fn.paging.query=function(){ page.pageNo=1; load(); }; })(jQuery);
样式:
.paging-first,.paging-previous,.paging-next,.paging-last{ cursor: pointer;margin: 0 10px;font-size: 13px;border: 1px solid #336699;background-color: #BCD1D8;padding: 1px; }