一．前言
使用asp.net 的Gridview控件，你可以方便地進(jìn)行數(shù)據(jù)綁定、分頁顯示，模板能讓數(shù)據(jù)顯示更加多姿多彩，但是Gridview顯示只能按記錄一行一行垂直顯示，不能橫排，它更多地用來顯示普通的數(shù)據(jù)記錄。DataList支持橫向顯示，你所要做的僅僅是把RepeatDirection設(shè)成Horizontal，RepeatColumns設(shè)置要橫向顯示的列數(shù)，當(dāng)顯示的信息涉及圖片等復(fù)雜信息時(shí)，這些功能能讓頁面顯示更加美觀和符合頁面要求。但是DataList不支持分頁的功能，當(dāng)數(shù)據(jù)量很大時(shí)這是令人煩惱的問題。下面的方法告訴你怎么自己做一個(gè)DataList分頁的功能，并且可以方便地進(jìn)行數(shù)據(jù)綁定。
二．測試數(shù)據(jù)
DataList測試數(shù)據(jù)使用文章《如何讓Gridview在沒有數(shù)據(jù)的時(shí)候顯示表頭》的數(shù)據(jù)，詳情請(qǐng)查看
http://blog.csdn.net/zhyuanshan/archive/2007/10/08/1815899.aspx
三．分頁用戶控件編寫
1．頁面設(shè)計(jì)
使用VS2005新建一個(gè)網(wǎng)站，命名為DataListPaging，新增一個(gè)用戶控件PagingDataList.ascx，在用戶控件中使用兩個(gè)div命名為divDataListBody和divPagingButtons，分別放DataList控件和分頁按鈕。
在divDataListBody中從工具欄放入一個(gè)DataList，設(shè)置RepeatColumns=”2”、RepeatDirection=”Horizontal”，數(shù)據(jù)綁定如下所示：
<div runat="server" id="divDataListBody" style="text-align:center;">
<asp:DataList ID="DataList1" runat="server" RepeatColumns="2" DataKeyField="temple_id" RepeatDirection="Horizontal">
<ItemTemplate>
temple_id:
<asp:Label ID="temple_idLabel" runat="server" Text='<%# DataBinder.(Container.DataItem, "temple_id") %>'></asp:Label><br />
temple_name:
<asp:Label ID="temple_nameLabel" runat="server" Text='<%# DataBinder.(Container.DataItem, "temple_name") %>'>
</asp:Label><br />
location:
<asp:Label ID="locationLabel" runat="server" Text='<%# DataBinder.(Container.DataItem, "location") %>'></asp:Label><br />
build_date:
<asp:Label ID="build_dateLabel" runat="server" Text='<%# DataBinder.(Container.DataItem, "build_date") %>'>
</asp:Label><br /><br />
</ItemTemplate>
</asp:DataList>
</div>
在divPagingButtons中放入4個(gè)LinkButton控件，分別為lbtnFirstPage、lbtnPreviousPage、lbtnNextPage、lbtnLastPage顯示文本分別為“第一頁”、“上一頁”、“下一頁”和“最后一頁”，CommandName屬性分別設(shè)為FirstPage、PreviousPage、NextPage、LastPage，每個(gè)按鈕重載OnCommand事件，時(shí)間處理函數(shù)都為"lbtn_Click",如下代碼所示：
<div runat="server" id="divPagingButtons" style ="text-align:center;">
<asp:LinkButton ID="lbtnFirstPage" runat="server" Font-Underline="False" CommandName="FirstPage" OnCommand="lbtn_Click">第一頁</asp:LinkButton>
<asp:LinkButton
ID="lbtnPreviousPage" runat="server" CommandName="PreviousPage" OnCommand="lbtn_Click">上一頁</asp:LinkButton>
<asp:LinkButton ID="lbtnNextPage"
runat="server" CommandName="NextPage" OnCommand="lbtn_Click">下一頁</asp:LinkButton>
<asp:LinkButton ID="lbtnLastPage" runat="server" CommandName="LastPage" OnCommand="lbtn_Click">最后一頁</asp:LinkButton> </div>
2．后臺(tái)代碼設(shè)計(jì)
控件模仿asp.net控件數(shù)據(jù)綁定的方法，首先設(shè)計(jì)一個(gè)公有的事件PageIndexChanging，當(dāng)點(diǎn)擊分頁按鈕時(shí)激活。其次有AllowPaging標(biāo)識(shí)是否允許分頁，如果不允許分頁則顯示所有數(shù)據(jù)并隱藏分頁按鈕；PageSize標(biāo)識(shí)每頁顯示的記錄數(shù)；PageIndex標(biāo)識(shí)當(dāng)前顯示的頁面；DataSource用于設(shè)置被綁定數(shù)據(jù)；調(diào)用DataBind()函數(shù)進(jìn)行數(shù)據(jù)綁定。下面列舉幾個(gè)主要的屬性代碼：
1） 分頁事件
public delegate void PagingDelegate(object sender,int NewIndex);
//分頁事件
public event PagingDelegate PageIndexChanging;
2）AllowPaging屬性
/// <summary>
/// 獲取或設(shè)置是否允許分頁
/// </summary>
public bool AllowPaging
{
get
{
object obj = ViewState["AllowPaging"];
if (obj == null)
{
//默認(rèn)沒有設(shè)置，不允許分頁
return false;
}
return Convert.ToBoolean(obj);
}
set
{
//保存屬性
ViewState["AllowPaging"] = value;
}
}
3)PageSize屬性
/// <summary>
/// 獲取或設(shè)置顯示頁數(shù)
/// </summary>
public int PageSize
{
get
{
object obj = ViewState["PageSize"];
if (obj == null)
{
return 10;
}
return Convert.ToInt32(obj);
}
set
{
ViewState["PageSize"] = value;
}
}
4)DataBind()函數(shù)設(shè)計(jì)
/// <summary>
/// 綁定數(shù)據(jù)
/// </summary>
public override void DataBind()
{
DataTable BindTable = null;
if (_DataSource != null && _DataSource.Rows.Count > 0 && AllowPaging)
{
this.TotalRecordCount = _DataSource.Rows.Count;
int StartRecord, RecordCount;
//顯示所有按鈕
SetLinkButtonVisiable(true);
if (CurrentPage * PageSize < _DataSource.Rows.Count)//記錄起始在正常范圍之內(nèi)
{
StartRecord = CurrentPage * PageSize;
if (StartRecord + PageSize < _DataSource.Rows.Count)
{
RecordCount = PageSize;
}
else//最后一頁
{
SetLinkButton(false);
RecordCount = _DataSource.Rows.Count - StartRecord;
}
}
else//記錄起始不在正常范圍之內(nèi)，CurrentPage設(shè)置為很大標(biāo)識(shí)最后一頁
{
this.TotalRecordCount = 0;
if (_DataSource.Rows.Count - PageSize < 0)//記錄數(shù)少于PageSize，既是第一頁也是最后一頁
{
StartRecord = 0;
}
else//最后一頁
{
if (_DataSource.Rows.Count % PageSize == 0)//記錄數(shù)剛好整除
{
StartRecord = _DataSource.Rows.Count - PageSize;
}
else
{
StartRecord = _DataSource.Rows.Count - (_DataSource.Rows.Count % PageSize);
}
}
RecordCount = _DataSource.Rows.Count - StartRecord;
SetLinkButton(false);
}
//顯示的是第一頁
if (StartRecord == 0)
{
SetLinkButton(true);
}
BindTable = _DataSource.Clone();
//設(shè)置需要顯示的數(shù)據(jù)
for (int i = StartRecord; i < RecordCount + StartRecord; i++)
{
DataRow row = BindTable.NewRow();
row.ItemArray = _DataSource.Rows[i].ItemArray;
BindTable.Rows.Add(row);
}
}
else
{
SetLinkButtonVisiable(false);
BindTable = _DataSource;
}
//綁定數(shù)據(jù)
this.DataList1.DataSource = BindTable;
this.DataList1.DataBind();
}
四．頁面調(diào)用用戶控件
控件的使用和asp.net控件的使用非常相似。在Default.aspx頁面中將PagingDataList.ascx頁面拖入其中，前臺(tái)代碼如下所示：
<div>
<uc2:PagingDataList id="PagingDataList1" runat="server" PageSize="3" AllowPaging="True" PageIndex="0">
</uc2:PagingDataList>
</div>
在此代碼中設(shè)定PageSize的大小為3條記錄，默認(rèn)選中的頁面為第0頁。
在后臺(tái)服務(wù)端代碼中加入從數(shù)據(jù)庫獲取數(shù)據(jù)的代碼：
/// <summary>
/// 從數(shù)據(jù)庫獲取數(shù)據(jù)
/// </summary>
private void LoadData()
{
SqlConnection cn = new SqlConnection("Data Source=BIT-ZHYUANSHAN\\SQLEXPRESS;Initial Catalog=test;User ID=sa;Password=123456");
SqlCommand cmd = new SqlCommand("select *from temple", cn);
SqlDataAdapter sda = new SqlDataAdapter(cmd);
DataTable dt = new DataTable();
sda.Fill(dt);
this.PagingDataList1.DataSource = dt;
this.PagingDataList1.DataBind();
}
在PageLoad事件中調(diào)用LoadData()，并且關(guān)聯(lián)控件的PageIndexChanging事件函數(shù)：
protected void Page_Load(object sender, EventArgs e)
{
this.PagingDataList1.PageIndexChanging += new PagingDataList.PagingDelegate(PagingDataList1_PageIndexChanging);
if (!IsPostBack)
{
LoadData();
}
}
在PageIndexChanging中重新綁定數(shù)據(jù)：
void PagingDataList1_PageIndexChanging(object sender, int NewIndex)
{
LoadData();
}
五．運(yùn)行結(jié)果
所有工作已經(jīng)完成，運(yùn)行網(wǎng)站，可以看見如下圖運(yùn)行結(jié)果：
文章出處：DIY部落(http://www.diybl.com/course/1_web/webjs/2007111/81631.html)
