AspNetPager+Repeater+SoCanCode实现分页功能

关注

原创最新推荐文章于 2026-03-08 09:20:35 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

Repeater+AspNetPager利用存储过程实现分页因为ASP.Net自带的GridView分页数据多的话会出现卡顿的情况，很多新手苦恼的一个利用Repeater+AspNetPager+存储过程实现分页，其实流程很固定，自己复制先来代码，组合一下运行便可立即下载

aspx

 <table class="msgtable" cellpadding="0" cellspacing="0">
     <tr>
        <th class="tb_width6"><input name="" type="checkbox" value="" onclick="SetCheckBoxBg('CheckID',this);"/></th>
        <th class="tb_width6">编号</th>
        <th class="tb_width20">帐号</th>
        <th class="tb_width10">真实姓名</th>
        <th class="tb_width10">QQ</th>
        <th class="tb_width15">角色组</th>
        <th class="tb_width10">状态/设置状态</th>
        <th class="tb_width15">创建时间</th>
        <th >操作</th>
      </tr>
       <asp:Repeater runat="server" ID="rp_userlist">
        <ItemTemplate>
            <tr>
                <td><input name="CheckID" type="checkbox" value="<%# Eval("User_Id") %>" /></td>
                <td><%# Eval("User_Id")%></td>
                <td><a href='UserEdit.aspx?id=<%# Eval("User_Id") %>'><%# Eval("User_UserName") %></a></td>
                <td><%# Eval("User_TrueName") %></td>
                <td><a target="_blank" href='http://wpa.qq.com/msgrd?v=3&uin=<%# Eval("User_QQ") %>&site=qq&menu=yes'><img border="0" src='http://wpa.qq.com/pa?p=2:<%# Eval("User_QQ") %>:15 &r=0.5365287116728723' alt="点击这里给我发消息" title="点击这里给我发消息"></a></td>
                <td><%# Eval("Role_Name") %></td>
                <td>
                 <input title="<%#  Convert.ToBoolean(Eval("User_State")) ? "设置冻结" :  "解除冻结"%>" onclick="SetState(<%# Eval("User_Id") %>,'<%# Eval("User_State") %>')" src=' <%#  Convert.ToBoolean(Eval("User_State")) ? "../Images/groupicons/admin.gif" :  "../Images/groupicons/guest.gif"%>' type="image"/>
               </td>
               <td><%# Eval("User_CreateTime") %></td>
                <td>   <input title="编辑" onclick="UserEdit(<%# Eval("User_Id") %>)" src="../Images/admin/1.gif" type="image">
                   <input title="删除" onclick="UserDel(<%# Eval("User_Id") %>)" src="../Images/admin/5.gif" type="image"></td>
            </tr>
        </ItemTemplate>
       </asp:Repeater>
     
    </table>

分页代码

 <div class="tb_width100 textcenter clear">
      <webdiyer:AspNetPager ID="AspNetPager1" runat="server" CssClass="paginator" 
        CurrentPageButtonClass="cpb"  FirstPageText="首页" LastPageText="尾页" 
        NextPageText="后页" PrevPageText="前页"
        onpagechanging="AspNetPager1_PageChanging" PageIndexBoxType="DropDownList" 
        ShowPageIndexBox="Auto" SubmitButtonText="Go" TextAfterPageIndexBox="页" 
        TextBeforePageIndexBox="转到">
    </webdiyer:AspNetPager>
    </div>

后台代码

using System;
using System.Collections.Generic;

using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
namespace Web.Admin.UserDetail
{
    public partial class UserList : WebUI.BaseAdminPage
    {
        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {
                BindUserList();
            }
        }
        /// <summary>
        /// 绑定
        /// </summary>
        private void BindUserList()
        {
            PageInfo pi = new PageInfo();
            pi.PageSize = 10;
            pi.PageIndex = AspNetPager1.CurrentPageIndex;
            PageList<Model.z_User> lst = new BLL.z_User().GetPageList(pi);
            rp_userlist.DataSource = lst.List;
            rp_userlist.DataBind();
            AspNetPager1.RecordCount = pi.RecordCount;
        }

