每当以前看到网上类似
的分页感觉很新奇很好看，于是自己也模仿做了一个(其实是项目中要用的，嘿嘿)。。。。
其实功能做起来确实很简单，主要思想就是根据当前总页数，在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) + "' onclick='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) + "' onclick='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;' onclick='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)) + "' onclick='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) + "' onclick='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) + "' onclick='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) + "' onclick='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;' onclick='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