每当以前看到网上类似的分页感觉很新奇很好看，于是自己也模仿做了一个(其实是项目中要用的，嘿嘿)。。。。
其实功能做起来确实很简单，主要思想就是根据当前总页数，在js中输出类似<a href='xxx/xxx.aspx?page=current&condition=condition'>current</a>的标签，
以下是css代码段，用于设置分页的样式：
代码 < style type = " text/css " > #setpage a:link, #setpage a:visited, #setpage a:hover, .current, #info { border: 1px solid #DDD; background: #F2F2F2; display: inline - block; margin: 1px; text - decoration: none; font - size: 12px; width: 15px; height: 15px; text - align: center; line - height: 15px; color: #AAA; padding: 1px 2px; } #setpage a:hover { border: 1px solid #E5E5E5; background: #F9F9F9; } .current { border: 1px solid #83E7E4; background: #FFFFDF; margin: 1px; color: #27CBC7; } #info { width: auto; } </ style >
JS部分，其主要是用于输出HTML中的A标签，并增加参数。 代码 < script type = " text/javascript " > var totalpage, pagesize, cpage, count, curcount, outstr, pageurl; // 初始化 cpage = 1 ; // 总页数 totalpage = 0 ; // 显示多少分页 pagesize = 10 ; // 输出的HTML标签 outstr = "" ; // 页面定位 function gotopage(target) { cpage = target; // 把页面计数定位到第几页 setpage(); } function setpage() { /// 页面分页的URL设置 totalpage = parseInt(document.getElementById( " <%=hf_Page.ClientID %> " ).value); // 获取肖前页索引 cpage = parseInt(document.getElementById( " <%=hf_Current.ClientID %> " ).value); // 页面跳转URL pageurl = document.getElementById( " <%=hf_Condition.ClientID %> " ).value; // .replace("page", cpage); if (totalpage == 0 ) document.getElementById( " setpage " ).style.display = " none " ; else { if (totalpage <= 10 ) { // 总页数小于十页 for (count = 1 ; count <= totalpage; count ++ ) { if (count != cpage) { outstr = outstr + " <a href='<%=Request.ApplicationPath %>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ; } else { outstr = outstr + " <span class='current'> " + count + " </span> " ; } } } if (totalpage > 10 ) { // 总页数大于十页 if (parseInt((cpage - 1 ) / 10 ) == 0 ) { for (count = 1 ; count <= 10 ; count ++ ) { if (count != cpage) { outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ; } else { outstr = outstr + " <span class='current'> " + count + " </span> " ; } } outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " 'style='width:50px;' οnclick='gotopage( " + count + " )'> 下一页 </a> " ; } else if (parseInt((cpage - 1 ) / 10 ) == parseInt(totalpage / 10 )) { outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , (parseInt((cpage - 1 ) / 10 ) * 10 )) + " ' οnclick='gotopage( " + (parseInt((cpage - 1 ) / 10 ) * 10 ) + " )'>previous</a> " ; for (count = parseInt(totalpage / 10 ) * 10 + 1 ; count <= totalpage; count ++ ) { if (count != cpage) { outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ; } else { outstr = outstr + " <span class='current'> " + count + " </span> " ; } } } else { outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , (parseInt(cpage / 10 , 0 )) * 10 ) + " ' οnclick='gotopage( " + (parseInt((cpage - 1 ) / 10 ) * 10 ) + " )'>previous</a> " ; for (count = parseInt((cpage - 1 ) / 10 ) * 10 + 1 ; count <= parseInt((cpage - 1 ) / 10 ) * 10 + 10 ; count ++ ) { if (count != cpage) { outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' οnclick='gotopage( " + count + " )'> " + count + " </a> " ; } else { outstr = outstr + " <span class='current'> " + count + " </span> " ; } } outstr = outstr + " <a href='<%=Request.ApplicationPath%>/ " + pageurl.replace( " page " , count) + " ' style='width:50px;' οnclick='gotopage( " + count + " )'> 下一页 </a> " ; } } document.getElementById( " setpage " ).innerHTML = " <div id='setpage'><span id='info'>共 " + totalpage + " 页|第 " + cpage + " 页<\/span> " + outstr + " <\/div> " ; outstr = "" ; } } setpage(); // 调用分页 </ script >
页面HTML部分：
代码 < asp:HiddenField ID = " hf_Page " runat = " server " Value = " 0 " /> < asp:HiddenField ID = " hf_Condition " runat = " server " Value = "" /> < asp:HiddenField ID = " hf_Current " runat = " server " Value = " 1 " /> < div id = " setpage " style = " margin-top: 20px; " > 这里用来放置分页的页码序呈 </ div >
后台代码部分：
代码 // 查询条件 private string condition { get { if (ViewState[ " Condi " ] == null ) return "" ; else return ViewState[ " Condi " ].ToString(); } } protected void Page_Load( object sender, EventArgs e) { if ( ! IsPostBack) { int current = 0 ; if (Request.QueryString[ " page " ] != null ) current = Convert.ToInt32(Request.QueryString[ " page " ]); else current = 1 ; LoadContents(current); } } private void LoadContents( int current) { this .hf_Condition.Value = string .Format( " FindFood.aspx?p=page&type={0} " , " 360102 " ); ViewState[ " Condi " ] = " AND areaId='360102' " ; // 获得展示信息列表，拼接成HTML输出到前台的div中 string content = RestaurantManager.Instance().RestaurantList(current, " view_TaxisRestaurantListByTime " , condition); // 获得总共的数据行数 int counter = RestaurantManager.Instance().RestaurantCount( " areaId='360102' " ); ViewState[ " Counter " ] = counter; // 根据每页显示的数据条数进行计算一共需要多少页 if (counter / 20 == 0 ) this .hf_Page.Value = (counter / 20 ).ToString(); else this .hf_Page.Value = (counter / 20 + 1 ).ToString(); // 标识当前页索引 this .hf_Current.Value = current.ToString(); if ( string .IsNullOrEmpty(content)) this .contents.InnerHtml = " <font size=\ " 12px;\ " ><b>没有要显示的数据</b></font> " ; else this .contents.InnerHtml = content; }
转载于:https://www.cnblogs.com/netDream/archive/2010/11/12/js_pager.html
相关资源：js无刷新分页代码