2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

前言：

分頁(yè)，大伙并不陌生
也許你正用著：DataGrid/GridView自帶的分頁(yè)
也許你正用著：網(wǎng)上流傳較廣的AspnetPager分頁(yè)控件
也許你正用著：其它同事寫(xiě)的分頁(yè)控件
又也許：你正是那個(gè)寫(xiě)分頁(yè)控件的人，如果是，現(xiàn)在的你是否回頭看過(guò)自己當(dāng)初的源碼？感覺(jué)？

?

附言：

昨夜，花了兩個(gè)小時(shí)左右，把一個(gè)2007年那會(huì)寫(xiě)的分頁(yè)控件，重新優(yōu)化改造了一下：
cs代碼大小從原來(lái)的14K，縮減到4K。
原來(lái)的分頁(yè)控件源碼：點(diǎn)擊下載
在看以下正文之前，還是希望能看一下原來(lái)的分頁(yè)控件的源碼，這樣才能感嘆下改造前后的巨大落差。

?

正文：

一：概述

目前分頁(yè)控件，據(jù)個(gè)人所知的，有幾下幾種實(shí)現(xiàn)情況：

1：Post篇 [生成N個(gè)按鈕，每個(gè)按鈕點(diǎn)擊時(shí)產(chǎn)生一個(gè)Post事件引發(fā)分頁(yè)]

常見(jiàn)方式：控件實(shí)現(xiàn)復(fù)雜，內(nèi)滲雜sql語(yǔ)句。
本文方式：反射機(jī)制，與sql無(wú)關(guān)。
遙想當(dāng)年是配合了atlas的updatepanel實(shí)現(xiàn)的無(wú)刷新

?

?

2：Get篇 [生成N個(gè)鏈接，每個(gè)鏈接點(diǎn)擊時(shí)產(chǎn)生一個(gè)Get事件引發(fā)分頁(yè)]

方式一：鏈接分頁(yè)，常見(jiàn)于參數(shù)后面的page=N
方式二：鏈接分頁(yè)，Url重寫(xiě)，常見(jiàn)于url參數(shù)為?/page/N
方式三：腳本分頁(yè)，無(wú)刷新，鏈接都采用οnclick="js函數(shù)"引發(fā)ajax回調(diào)異步分頁(yè)。

?

?

二：實(shí)現(xiàn)

在具體寫(xiě)實(shí)現(xiàn)代碼之前，我們上幾張圖片看一下效果：

?

?

?

?

?

說(shuō)明：

昨夜把代碼上傳到網(wǎng)絡(luò)空間時(shí)，忘了把樣式也傳上去，早上下載后發(fā)現(xiàn)沒(méi)樣式。

所以樣式是自己臨時(shí)加上去的，大伙自己感知一下效果了就可以了。

?

?

?

下面開(kāi)始分頁(yè)控件實(shí)現(xiàn)具體步驟：

1：新建一個(gè)用戶控件：Pager

2：控件前臺(tái)html

< table? id ="pager" ?border ="0" ?cellpadding ="0" ?cellspacing ="0" ?width ="100%" >
???? < tr >
???????? < td >
???????????? < asp:LinkButton? ID ="lbtnFirstLink" ?runat ="server" ?CausesValidation ="false" ?OnClick ="ClickEvent" > 首頁(yè) </ asp:LinkButton >
???????????? < asp:LinkButton? ID ="lbtnPrevPage" ?runat ="server" ?CausesValidation ="false" ??OnClick ="ClickEvent" > 上一頁(yè) </ asp:LinkButton >
????
???????????? < asp:Repeater? ID ="rptNum" ?runat ="server" ?OnItemCommand ="rptNum_ItemCommand" >
???????????????? < ItemTemplate >
???? < asp:LinkButton? ID ="lbtnNum" ?runat ="server" ?CausesValidation ="false" ?CommandArgument ='<%#? Container.DataItem?% > '
????CssClass=' <% #?Convert.ToInt32(Container.DataItem) == PageIndex? " num_yellow " : " num_blue " %> '?Width="15"> <% #?Container.DataItem? %> </ asp:LinkButton >
???????????????? </ ItemTemplate >
???????????? </ asp:Repeater >
??????
???????????? < asp:LinkButton? ID ="lbtnNextPage" ?runat ="server" ?CausesValidation ="false" ??OnClick ="ClickEvent" > 下一頁(yè) </ asp:LinkButton >
???????????? < asp:LinkButton? ID ="lbtnLastPage" ?runat ="server" ?CausesValidation ="false" ??OnClick ="ClickEvent" > 尾頁(yè) </ asp:LinkButton >
???????????? < asp:HiddenField? ID ="hfBindName" ?runat ="server" ? />
???????? </ td >
???? </ tr >
</ table >

