您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章给大家介绍AJAX中怎么实现一个分页类,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
代码如下:
/** * <p>pagination.js * <p>通用的基于AJAX的分页类 * @author jeanwendy * @version 1.0 */ var paginationIndex = 0; var pagination = function(trTemplatId) { $().ajaxStart(function() { $.blockUI({ message : '<table><tr><td ><font size=2pt> 加载数据,请稍后...</font></td></tr></table>' }); }).ajaxStop($.unblockUI); paginationIndex = paginationIndex + 1; this.id = paginationIndex; this.trTemplatId = trTemplatId; this.pageNo = 1; this.pageSize = 10; this.beforeQuery = null; this.afterQuery = null; this.url = null; this.params = null; this.templat = null; this.childrenCount = null; this.setPageNo = function(pageNo) { if (pageNo != null) this.pageNo = pageNo; } this.setPageSize = function(pageSize) { if (pageSize != null) this.pageSize = pageSize; } this.setBeforeQuery = function(fn){ this.beforeQuery = fn; } this.setAfterQuery = function(fn){ this.afterQuery = fn; } this.load = function(url, params) { //初始化(只在第一次查询时执行) if(this.templat == null && this.childrenCount == null){ var templatObj = $('#'+this.trTemplatId); templatObj.parent().attr('id','tbody_id'+this.id); templatObj.removeAttr('id'); templatObj.wrap("<div id='divTemplat'></div>"); this.templat = $('#divTemplat').html(); $('#divTemplat').remove(); this.childrenCount = $('#tbody_id'+this.id).children().size(); } //开始查询 this.url = url; if(params == null) params = {}; $.extend(params,{pageNo:this.pageNo,pageSize:this.pageSize}); this.params = params; var thisObj = this; var options = { url : url, data : params, async : false, //采用同步方式请求 type : 'POST', dataType : 'json', error : function(xmlhttp, errInfo, e) { //请求出错处理:如:404等 if (xmlhttp.status == 200) alert('您已经很长时间没有访问网站,请退出后重新登陆!'); else alert('请求后台服务时发生错误:' + xmlhttp.status); }, success : function(data){ //删除上一次的数据 $('#tbody_id'+thisObj.id).children().filter(':gt('+(thisObj.childrenCount-1)+')').remove(); thisObj.pageList(data.data); thisObj.pageBar(data.total); if($.isFunction(thisObj.afterQuery)) thisObj.afterQuery(); } }; if($.isFunction(this.beforeQuery)) this.beforeQuery(); $.ajax(options); //发送请求 } this.pageList = function(data){ var filedArr = this.templat.match(/\{[A-Za-z0-9_]+\}/ig); for(var i = 0;i < data.length;i++){ var thisTemplat = this.templat; for(var j = 0;j < filedArr.length;j++){ var key = filedArr[j].substring(1,filedArr[j].length-1); if(key == 'NO_'){ //序号标识 var value = (this.pageNo-1)*this.pageSize + i + 1; thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value); }else{ var value = data[i][key]; if(typeof(value) != "undefined" && value == null) value = ''; thisTemplat = thisTemplat.replace(new RegExp('\{'+key+'\}','gm'),value); } } $(thisTemplat).appendTo($('#tbody_id'+this.id)); } } this.pageBar = function(total){ var templatObj = $(this.templat); var delChildren = templatObj.children(':gt(0)'); delChildren.remove(); templatObj.children().attr('colspan',$(this.templat).children().size()); templatObj.children().attr('align','right'); var pageCount; if(total % this.pageSize == 0) pageCount = total/this.pageSize; else pageCount = parseInt(total/this.pageSize) + 1; if(pageCount == 0) pageCount = 1; var toolbar = "第"+this.pageNo+"/"+pageCount+"页("+total+"条记录)"; if(this.pageNo == 1) toolbar = toolbar + " 首页 上页"; else toolbar = toolbar + " <a href='' id='firstPage"+this.id+"'>首页</a> <a href='' id='prePage"+this.id+"'>上页</a>"; if(this.pageNo == pageCount) toolbar = toolbar + " 下页 末页"; else toolbar = toolbar + " <a href='' id='nextPage"+this.id+"'>下页</a> <a href='' id='lastPage"+this.id+"'>末页</a>"; toolbar = toolbar + " 每页<input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageSize"+this.id+"' value="+this.pageSize+" />条"; toolbar = toolbar + " <input style='text-align:center;width:25px;height:20px;border:1 solid black' type='text' id='pageNo"+this.id+"' value="+this.pageNo+" />"; toolbar = toolbar + " <input style='height:20px;border:1 solid black' id='goPage"+this.id+"' type='button' value='GO'>"; templatObj.children().html(toolbar); $(templatObj.wrap("<div></div>").parent().html()).appendTo($('#tbody_id'+this.id)); var thisObj = this; $('#firstPage'+thisObj.id).click(function(){ thisObj.pageNo = 1; thisObj.load(thisObj.url,thisObj.params); return false; }); $('#prePage'+thisObj.id).click(function(){ thisObj.pageNo = parseInt(thisObj.pageNo) - 1; thisObj.load(thisObj.url,thisObj.params); return false; }); $('#nextPage'+thisObj.id).click(function(){ thisObj.pageNo = parseInt(thisObj.pageNo) + 1; thisObj.load(thisObj.url,thisObj.params); return false; }); $('#lastPage'+thisObj.id).click(function(){ thisObj.pageNo = pageCount; thisObj.load(thisObj.url,thisObj.params); return false; }); $('#pageSize'+thisObj.id).keydown(function(e){ if(e.keyCode==13) { var v = $('#pageSize'+thisObj.id).val(); if(!isIntGreatZero(v) || v == '0'){ alert('您输入显示条数不合法,请重新输入!'); $("#pageSize"+thisObj.id).focus(); return; } if(v > 200){ alert('您输入显示条数过大了,请重新输入!'); $("#pageSize"+thisObj.id).focus(); return; } thisObj.pageNo = 1; thisObj.pageSize = v; thisObj.load(thisObj.url,thisObj.params); } }); $('#pageNo'+thisObj.id).keydown(function(e){ if(e.keyCode==13) { $('#goPage'+thisObj.id).triggerHandler('click'); } }); $('#goPage'+thisObj.id).click(function(){ var v = $('#pageNo'+thisObj.id).val(); if(!isIntGreatZero(v) || v == '0'){ alert('您输入页数不合法,请重新输入!'); $("#pageNo"+thisObj.id).focus(); return; } if(v > pageCount){ alert('您输入页数大于总页数,请重新输入!'); $("#pageNo"+thisObj.id).focus(); return; } thisObj.pageNo = v; thisObj.load(thisObj.url,thisObj.params); }); } } //true if the string is empty var isEmpty = function(text) { var isEmpty = true; for (var i = 0; i < text.length; i++) { if (text.charAt(i) != ' ') { isEmpty = false; break; } } return isEmpty; } //true if the string is int and great than zero or equals zero var isIntGreatZero = function(str) { if (isEmpty(str)) return false; var temp1 = true; var temp2 = '0123456789'; for (var i = 0; i < str.length; i++) { var c = str.charAt(i); if (temp2.indexOf(c) == -1) { temp1 = false; break; } else { if (c == '0' && i == 0 && str.length > 1) { temp1 = false; break; } } } return temp1; }
关于AJAX中怎么实现一个分页类就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。