Repeater和AspnetPager实现分页显示及固定表头

于 2016-08-06 19:12:59 发布
阅读量3.9k 收藏 6
点赞数 4
分类专栏： .Net 文章标签： 分页 repeater aspnetpage 冻结表头
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/xiaouncle/article/details/52131081
版权

要达到Repeater和AspnetPager实现分页显示的效果，分为两步：第一步是实现使用Repeater显示数据（不分页），第二步是用AspnetPager实现分页显示效果。

第一步、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>

第四步、显示序号（从1开始）

利用Container.ItemIndex就可以生成从1开始的序号，很简单的，示例代码如下：

<ItemTemplate>
    <tr style="cursor: hand; background-color: #FFFFFF">
        <td align="center">
            <%#Container.ItemIndex+1%>
        </td>
    </tr>
</ItemTemplate>

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

注意：

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

评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

changuncle

若恰好帮到您，请随心打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值