?

說(shuō)明：

A：用了表格布局，簡(jiǎn)單，想換div的自己改了。
B：用了五個(gè)LinkButton，其中數(shù)字的一個(gè)用Repeater循環(huán)N個(gè)數(shù)字出來(lái)
C：最后加了一個(gè)隱藏域，用于保存綁定的方法名稱。 D：數(shù)字里有兩個(gè)樣式用于為數(shù)字賦樣式，樣式到示例時(shí)再寫(xiě)出來(lái)吧 E:首頁(yè)/上一頁(yè)/下一頁(yè)/尾頁(yè)，用的點(diǎn)擊事件都是同一個(gè)函數(shù)。 F：Repeater有個(gè)OnItemCommand事件，點(diǎn)擊數(shù)字要重新綁定的。

?

3：后臺(tái)cs代碼

A：幾個(gè)屬性

???? private ? int ?_PageIndex;
???? public ? int ?PageIndex
????{
???????? get { if ?(_PageIndex? == ? 0 ){?_PageIndex? = ? 1 ;} return ?_PageIndex;}
???????? set {?_PageIndex? = ?value;}
????}????
???? private ? int ?_PageSize;
???? public ? int ?PageSize
????{
???????? get { if ?(_PageSize? == ? 0 ){_PageSize? = ? 1 ;} return ?_PageSize;}
???????? set {?_PageSize? = ?value;}
????}
???? private ? int ?_Count;
???? public ? int ?Count
????{
???????? get { return ?_Count;?}
???????? set ?{?_Count? = ?value;?}
????}
???? /// ? <summary>
???? /// ?該方法名稱修飾符為需為public
???? /// ? </summary>
???? public ? string ?BindName
????{
???????? get { return ?hfBindName.Value;}
???????? set {hfBindName.Value? = ?value;?}
????}

說(shuō)明：

PageIndex：第幾頁(yè)
PageSize：每頁(yè)多少條
Count：記錄總數(shù)
BindName：綁定的方法名稱，用于反射綁定數(shù)據(jù)

?

B：Page_Load做點(diǎn)什么

private ? void ?Page_Load( object ?sender,?System.EventArgs?e)
{
???????? if ?( ! Page.IsPostBack)
????????{
????????????BindPager(); // 綁定分頁(yè)數(shù)字
????????}
}

說(shuō)明：

第一次綁定時(shí)，界面已實(shí)現(xiàn)綁定數(shù)據(jù)，所以只需要綁定分頁(yè)的數(shù)字就行了

?

C：綁定分頁(yè)數(shù)字

public ? void ?BindPager()
{
???????? int ?pageCount? = ?(Count? % ?PageSize)? == ? 0 ? ? ?Count? / ?PageSize?:?Count? / ?PageSize? + ? 1 ; // 頁(yè)數(shù)
????????SetButtonEnable(pageCount); // 下面四個(gè)按鈕可用狀態(tài)設(shè)置
????????BindPageNum(pageCount); // 綁定循環(huán)數(shù)字
}

說(shuō)明：

1：從記錄總數(shù)和頁(yè)面大小計(jì)算出有多少頁(yè)，這個(gè)少不的。
2：根據(jù)當(dāng)頁(yè)的頁(yè)數(shù)和當(dāng)前頁(yè)面索引，設(shè)置下“首頁(yè)/下一頁(yè)/上一頁(yè)/尾頁(yè)”的可用狀態(tài)
3：根據(jù)當(dāng)前的頁(yè)數(shù)綁定一下循環(huán)的數(shù)字。

