纯手写分页控件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） 其他情况，则显示两边有省略号的页码

 

 

恭喜，现在你已经大功告成了！