Asp.net中虽然用DataPager配合ListView可以实现分页显示,但是有时候由于开发环境等问题不能用到DataPager控件,那么自己手工写一个分页控件就很有必要了,当然,最重要的是通用性。
首先,来看一下我的分页控件的显示效果:
简单说明:红底色的为当前页,白底红字的是选择新的页,共有1236页,默认从第1页开始显示,分页行长度含“……”共11格,有全显示,单边省略和两边省略三种模式。
当你仔细看完上图的显示效果并理解其分页的相应变化后,我们就要开始制作这个分页了:)
第一步)获取数据结果集,整理分页SQL
首先,你肯定会由一句SQL语句或者一个存储过程来获取动态的结果集,我们这里用SQL语句来举例:
select * from Table order by a1,a2
【重要提示】你必须要对其order by中所用到的字段建立索引,否则会大幅影响其SQL语句的效能
然后,我们用分页效能最高的row_number() over写出这句分页SQL
select * from ( select row_number() over(order by a1,a2) rowno from Table ) t where rowno between @rowno1 and @rowno2
第二步)设计分页控件的样式
我们先在页面上用HTML+CSS做出一个模拟效果的分页:
<center id="pager"> <a class="pagerBtn">上一页</a> <a class="pagerCurrent">1</a> <a class="pagerBtnNum">2</a> <a class="pagerBtnNum">3</a> <span class="pagerNone">……</span> <a class="pagerBtn">下一页</a> </center>
CSS样式如下,大家可以根据自己的需要调整期大小或颜色:
/* 分页 */ #pager{font:13px Tahoma,SimSun,Arial; color:#666} #pager a{text-decoration:none;} #pager a,#pager span{ margin:0px 5px;} #pager .pagerBtn,.pagerBtnNum{border:#ccc 1px solid;background:#fff;padding:1px 5px;cursor:pointer} #pager .pagerBtn:hover{color:#FD6D01} #pager .pagerBtnNum:hover{color:#FD6D01;border-color:#FD6D01;} #pager .pagerBtnClick{border:#FD6D01 1px solid;background:#fff;padding:1px 5px;color:#FD6D01;} #pager .pagerCurrent{border:#FD6D01 1px solid;padding:1px 5px;color:#FD6D01;background:#FFEDE1;font-weight:bold;} #pager .pagerNone{font-family:宋体;}
以上两步写完后测试一下看看,调整完自己喜爱的风格后,我们要在页面放一个Literal控件,然后在后台拼接以上的HTML代码
第三步)整理需要的方法和JS
在做之前先整理一下显示分页需要的三种情况:
1)显示……
private string PagerNone() { return "<span class='pagerNone'>……</span>"; }
2)显示单个页码(参数为第i页)
private string PagerChild(int i) { return "<a class='pagerBtnNum' οnclick=\"urlParamChange('p'," + i + ")\">" + i + "</a>"; }
3)显示循环多个循环页码(参数为当前页index,开始页str,结束页end),如果不是当前页,则显示可点击的页码。点击后会把页码放到URL的参数中,然后刷新当前页显示新的分页数据。
private string PagerChilds(int index, int str, int end) { StringBuilder sb = new StringBuilder(); for (int i = str; i <= end; i++) { if (i == index) sb.Append("<a class='pagerCurrent'>" + i + "</a>"); else sb.Append("<a class='pagerBtnNum' οnclick=\"this.className='pagerBtnClick';urlParamChange('p'," + i + ")\">" + i + "</a>"); } return sb.ToString(); }
页面加入以下JS代码:
//替换URL参数值 function urlParamChange(par,par_value) { var url = window.location.href; var parTxt = par + '=' + par_value; var re = eval('/('+ par+'=)([^&]*)/gi');// '/\\'+par+'=[^&]*/' if(url.match(re))//含参数 url = url.replace(re,parTxt); else//不含参数 url = url+'&'+ parTxt; this.location = url; }
第四步)后台拼接分页HTML并显示在前台
接下来是最核心的分页逻辑部分了,先看一下需要哪些设定值:
int pageSize = 10; //每页行数 int rowBeg = 1; //默认开始行号 int rowEnd = pageSize; //默认结束行号 string url_p = Request.QueryString["p"];//页码 if (url_p != null) { rowBeg = (Convert.ToInt32(url_p) - 1) * pageSize + 1; rowEnd = Convert.ToInt32(url_p) * pageSize; }
把SQL放入Datatable类型的dt中:
int rowCount = dt.Rows.Count;//数据行数 if (dt != null && rowCount > 0) { int pageCount = Convert.ToInt32(Math.Ceiling(rowCount * 1.0 / pageSize)); //总页数 int pageMaxShow = 11;//最多显示页数,最小为7页,奇数最佳 if (pageCount > 1) { int pageIndex = (url_p == null ? 1 : Convert.ToInt32(url_p)); StringBuilder sbPager = new StringBuilder(); sbPager.Append("<center id='pager'>"); //显示全部 if (pageCount <= pageMaxShow) sbPager.Append(PagerChilds(pageIndex, 1, pageMaxShow)); //省略右边 else if (pageIndex <= pageMaxShow - 3) { sbPager.Append(PagerChilds(pageIndex, 1, pageMaxShow - 2)); sbPager.Append(PagerNone()); sbPager.Append(PagerChild(pageCount)); } //省略左边 else if (pageIndex > pageCount - pageMaxShow + 3) { sbPager.Append(PagerChild(1)); sbPager.Append(PagerNone()); sbPager.Append(PagerChilds(pageIndex, pageCount - pageMaxShow + 3, pageCount)); } //省略两边 else { sbPager.Append(PagerChild(1)); sbPager.Append(PagerNone()); sbPager.Append(PagerChilds(pageIndex, pageIndex - (pageMaxShow - 5) / 2, pageIndex + (pageMaxShow - 5) / 2)); sbPager.Append(PagerNone()); sbPager.Append(PagerChild(pageCount)); } sbPager.Append("</center>"); this.lPager.Text = sbPager.ToString(); }
以上代码简单的说,分页显示一共有四种情况:
1) 当总页数<=最大显示页数:显示全部页码
2) 当当前页<=最大显示页数-3:显示右边有省略号的页码(-3是因为右边有最后一页,省略号,省略号左边的页码)
3) 当当前页>总页数-最大显示页数+3:显示左边有省略号的页码(+3是因为左边有第一页,省略号,省略号右边的页码)
4) 其他情况,则显示两边有省略号的页码
恭喜,现在你已经大功告成了!