?

函數(shù)分解：SetButtonEnable [設(shè)置按鈕可用狀態(tài)及參數(shù)賦值]

private ? void ?SetButtonEnable( int ?pageCount)
{
????????lbtnFirstLink.Enabled? = ?PageIndex? != ? 1 ;
????????lbtnPrevPage.Enabled? = ?PageIndex? != ? 1 ;
????????lbtnNextPage.Enabled? = ?PageIndex? != ?pageCount;
????????lbtnLastPage.Enabled? = ?PageIndex? != ?pageCount;
????????lbtnFirstLink.CommandArgument? = ? " 1 " ;
????????lbtnPrevPage.CommandArgument? = ?(PageIndex? - ? 1 ).ToString();
????????lbtnNextPage.CommandArgument? = ?(PageIndex? + ? 1 ).ToString();
????????lbtnLastPage.CommandArgument? = ?pageCount.ToString();
}

?

說(shuō)明：

1：如果當(dāng)前頁(yè)為第1頁(yè)：首頁(yè)/上一頁(yè)狀態(tài)不可用
2：如果當(dāng)前頁(yè)為最后1頁(yè)：下一頁(yè)/尾頁(yè)狀態(tài)不可用
3：順路把幾個(gè)頁(yè)索引值賦給CommandArgument

?

函數(shù)分解：BindPageNum [綁定分頁(yè)數(shù)字]

protected ? void ?BindPageNum( int ?pageCount)
{
???????? int ?start? = ? 1 ,?end? = ? 10 ;
???????? if ?(pageCount? < ?end) // 頁(yè)數(shù)小于10
????????{
????????????end? = ?pageCount;
????????}
???????? else
????????{
????????????start? = ?(PageIndex? > ? 5 )? ? ?PageIndex? - ? 5 ?:?start;
???????????? int ?result? = ?(start? + ? 9 )? - ?pageCount; // 是否超過(guò)最后面的頁(yè)數(shù)
???????????? if ?(result? > ? 0 )
????????????{
????????????????end? = ?pageCount;
????????????????start? -= ?result; // 超過(guò)后,補(bǔ)差
????????????}
???????????? else
????????????{
????????????????end? = ?start? + ? 9 ;
????????????}
????????}
????????ReBindNum(start,?end);
}

說(shuō)明：

1：由于綁定的數(shù)字，在往后頁(yè)數(shù)點(diǎn)擊時(shí)，頁(yè)數(shù)數(shù)字需要進(jìn)行變化，所以需計(jì)算好開(kāi)始數(shù)字和結(jié)束數(shù)字
2：根據(jù)開(kāi)始數(shù)字和結(jié)束數(shù)字進(jìn)行綁定

?

函數(shù)分解：ReBindNum [循環(huán)綁定數(shù)字]

private ? void ?ReBindNum( int ?start,? int ?end)
{
???????? int []?rows? = ? new ? int [end-start+1 ];//這里之前寫(xiě)10，修正為end-start+1。
???????? int ?index? = ? 0 ;
???????? for ?( int ?i? = ?start;?i? <= ?end;?i ++ )
????????{
????????????rows[index]? = ?i;
????????????index ++ ;
????????}
????????rptNum.DataSource? = ?rows;
????????rptNum.DataBind();
?}

說(shuō)明：

1：這里用int[]數(shù)組循環(huán)數(shù)字來(lái)綁定到Repeater
2：界面綁定用 < %#?Container.DataItem? % > 方式進(jìn)行對(duì)應(yīng)

?

D：反射綁定[簡(jiǎn)潔重點(diǎn)函數(shù)]

private?void?ReBindData(string?pageIndex)
{
????????PageIndex?=?int.Parse(pageIndex);
????????object?obj?=?base.Parent?is?HtmlForm???this.Page?:?base.Parent;
????????MethodInfo?mi?=?obj.GetType().GetMethod(BindName);
????????mi.Invoke(obj,null);
????????BindPager();
}

