首页 > 代码库 > 纯手写分页控件CSS+JS+SQL
纯手写分页控件CSS+JS+SQL
Asp.net中虽然用DataPager配合ListView可以实现分页显示，但是有时候由于开发环境等问题不能用到DataPager控件，那么自己手工写一个分页控件就很有必要了，当然，最重要的是通用性。
首先，来看一下我的分页控件的显示效果：
简单说明：红底色的为当前页，白底红字的是选择新的页，共有1236页，默认从第1页开始显示，分页行长度含“……”共11格，有全显示，单边省略和两边省略三种模式。
当你仔细看完上图的显示效果并理解其分页的相应变化后，我们就要开始制作这个分页了：）
第一步）获取数据结果集，整理分页ＳＱＬ
首先，你肯定会由一句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‘ onclick=\"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‘ onclick=\"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 - 4) / 2, pageIndex + (pageMaxShow - 4) / 2)); sbPager.Append(PagerNone()); sbPager.Append(PagerChild(pageCount)); } sbPager.Append("</center>"); this.lPager.Text = sbPager.ToString();}
以上代码简单的说，分页显示一共有四种情况：
1） 当总页数<=最大显示页数：显示全部页码
2） 当当前页<=最大显示页数-3：显示右边有省略号的页码（-3是因为右边有最后一页，省略号，省略号左边的页码）
3） 当当前页>总页数-最大显示页数+3：显示左边有省略号的页码（+3是因为左边有第一页，省略号，省略号右边的页码）
4） 其他情况，则显示两边有省略号的页码
恭喜，现在你已经大功告成了！
纯手写分页控件CSS+JS+SQL