第一步、Repeater绑定数据

使用Repeater显示数据时，有时需要自定义表头格式，有不了解的同学请先熟悉这一部分，在我的例子中也设置了一些表头格式。 
Repeater代码如下：

<asp:Repeater ID="Repeater1" runat="server">    <HeaderTemplate>        <%--注意：<table>标签的另一半在<FooterTemplate/>中，id值可用来选择对哪个<table/>的表头进行固定--%>        <table id="userInfo">            <%--设置表头--%>            <thead>            <tr>                <td rowspan="2">                    <input type="checkbox" name="checkboxall" onclick="CheckAll(this);" />                    选中                </td>                <td colspan="3">基本信息</td>                <td rowspan="2">身份证</td>                <td rowspan="2">手机号</td>                <td rowspan="2">住址</td>                <td rowspan="2">操作</td>            </tr>            <tr>                <td>姓名</td>                <td>性别</td>                <td>年龄</td>            </tr>            </thead>            <%--注意：<tbody>标签的另一半在<FooterTemplate/>中--%>            <tbody id="tbdaylist">    </HeaderTemplate>    <ItemTemplate>        <tr>            <td style="white-space: nowrap;text-align: center">                <asp:Literal ID="operatorLabel" runat="server">                </asp:Literal>            </td>            <td style="white-space: nowrap;text-align: center">                <%#Eval("UserName") %>            </td>            <td style="white-space: nowrap;text-align: center">                <%#Eval("Gender") %>            </td>            <td style="white-space: nowrap;text-align: center">                <%#Eval("Age") %>            </td>            <td style="white-space: nowrap;text-align: center">                <%#Eval("IDCard") %>            </td>            <td style="white-space: nowrap;text-align: center">                <%#Eval("PhoneUnmber") %>            </td>            <td style="white-space: nowrap;text-align: center">                <%#Eval("StuAddress") %>            </td>            //通过CommandArgument传递表的主键            <td style="white-space: nowrap;text-align: center">                <asp:LinkButton id="lnkDelete" CommandName="Delete" Text="删除" Runat="server" CommandArgument='<%#Eval("StudentId")%>'/>            </td>        </tr>    </ItemTemplate>    <FooterTemplate>        </tbody></table>    </FooterTemplate></asp:Repeater>

CSS及jquery代码如下：

<style type="text/css">    body {        font-family: "微软雅黑";    }    #userInfo {        /*cellspacing属性在html5中已经废弃*/        /*cellspacing:0;的效果等同于border-collapse: collapse;*/        width: 100%;        text-align: center;        border-collapse: collapse;    }    #userInfo td {        border: 1px solid black;    }    #userInfo thead {        background-color: #FFffcc;    }</style><script type="text/javascript">    // dom元素加载完毕    $(function () {        //获取id为tbodylist的元素,然后寻找他下面的索引值是偶数的tr元素,改变它的背景色.        $('#tbodylist tr:even').css("backgroundColor", "#ffffff");        //tr:odd为奇数行，索引从0开始，0算偶数。        $('#tbodylist tr:odd').css("backgroundColor", "#CCFFFF");    })    function CheckAll(obj) {        //如果表头的checkbox选中        if ($(obj).prop("checked")) {            //则所有name="checkBoxItem"的checkbox都选中                $("input[name='checkBoxItem']").prop("checked", true);         }        //如果表头的checkbox不选中        else {            //则所有name="checkBoxItem"的checkbox都不选中                $("input[name='checkBoxItem']").prop("checked", false);        }    }    function FindCheckInfo() {        var checkedList = "";        //获取所有type="checkbox"并且name="checkBoxItem"的控件的值        $("input[type='checkbox'][name='checkBoxItem']:checked").each(function () {            checkedList += $(this).val() + ",";        });        alert("checkedList=" + checkedList);    }</script>

后台绑定Repeater代码如下：