        protected void AspNetPager1_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
        {
            AspNetPager1.CurrentPageIndex = e.NewPageIndex;
            BindUserList();
        }
      
    }
}

样式：

/*--全局设置 *--*/
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,blockquote,th,td,iframe,hr{margin:0;padding:0;}
body{font-size:12px;color:#333;}
html{font-size:12px;color:#333;}
ul{list-style:none;}
.clear{clear:both;}
img {  border:none; }
ul { margin:0; list-style:none; }
ol { margin:0 0 0 25px; list-style:decimal; }
p { margin:10px 0; }
/* links */
a { color: #333; text-decoration: none }

a.visited{color:Red}
a:focus{ text-decoration:none } 
a:hover { text-decoration: none } 
a.white:link {color:#FFFFFF;}
a.white:visited {color:#FFFFFF;}
a.white:hover {color:#FFFFFF;}
a.gray:link {color:#424242;}
a.gray:visited {color:#424242;}
a.gray:hover {color:#FF6600;}
a.gray:active {color:#424242;}
a.black:link {color:#000;}
a.black:visited {color:#000;}
a.black:hover {color:#FF6600;}
a.black:active {color:#000;}
a.blue:link {color:#266EBA;}
a.blue:visited {color:#266EBA;}
a.blue:hover {color:#FF6600;}
a.red:link {color:#CF3000;}
a.red:visited {color:#CF3000;}
a.red:hover {color:#FF0000;}
a.org:link {color:#FF6600;}
a.org:visited {color:#FF6600;}
a.org:hover {color:#FF0000;}
/*color*/
.cred{color:Red}
.cgreen{color:#009900}
.cblue{color:#065fb9}
.fl{float:left;}
.fr{float:right;} 
.textright{text-align:right}
.textleft{text-align:left}
.textcenter{ text-align:center}
.bold{ font-weight:bold;}
/*form*/
.txt{border:#8aa3be solid 1px; height:20px; line-height:20px;}
.txtfocus{ border:#afafaf solid 1px; background-color:#ffffdb; height:20px; line-height:20px;}
.txtNextTdColor{ color:#660000}
.txtNextTdThis{color:#A9A9A9}
.fromselect{border:#8aa3be solid 1px; }
/*table*/
.ftable{}
.ftable th{	padding:0.5em;	font-weight:700;}
.ftable td{	padding:0.4em; height:35px;	border-bottom:1px solid #F3F3F3;}
.ftable th{background:url(table_th_bg.gif) repeat-x bottom;}
.msgtable{	border-top:1px solid #EDECFF;border-bottom:1px solid #EDECFF; width:100%; text-align:center}
.msgtable th{	height:26px;border-left:1px #edecff solid;	font-weight:700;background: url("../Images/table_th_bg.gif") repeat-x scroll center bottom transparent}
.msgtable td{	padding:0.4em;	border-bottom:1px solid #F3F3F3; }
.msgtable td a{color:#005EAC}
.msgtable td a:hover{color:#FF5500}
.msgtableNext{	border-top:1px solid #EDECFF; width:100%; text-align:center}
.msgtableNext th{	height:20px;border-left:1px #edecff solid;	font-weight:700;background: url("../Images/table_th_bg.gif") repeat-x scroll center bottom transparent}
.msgtableNext td{ border-bottom:0px;}
.msgtableNext td a{color:#005EAC}
.msgtableNext td a:hover{color:#FF5500}
.tr_bg{background:#F9F9F9;}
.tr_bgNext{background:#fff;}
.tr_hover_col{background:#EAEAEA;}

/*==========团购===========*/
.tg_contant{ text-align:left;padding:15px 0px 0px 50px;}
.tg_contant .tg2{margin-top:15px;}
.tg_contant .tg2 .tg_btn{width:50px;height:18px;}
.tg_contant .tg3 .tg_btn3{width:100px;height:18px;}



/*right frame*/
/*上*/
.page_title {font-size:12px; background:url(../Images/page_title_bg.jpg) repeat-x; height:32px; line-height:32px; text-align:left; padding-left:10px;padding-top:5px;}
.page_title a{ text-decoration:none;}
.page_title .tnew{ float:left; width:75px; height:26px;  line-height:26px;}
.page_title .nbg{background-image:url(../images/page_title_meu.gif); background-repeat:no-repeat; background-position:0px 0px;}
.page_title .tnew1{ float:left; width:85px; height:26px;  line-height:26px;}
.page_title .nbg1{background-image:url(../images/page_title_meu1.gif); background-repeat:no-repeat; background-position:0px 0px;}
.page_title .tnew span {float:left; margin-left:5px;}
.page_title .tnew img {float:left; margin-left:6px; margin-top:5px;margin-right:5px;}
.page_title .tnew1 span {float:left; margin-left:5px;}
.page_title .tnew1 img {float:left; margin-left:6px; margin-top:5px;margin-right:5px;}
.page_title2 {    border-bottom: 1px solid #DDDDDD;    color: #113753;    font-size: 14px;    font-weight: bold;    height: 34px;    line-height: 34px;    padding-left: 20px;    text-align: left;}
.page_title2 a{color:#266EBA; text-decoration:none; font-weight:bold;font-size:12px}
.page_title2 a:hover{color:#FF6600;}
.page_title3 {    background-color: #F2F6FB;    border-bottom: 1px solid #98B1C8;    border-top: 1px solid #98B1C8;    color: #666666;    font-size: 12px;    font-weight: bold;    line-height: 30px;    padding-left: 20px;    text-align: left;}
.page_title3 .info1 {    color:red;   font-weight: 100;    margin-left: 3px;    overflow: hidden;    white-space: nowrap;}
.page_title3 .info2 {    color: #777777;   font-weight: 100;    margin-left: 3px;    overflow: hidden;    white-space: nowrap;}
/*下*/
.dobtn {    background-color: #FAFAFA;    border-bottom: 1px solid #ECECEC;    border-top: 1px solid #ECECEC;    height: 32px;    line-height: 32px;    padding-left: 150px;    text-align: left;}
.dobtn1 {  background-image:url("../Images/listbottombg.gif");  border-bottom: 1px solid #99B1C6;    border-top: 1px solid #C1D0DE;    height: 33px; }
.dobtn2 {    background-color: #FAFAFA;    border-bottom: 1px solid #ECECEC;    border-top: 1px solid #ECECEC;    height: 32px;    line-height: 32px;    padding-left: 50px;    text-align: left; }
.dobtn2 span{color:Green; font-weight:bold}
.dobtnimg{width:16px; height:16px;}

/*button*/
.btn3{ width:160px;margin-top:5px;	background:url(../Images/button_submit.gif) repeat-x #e3f1fa;	border:1px solid #aed0ea;		height:22px;	line-height:22px;	cursor:pointer;}
.btn2{ width:120px;margin-top:5px;	background:url(../Images/button_submit.gif) repeat-x #e3f1fa;	border:1px solid #aed0ea;		height:22px;	line-height:22px;	cursor:pointer;}
.btn1{ width:80px;margin-top:5px;	background:url(../Images/button_submit.gif) repeat-x #e3f1fa;	border:1px solid #aed0ea;		height:22px;	line-height:22px;	cursor:pointer;}
.btn{ width:60px; margin-top:5px;	background:url(../Images/button_submit.gif) repeat-x #e3f1fa;	border:1px solid #aed0ea;		height:22px;    line-height:22px;	cursor:pointer;
}
/*vlidate*/
.info_ok { height:16px; display:block;  background-image: url("../Images/common/state2.gif");    background-repeat: no-repeat;    color: #68D36D;      padding-left: 20px;}
.info_err {height:16px; display:block;  background-image: url("../Images/common/state8.gif");    background-repeat: no-repeat;    color: red;         padding-left: 20px;}
.info_right { height:16px;display:block;  background-image: url("../Images/common/state7.gif");    background-repeat: no-repeat;    color:#065fb9; padding-left: 20px;}

/*ajaxDIV*/
.ajaxdiv{background-color:#fffdd7; color:#424242; height:25px; line-height:25px; text-align:left; padding-left:10px; margin:5px 0; border-bottom:#CCCCCC solid 1px; display:none}
.ajaxdiv img { float:left;  width:17px; height:17px; margin-top:2px;}
.ajaxdiv #ajaxText{ float:left;padding-left:10px;}
.ajaxdiv .ajaxclose{ background:url(../Images/common/ajaxclose.gif) no-repeat; float:right; width:8px; height:8px; margin-top:8px; margin-right:10px;}
.ajaxdiv .loader{}
.ajaxdiv .err{color:#f03131;}
.ajaxdiv .ok{color:#84bd59;}
.ajaxdiv .info{color:#30a0e0;}
.ajaxdiv .war{color:#d79a2a;}
/*分页样式*/
/*网易风格*/
.anpager .cpb {background:#1F3A87 none repeat scroll 0 0;border:1px solid #CCCCCC;color:#FFFFFF;font-weight:bold;margin:5px 4px 0 0;padding:4px 5px 0;}
.anpager a {background:#FFFFFF none repeat scroll 0 0;border:1px solid #CCCCCC;color:#1F3A87;margin:5px 4px 0 0;padding:4px 5px 0;text-decoration:none}
.anpager a:hover{background:#1F3A87 none repeat scroll 0 0;border:1px solid #1F3A87;color:#FFFFFF;}

/*拍拍网风格*/
.paginator { font: 12px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;}
.paginator a {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin-right:2px}
.paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;}
.paginator .cpb {padding: 1px 6px;font-weight: bold; font-size: 13px;border:none}
.paginator a:hover {color: #fff; background: #ffa501;border-color:#ffa501;text-decoration: none;}

/*迅雷风格*/
.pages { color: #999 }
.pages a, .pages .cpb { text-decoration:none;float: left; padding: 0 5px; border: 1px solid #ddd;background: #ffff;margin:0 2px; font-size:11px; color:#000;}
.pages a:hover { background-color: #E61636; color:#fff;border:1px solid #E61636; text-decoration:none;}
.pages .cpb { font-weight: bold; color: #fff; background: #E61636; border:1px solid #E61636;}

/*--登录页面 Login.aspx--*/
#login_login{ width:373px; height:356px; background-image:url('../Images/Frame/login_bg.jpg'); text-align:left; margin-top:100px;color:#424242}
#login_login #login_month{height:33px; padding:5px 42px 0px 300px; font-size:28px; font-family:Arial;color:#fff; text-align:center; line-height:43px;}
#login_login #login_title{font-size:18px; font-weight:bold; padding:5px 0px 0px 70px;}
#login_login #login_input{height:136px; margin-top:10px; }
#login_login #login_input .left{width:86px;height:37px; text-align:right; line-height:37px;float:left;padding:5px 0 5px 0; display:inline}
#login_login #login_input .right{width:287px;height:37px;line-height:37px;float:right;padding:5px 0 5px 0; display:inline}
#login_login #login_input .right .blurTxt{background: none repeat scroll 0 0 #E8F9FF;border: 1px solid #0A8FDA;font-size: 14px;padding: 5px 3px;width: 172px;}
#login_login #login_input .right .focusTxt{background: none repeat scroll 0 0 #E8F9FF;border:1px solid #9ECC00;font-size: 14px;padding: 5px 3px;width: 172px;}
#login_login #login_input .leftauth{width:86px;height:30px; text-align:right; line-height:30px;float:left;padding:5px 0 5px 0;}
#login_login #login_input .rightauth{width:287px;height:30px;line-height:30px;float:right;padding:5px 0 5px 0;}
#login_login #login_input .rightauth .blurTxtCode{background: none repeat scroll 0 0 #E8F9FF; border: 1px solid #0A8FDA;font-size: 14px;width: 60px;height:19px;padding:1px;float:left; display:inline; margin-right:5px}
#login_login #login_input .rightauth .focusTxtCode{background: none repeat scroll 0 0 #E8F9FF;border: 1px solid #9ECC00;font-size: 14px;width: 60px;height:19px; padding:1px;float:left; display:inline; margin-right:5px}
#login_login #login_submit{ text-align:center; }
#login_login #login_submit .btn_submit{background: url("../Images/Frame/login_submint.jpg") repeat scroll 0 0 transparent;border: 0 none;color: #076499;cursor: pointer !important;font-size: 14px;font-weight: bold;height: 33px;margin-left: -25px;width: 86px;}
#login_login #login_submit .btn_c{background: url("../Images/Frame/login_c.jpg") repeat scroll 0 0 transparent;border: 0 none;color: #5DC16D;cursor: pointer !important;font-size: 14px;font-weight: bold;height: 33px;width: 86px;}
#login_login #login_msg{ padding-left:30px; color:Red; height:18px;}
#login_login #login_bottom{color: #639e21; padding:20px 0 0 30px; line-height:20px}
/*--框架上部门 Top.aspx--*/
.logininf{ color:#3f6293}
.top_title{ float:left; width:91px; height:39px;background-image:url(../Images/Frame/top_title_bg.jpg); background-repeat:no-repeat; line-height:39px; font-size:14px; color:#FFFFFF; margin-left:5px; margin-right:3px;}
.top_title:link { color:#FFFFFF; text-decoration:none; }
.top_title:hover { color:#FFFFFF; text-decoration:none;}
.top_title1{ float:left; width:91px; height:39px; line-height:39px;font-size:14px; color:#4b6888;}
.top_title1:link { color:#4b6888;  }
.top_title1:hover { color:#000;  text-decoration:none;}
.top_title_m{float:left;width:2px; height:39px;margin-left:5px; margin-right:3px;}
.ttmbg{ background-image:url(../Images/Frame/top_title_m.jpg); background-repeat:no-repeat; background-position: 0px 9px;}
/*--后台左边栏--*/
.menu_t1{background:url(../Images/Frame/menu_t1.jpg) 0px 2px; font-size:14px; font-weight:bold}
.menu_t2{background:url(../Images/Frame/menu_t2.jpg) 0px 2px; font-size:14px;font-weight:bold}
.menu_t1 a{ float:left;width:100%; height:35px; line-height:34px;}
.menu_t1 a:hover{ text-decoration:none;}
.menu_t2 a:hover{ text-decoration:none;}
.menu_t2 a{float:left;width:100%; height:35px; line-height:34px;}
.t_b1{ border-bottom:#8fabc1 solid 1px;border-right:#8fabc1 solid 1px;}
.t_b2{ border-bottom:#8fabc1 solid 1px;}
.t_right{ border-right:#8fabc1 solid 1px;}
.title_bg{ text-align:left; line-height:29px;background:url(../Images/Frame/menu_title_bg.jpg) no-repeat 0px;height:29px;padding-left:14px;}
.title_bg a:hover{text-decoration:none;}
.title_icon { float:left;width:8px; height:8px;margin-right:6px; margin-top:8px; font-size:1px;background:url(../Images/Frame/f1_02.gif) no-repeat;}
.title_icon1 { float:left;width:8px; height:8px;margin-right:6px; margin-top:8px; font-size:1px;background:url(../Images/Frame/f1_01.gif) no-repeat;}
.stitle{height:29px; padding-left:14px;text-align:left;}
.stitle a {float:left; margin-top:8px; margin-left:4px;}
.stitle a:hover{ text-decoration:none;color:#ff6600}
.stitle a:active    { text-decoration:none;color:red}
.sbg1{background:url(../Images/Frame/menu_stitle_bg1.jpg) no-repeat 8px;}
.sbg2{background-image:none;}
.stitle div{width:21px;float:left;}
.stitle img { margin-top:7px; margin-right:4px;}
.menubtn{ font-size:12px;cursor:pointer;}
/*--100个表格宽度从1-100--*/
.tb_width1{width:1%}.tb_width2{width:2%}.tb_width3{width:3%}.tb_width4{width:4%}.tb_width5{width:5%}.tb_width6{width:6%}.tb_width7{width:7%}.tb_width8{width:8%}.tb_width9{width:9%}.tb_width10{width:10%}.tb_width11{width:11%}.tb_width12{width:12%}.tb_width13{width:13%}.tb_width14{width:14%}.tb_width15{width:15%}.tb_width16{width:16%}.tb_width17{width:17%}.tb_width18{width:18%}.tb_width19{width:19%}.tb_width20{width:20%}.tb_width21{width:21%}.tb_width22{width:22%}.tb_width23{width:23%}.tb_width24{width:24%}.tb_width25{width:25%}.tb_width26{width:26%}.tb_width27{width:27%}.tb_width28{width:28%}.tb_width29{width:29%}.tb_width30{width:30%}.tb_width31{width:31%}.tb_width32{width:32%}.tb_width33{width:33%}.tb_width34{width:34%}.tb_width35{width:35%}.tb_width36{width:36%}.tb_width37{width:37%}.tb_width38{width:38%}.tb_width39{width:39%}.tb_width40{width:40%}.tb_width41{width:41%}.tb_width42{width:42%}.tb_width43{width:43%}.tb_width44{width:44%}.tb_width45{width:45%}.tb_width46{width:46%}.tb_width47{width:47%}.tb_width48{width:48%}.tb_width49{width:49%}.tb_width50{width:50%}.tb_width51{width:51%}.tb_width52{width:52%}.tb_width53{width:53%}.tb_width54{width:54%}.tb_width55{width:55%}.tb_width56{width:56%}.tb_width57{width:57%}.tb_width58{width:58%}.tb_width59{width:59%}.tb_width60{width:60%}.tb_width61{width:61%}.tb_width62{width:62%}.tb_width63{width:63%}.tb_width64{width:64%}.tb_width65{width:65%}.tb_width66{width:66%}.tb_width67{width:67%}.tb_width68{width:68%}.tb_width69{width:69%}.tb_width70{width:70%}.tb_width71{width:71%}.tb_width72{width:72%}.tb_width73{width:73%}.tb_width74{width:74%}.tb_width75{width:75%}.tb_width76{width:76%}.tb_width77{width:77%}.tb_width78{width:78%}.tb_width79{width:79%}.tb_width80{width:80%}.tb_width81{width:81%}.tb_width82{width:82%}.tb_width83{width:83%}.tb_width84{width:84%}.tb_width85{width:85%}.tb_width86{width:86%}.tb_width87{width:87%}.tb_width88{width:88%}.tb_width89{width:89%}.tb_width90{width:90%}.tb_width91{width:91%}.tb_width92{width:92%}.tb_width93{width:93%}.tb_width94{width:94%}.tb_width95{width:95%}.tb_width96{width:96%}.tb_width97{width:97%}.tb_width98{width:98%}.tb_width99{width:99%}.tb_width100{width:100%}
/*图片背景*/
.happybg1{ background: url("/Images/Article/happy_bg.gif") no-repeat scroll center center transparent;
    height: 156px;
    width: 174px;}
.happyDiv1 {
    height: 115px;
    margin: 7px;
    overflow: hidden;
    text-align: center;
    width: 160px;
    padding-top:5px;
}
.happyDiv2 {
    margin-left: 7px;
    overflow: hidden;
    text-align: center;
    white-space: nowrap;
    width: 160px;
    height:22px;
     line-height:22px;
}

收录于