jQuery ajax分页

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/lirong800/archive/2008/04/23/2316836.aspx

 

1.css样式单

.container { position: relative; } .pgContainer { min-height:100px; _height:100px; } .pgToolbar { width:100%; height:30px; font-size:12px; line-height:30px; background: url(../images/wbg.gif); } .pgPanel { float:left; padding:0 10px 0 10px; } .pgToolbar div { float:left; } .pgBtn { width: 20px; height: 28px; display: block; cursor: pointer; margin:1px; } .pgPress { margin:2px 0 0 2px; } .pgPrev { background: url(../images/prev.gif) no-repeat center; } .pgPrevDisabled { background: url(../images/prev_disabled.gif) no-repeat center; cursor:auto; } .pgNext { background: url(../images/next.gif) no-repeat center; } .pgNextDisabled{ background: url(../images/next_disabled.gif) no-repeat center; cursor:auto; } .pgFirst { background: url(../images/first.gif) no-repeat center; } .pgFirstDisabled { background: url(../images/first_disabled.gif) no-repeat center; cursor:auto; } .pgLast { background: url(../images/last.gif) no-repeat center; } .pgLastDisabled { background: url(../images/last_disabled.gif) no-repeat center; cursor:auto; } .pgRefresh { background: url(../images/load.png) no-repeat center; } .pgLoad { background: url(../images/load.gif) no-repeat center; } .pgCurrentPage { width:30px; height:16px; line-height:16px; text-align:center; border:1px solid #CCCCCC; } .pgSearchInfo { margin-left:20px; } .mask { width: 100%; height: 100%; background: url(../images/loading.gif) no-repeat center; background-color: #FFFFFF; position: absolute; zIndex: 999; top:0; left:0; filter:alpha(opacity=70); -moz-opacity:0.70; opacity:.70; } .cleanFloat { clear:both; display:none; } .separator { width:2px; height:30px; margin:0 5px 0 5px; background: url(../images/separator.gif) no-repeat center; } th { background:#0066FF; color:#FFFFFF; line-height:20px; height:30px; } td { padding:6px 11px; border-bottom:1px solid #95bce2; vertical-align:top; text-align:center; } td * { padding:6px 11px; } tr.alt td { background:#ecf6fc; } tr.over td { background:#bcd4ec; } 本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/lirong800/archive/2008/04/23/2316836.aspx

 

2.扩展的jQuery插件

jQuery.fn.pagination = function(config){ init("#"+this.attr("id"),config); } function init(t,config){ var totalRecord = config.totalRecord > 0 ? config.totalRecord : 0;//总记录数 if(totalRecord == 0){ $(t).css("text-align","center"); $(t).css("line-height","50px"); $(t).html("很遗憾，没有检索到任何记录！"); return; } var configPage = config.perPage > 0 ? config.perPage : 10; var perPage = $.cookie(t+"_perPage") == null ? configPage : parseInt($.cookie(t+"_perPage"));//每页显示记录数 var proxyUrl = config.proxyUrl;//请求发送地址 var groupSize = config.groupSize;//组大小 var barPosition = config.barPosition == null ? 'bottom' : config.barPosition;//工具条位置 var ajaxParam = config.ajaxParam; //ajax的请求参数 //私有变量 var totalPage = Math.ceil(totalRecord/perPage);//总页数 var currentPage = $.cookie(t+"_currentPage") == null ? 1 : parseInt($.cookie(t+"_currentPage"));//当前页码 var startRecord;//每页起始记录 var endRecord;//每页结束记录 var gpStartPage; var gpEndPage; var gpStartRecord; var gpEndRecord; //数据容器 var container = '<div class="pgContainer"></div>' //添加工具条 var toolbar = '<div class="pgToolbar">'; toolbar += '<div class="pgPanel">'; toolbar += '<div><select class="pgPerPage">'; if(config.perPage>0) toolbar += '<option value="'+config.perPage+'">'+config.perPage+'</option>'; toolbar += '<option value="5">5</option>'; toolbar += '<option value="10">10</option>'; toolbar += '<option value="15">15</option>'; toolbar += '<option value="20">20</option>'; toolbar += '<option value="25">25</option>'; toolbar += '<option value="40">40</option>'; toolbar += '</select> </div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgBtn pgFirst" title="首页"></div>'; toolbar += '<div class="pgBtn pgPrev" title="上页"></div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div>第 <input class="pgCurrentPage" type="text" value="' + currentPage + '" title="页码" /> 页 / 共 <span class="pgTotalPage">' + totalPage + '</span> 页</div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgBtn pgNext" title="下页"></div>'; toolbar += '<div class="pgBtn pgLast" title="尾页"></div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgBtn pgRefresh" title="刷新"></div>'; toolbar += '<div class="separator"></div>'; toolbar += '<div class="pgSearchInfo">检索到 ' + totalRecord + ' 条记录，显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录</div>'; toolbar += '<hr class="cleanFloat" /></div>'; toolbar += '</div>'; if(perPage<totalRecord) $(t).html(container+toolbar); else $(t).html(container); var btnRefresh = $(t+" .pgRefresh");//刷新按钮 var btnNext =$(t+" .pgNext");//下一页按钮 var btnPrev = $(t+" .pgPrev");//上一页按钮 var btnFirst = $(t+" .pgFirst");//首页按钮 var btnLast = $(t+" .pgLast");//末页按钮 var btnGo = $(t+" .pgNext,"+t+" .pgLast"); var btnBack = $(t+" .pgPrev,"+t+" .pgFirst"); var btn = $(t+" .pgFirst,"+t+" .pgPrev,"+t+" .pgNext,"+t+" .pgLast"); var mask; var valCurrentPage = $(t+" .pgCurrentPage"); var valStartRecord = $(t+" .pgStartRecord"); var valEndRecord =$(t+" .pgEndRecord"); var valContainer = $(t+" .pgContainer"); var valPerPage = $(t+" .pgPerPage"); var valTotalPage = $(t+" .pgTotalPage"); $(t+" .pgPerPage").attr("value",perPage); getGroupStartEnd(); getStartEnd(); getRemoteData(); //刷新按钮监听 btnRefresh.bind("mousedown",pressHandler).bind("mouseup",unpressHandler).bind("mouseout",unpressHandler); //刷新工具栏 refresh(); //按钮监听 //点击"下一页"按钮 btnNext.click( function(){ if(currentPage < totalPage){ currentPage += 1; getStartEnd(); getRemoteData(); } } ); //点击"前一页"按钮 btnPrev.click( function(){ if(currentPage > 1){ currentPage -= 1; getStartEnd(); getRemoteData(); } } ); //点击"首页"按钮 btnFirst.click( function(){ if(currentPage > 1){ currentPage = 1; getStartEnd(); getRemoteData(); } } ); //最后一页 btnLast.click( function(){ if(currentPage < totalPage){ currentPage = totalPage; getStartEnd(); getRemoteData(); } } ); btnRefresh.click( function(){ getStartEnd(); getRemoteData(); } ); //页码输入框监听 valCurrentPage.keydown( function(){ var targetPage = parseInt($(this).val()); if(event.keyCode==13 && targetPage>=1 && targetPage<=totalPage){ currentPage = targetPage; getStartEnd(); getRemoteData(); } } ); valPerPage.change( function(){ perPage = parseInt($(this).val()); currentPage = 1; totalPage = Math.ceil(totalRecord/perPage); getStartEnd(); getRemoteData(); } ); /*********************************init私有函数***************************************************/ /** * 置为正在检索状态 */ function startLoad(){ $(t).addClass("container"); mask = document.createElement('div'); $(mask).addClass("mask"); $(mask).css("height",$(t).height()); $(t).append(mask); $(t+" .pgRefresh").addClass("pgLoad"); $(t+" .pgSearchInfo").html("正在检索中，请稍后..."); } /** * 置为结束检索状态 */ function overLoad(){ $(t+" .pgRefresh").removeClass("pgLoad"); $(t+" .pgSearchInfo").html('检索到 ' + totalRecord + ' 条记录，显示第 <span class="pgStartRecord">' + startRecord + '</span> 条 - 第 <span class="pgEndRecord">' + endRecord + '</span> 条记录'); //$(mask).remove(); $(mask).fadeOut("slow"); } /** * 获得远程数据 */ function getRemoteData(){ startLoad(); $.ajax( { type: "POST", url: proxyUrl, cache: false, data: {current:currentPage,perPage:perPage}, dataType: "html", timeout: 30000, success: function(msg){ getStartEnd(); loadData(msg); refresh(); overLoad(); }, error: function(){ alert("请求失败或超时，请稍后再试！"); overLoad(); return; } } ) } /** * 获得当前页开始结束记录 */ function getRemoteData(){ startLoad(); $.ajax( { type: "GET", url: proxyUrl, cache: false, data: {current:currentPage,perPage:perPage}, dataType: "json", timeout: 30000, success: function(json){ var len=json.length; var msg=""; msg="<table width=100% class='stripe' border='0' cellspacing='0 cellpadding='0><tr><th>名称</th><th>url地址</th><th>帮助id</th></tr>"; for(var i=0;i<json.length;i++) { msg+="<tr><td width=30%>"+json[i].name+"</td>"; msg+="<td width=50%>"+json[i].url+"</td>"; msg+="<td width=20%>"+json[i].helpTopicId+"</td></tr>"; } msg+="</table>"; getStartEnd(); loadData(msg); refresh(); overLoad(); }, error: function(){ alert("请求失败或超时，请稍后再试！"); overLoad(); return; } } ) } function getStartEnd(){ startRecord = (currentPage-1)*perPage+1; endRecord = Math.min(currentPage*perPage,totalRecord); } /** * 获得当前组开始结束页码 */ function getGroupStartEnd(){ if(groupSize==null) return; var groupId = Math.ceil(currentPage/groupSize); gpStartPage = (groupId-1)*groupSize+1; gpEndPage = Math.min(groupId*groupSize,totalPage); gpStartRecord = (gpStartPage-1)*perPage+1; gpEndRecord = Math.min(gpEndPage*perPage,totalRecord); } /** * 刷新数据容器 */ function loadData(msg){ valContainer.html(msg); } /** * 刷新工具栏状态 */ function refresh(){ //当前页码写入cookie $.cookie(t+'_currentPage', currentPage); $.cookie(t+'_perPage', perPage); valCurrentPage.val(currentPage);//当前页 valStartRecord.html(startRecord);//开始记录 valEndRecord.html(endRecord);//结束记录 valTotalPage.html(totalPage);//总页数 btn.unbind("mousedown",pressHandler);//取消鼠标按下的功能 btn.bind("mouseup",unpressHandler);//绑定 btn.bind("mouseout",unpressHandler); if(currentPage == totalPage){ enabled(); btnBack.bind("mousedown",pressHandler); btnNext.addClass("pgNextDisabled"); btnLast.addClass("pgLastDisabled"); }else if(currentPage == 1){ enabled(); btnGo.bind("mousedown",pressHandler); btnPrev.addClass("pgPrevDisabled"); btnFirst.addClass("pgFirstDisabled"); }else{ enabled(); btnBack.bind("mousedown",pressHandler); btnGo.bind("mousedown",pressHandler); btnNext.addClass("pgNext"); btnPrev.addClass("pgPrev"); btnFirst.addClass("pgFirst"); btnLast.addClass("pgLast"); } } /** * 移除按钮disabled状态样式 */ function enabled(){ btnNext.removeClass("pgNextDisabled"); btnPrev.removeClass("pgPrevDisabled"); btnFirst.removeClass("pgFirstDisabled"); btnLast.removeClass("pgLastDisabled"); } /** * 添加按钮按下状态样式 */ function pressHandler(){ $(this).addClass("pgPress"); } /** * 移除按钮按下状态样式 */ function unpressHandler(){ $(this).removeClass("pgPress"); } }

 

3.应用举例

<script type="text/javascript" src="../../js/jquery.js" mce_src="js/jquery.js"></script> <script type="text/javascript" src="../../js/jquerycookie.js" mce_src="js/jquerycookie.js"></script> <script type="text/javascript" src="../../js/pagination.js" mce_src="js/pagination.js"></script> <script language="javascript"> $(document).ready( function(){ $("#pagetest").pagination({totalRecord:${p},proxyUrl:'data.action'}); }); </script> </head> <body> <div style="width: 750px"> <div id="pagetest" style="border: 1px solid #DADADA;" mce_style="border: 1px solid #DADADA;"></div> <hr /> </div> </body>