public void BindData() {    string connString = SqlHelper.ConnString;    SqlConnection conn = new SqlConnection(connString);    conn.Open();    string sql = "select UserName, Gender, Age, IDCard, PhoneUnmber, StuAddress from dbo.Students";    SqlCommand cmd = new SqlCommand(sql, conn);    SqlDataAdapter adapter = new SqlDataAdapter(cmd);    DataSet ds = new DataSet();    adapter.Fill(ds, "userInfo");    Repeater1.DataSource = ds.Tables[0];    Repeater1.DataBind();    adapter.Dispose();    cmd.Dispose();    conn.Close(); }protected void Repeater1_ItemDataBound(object sender, RepeaterItemEventArgs e) {    //此处必须做判断，不然下面获取数据会报没有实例化或者为空        if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)    {        Literal operatorLabel = e.Item.FindControl("operatorLabel") as Literal;        //获取本行数据项        DataRowView row = e.Item.DataItem as DataRowView;        operatorLabel.Text = string.Format("<input type=\"checkbox\" name=\"checkBoxItem\" value=\"{0}\"/>", row["StudentId"].ToString());        operatorLabel.Text += "&nbsp;&nbsp;其他信息";    } }protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e) {    switch (e.CommandName)    {        case "Delete": DeleteInfo(e.CommandArgument.ToString()); break;    } }private void DeleteInfo(string studentId) {    string connString = SqlHelper.ConnString;    SqlConnection conn = new SqlConnection(connString);    conn.Open();    string sql = "delete from dbo.Students where StudentId = " + studentId;    SqlCommand cmd = new SqlCommand(sql, conn);    int num = cmd.ExecuteNonQuery();    cmd.Dispose();    conn.Close();    BindDataByPage(); }

第二步、添加AspnetPager控件

使用AspnetPager分页显示时，要能根据当前页索引值和每页条目数获取到数据库中的数据，如果不熟的同学，请先熟悉下这部分内容。 
首先，引用AspNetPager.dll； 
其次，在前台页面加上注册AspnetPager控件。 
注册方式如下： 
<%@ Register Assembly=”AspNetPager” Namespace=”Wuqi.Webdiyer” TagPrefix=”webdiyer” %>

AspnetPager部分属性解释如下： 
AlwaysShow=”True”， 总是显示分页控件 
ShowPageIndexBox=”Always”，总是显示转到第几页的页数输入框 
TextBeforePageIndexBox=”转到” ，页数输入框之前的文字 
TextAfterPageIndexBox=”页”，页数输入框之后的文字 
CustomInfoHTML=”共%RecordCount%条，第%CurrentPageIndex%页 /共%PageCount% 页” ，用户自定义显示信息 
ShowCustomInfoSection=”Left”，用户自定义信息显示位置 
CustomInfoTextAlign=”Left”，用户自定义信息对其方式

AspnetPager控件代码如下：

<table style="width:100%;border-collapse:collapse;text-align:left">    <tr>        <td style="text-align:left">            <webdiyer:AspNetPager runat="server" ID="aspNetPager1" CssClass="paginator" CurrentPageButtonClass="cpb"                            FirstPageText="首页" LastPageText="尾页" PrevPageText="上一页" NextPageText="下一页"                              PageSize="5" PagingButtonSpacing="10px" AlwaysShow="True" ShowPageIndexBox="Always"                            TextBeforePageIndexBox="转到" TextAfterPageIndexBox="页" SubmitButtonText="Go"                            CustomInfoHTML="共%RecordCount%条，第%CurrentPageIndex%页 /共%PageCount% 页" ShowCustomInfoSection="Left"                            CustomInfoSectionWidth="15%" CustomInfoTextAlign="Left" UrlPaging="False" OnPageChanged="aspNetPager1_PageChanged">            </webdiyer:AspNetPager>        </td>        <td style="text-align:left">            每页显示记录数:            <asp:DropDownList ID="ddl_PageSize" runat="server" OnSelectedIndexChanged="ddl_PageSize_SelectedIndexChanged" AutoPostBack="True">                <asp:ListItem Text="5" Value="5"></asp:ListItem>                <asp:ListItem Text="10" Value="10"></asp:ListItem>                <asp:ListItem Text="15" Value="15"></asp:ListItem>                <asp:ListItem Text="20" Value="20"></asp:ListItem>                <asp:ListItem Text="30" Value="30"></asp:ListItem>            </asp:DropDownList>        </td>    </tr></table>

后台分页绑定Repeater代码如下：

public void BindDataByPage() {    string connString = SqlHelper.ConnString;    SqlConnection conn = new SqlConnection(connString);    conn.Open();    string currentPageSql = string.Format("select top {0} * from (select *,ROW_NUMBER()over(order by StudentId)as RowNumber from dbo.Students)a where RowNumber>{1}", aspNetPager1.PageSize, (aspNetPager1.CurrentPageIndex - 1) * aspNetPager1.PageSize);    string countSql = "select count(*) from dbo.Students";    SqlCommand cmd = new SqlCommand(currentPageSql, conn);    SqlDataAdapter adapter = new SqlDataAdapter(cmd);    DataSet ds=new DataSet();    adapter.Fill(ds, "userInfo");    Repeater1.DataSource = ds.Tables[0];    Repeater1.DataBind();    cmd = new SqlCommand(countSql, conn);    adapter = new SqlDataAdapter(cmd);    adapter.Fill(ds, "count");    aspNetPager1.RecordCount = (int)ds.Tables[1].Rows[0][0];    adapter.Dispose();    cmd.Dispose();    conn.Close();}

第三步、设置固定表头

<script src="../../Scripts/freezetable.js" type="text/javascript"></script><script type="text/javascript" language="javascript">    $().ready(function () {        var wh = document.documentElement.clientWidth;        //$("#userInfo")指的是id="userInfo"的<table/>        $("#userInfo").width(wh);        var h = document.documentElement.clientHeight - 200;        //alert(wh);        //alert(h);        //默认固定表头，设置固定几列        FixTable("datas", 5, wh, h, "scroll", "scroll");    });</script>

jQuery文件下载： 
jquery-1.4.1.min.js文件下载地址：http://download.csdn.net/detail/xiaouncle/9585180 
freezetable.js文件下载地址：http://download.csdn.net/detail/xiaouncle/9598676

注意：

当AspnetPager的当前页索引值和每页显示条目数改变时，都要重新对Repeater控件进行数据绑定。 
<%#Eval(“”)%> 
e.Item.ItemType、e.Item.DataItem、e.Item.FindControl