純手寫分頁控制項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