学步园

本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/lirong800/archive/2008/04/23/2316836.aspx

1.css样式单

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

2.扩展的jQuery插件

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

3.应用举例

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