說(shuō)明：

1：重點(diǎn)在于區(qū)分，分頁(yè)控件是直接在頁(yè)面中使用，還是在控件套分頁(yè)控件的方式使用
2：獲取綁定數(shù)據(jù)的方法，重新調(diào)用一下
3：重新綁定分布數(shù)字

?

F：首頁(yè)/上一頁(yè)/下一頁(yè)/尾頁(yè)，按鈕事件

protected?void?ClickEvent(object?sender,?EventArgs?e)
{
????????ReBindData(((LinkButton)sender).CommandArgument.ToString());
}

?

G：分頁(yè)數(shù)字，按鈕事件

protected?void?rptNum_ItemCommand(object?source,?RepeaterCommandEventArgs?e)
{
???ReBindData(e.CommandArgument.ToString());
}

?

?

三：示例代碼，和?CYQ.Data輕量數(shù)據(jù)層框架 配合使用

1：html代碼

<% @?Page?Language = " C# " ?AutoEventWireup = " true " ?CodeFile = " PagerDemo.aspx.cs " ?Inherits = " PagerDemo " ?EnableTheming = " false " ? %>
<% @?Register?Src = " UserControls/Pager.ascx " ?TagName = " Pager " ?TagPrefix = " uc1 " ? %>
<! DOCTYPE?html?PUBLIC?"-//W3C//DTD?XHTML?1.0?Transitional//EN"?"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html? xmlns ="http://www.w3.org/1999/xhtml" ? >
< head? runat ="server" >
???? < title > 路過(guò)秋天?分頁(yè)控件演示 </ title >
???? < style? type ="text/css" >
????#pager? { color : White ; }
????#pager?a { color : White ; text-decoration : none ; ? }
????.num_blue { color : White ; border : solid?1px?Blue ; text-align : center ; }
????.num_yellow { color : while ; border : solid?1px?Yellow ; ?text-align : center ; }
???? </ style >
</ head >
< body? style ="background-color:Black;color:White;" >
???? < form? id ="form1" ?runat ="server" >
???? < div >< asp:GridView? ID ="gvUsers" ?runat ="server" ></ asp:GridView >< br? />
???????? < uc1:Pager? ID ="Pager1" ?runat ="server" ? />
???? </ div >
???? </ form >
</ body >
</ html >

?

2：后臺(tái)代碼

protected ? void ?Page_Load( object ?sender,?EventArgs?e)
{
???????? if ?( ! IsPostBack)
????????{
????????????LoadData();
????????}
}
public ? void ?LoadData()
{
???????? int ?count;
????????MAction?action? = ? new ?MAction(TableNames.Users);
????????MDataTable?mTable? = ?action.Select(Pager1.PageIndex,?Pager1.PageSize,? "" ,? out ?count);
????????action.Close();
????????gvUsers.DataSource? = ?mTable;
????????gvUsers.DataBind();
????????Pager1.BindName? = ? " LoadData " ;
????????Pager1.Count? = ?count;
}

?

說(shuō)明：

1：BindName為綁定數(shù)據(jù)的方法名稱，該方法名稱的修飾符號(hào)需為public
2:?默認(rèn)的分頁(yè)P(yáng)ageSize可自行修改默認(rèn)值
3:?前面html也可設(shè)置為: < uc1:Pager? ID ="Pager1" ?runat ="server" ?PageSize ="20" ? />

?

3:最終效果

?

如正文一開(kāi)始發(fā)的五張圖片一致

?

?

結(jié)言：

以上教程中，以包含所有代碼，包括前后臺(tái)，所以不另提供打包下載。
有興趣的來(lái)客歡迎討論留言。

?

源碼下載地址：http://www.cyqdata.com/download/article-detail-28683

轉(zhuǎn)載于:https://my.oschina.net/secyaher/blog/274250

超強(qiáng)干貨來(lái)襲 云風(fēng)專(zhuān)訪：近40年碼齡，通宵達(dá)旦的技術(shù)人生

總結(jié)

以上是生活随笔為你收集整理的分页控件 实战 Post篇的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。