• Repeater分页


    其实Repeater分页是一个很简单的过程,只要你仔细看里面的逻辑,相信你也可以做到!

    准备页面素材

       1、前台页面需要放置一个 Repeater ,用来显示您索要显示的数据。

     2、一个隐藏域 lable 用来控制页数。

       3、 两个图片按钮 用来实现点击切换页码。

    后台

       1、数据源,我们使用Datatable,用来绑定Repeater。

       2、分页控制数据源 PagedDataSource,用来分页填充。

     

    原理:

       设置PagedDataSource显示条数,然后将PagedDataSource的当前页的数据填充给Repeater,这样就实现了分页效果。

     

    前台代码:

    <%@ Page Language="C#" AutoEventWireup="true" Title="Repeater分页" CodeFile="myRandom.aspx.cs" Inherits="myRandom" %>
    
    <!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></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="900px; background-color:#ccc; height:30px;">
    
            <!--上一页按钮 -->
            <asp:imageButton  ImageUrl="~/testimage/014.png" ImageAlign="AbsMiddle"
                 ID="btnP" runat="server"  onclick="btnP_Click" />
            
            <!-- Repeater -->
            <asp:repeater ID="rptNavigate" runat="server">
                <ItemTemplate>
                    <a style="200px; height:30px; vertical-align:middle; "><%#Eval("b_name") %></a>
                </ItemTemplate>
           </asp:repeater>
    
           <!-- 下一页按钮  -->
            <asp:imageButton  ImageUrl="~/testimage/013.png" ID="btnN" runat="server" 
                 onclick="btnN_Click" 
                style="text-align: right" ImageAlign="AbsMiddle" />
    
            <!-- 隐藏域ID, 用来控制当前 PagedDataSource 的页数  -->
            <asp:Label Visible="false" ID="lblCount" runat="server" Text="1"></asp:Label>
            
        </div>
        </form>
    </body>
    </html>
    
    

     

    后台代码:

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Drawing;
    using System.Data;
    
    public partial class myRandom : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Bind();//在窗体加载的时候调用
        }
        public void Bind()
        {
            string strSql = "select * from xwe_bigtype";
    
            //指定数据源
            DataTable dt = SaleInfoManager.GetBySQL(strSql);
    
            //实例化pagerDatatable
            PagedDataSource pds = new PagedDataSource();
            
            //给pds绑定数据
            pds.DataSource = dt.DefaultView;
            //设定可分页
            pds.AllowPaging = true;
            //可以分几条
            pds.PageSize = 6;
            //设定默认页
            pds.CurrentPageIndex = Convert.ToInt32(lblCount.Text.ToString ())-1;
            rptNavigate.DataSource=pds;
    
            //如果大于当前页
            if(pds.CurrentPageIndex>=1)
            {
                btnP.Enabled=true;
                btnN.Enabled=true;
            }
    
            //如果是最后一页,让下一页按钮不起作用
            if(pds.CurrentPageIndex==pds.PageCount-1)
            {
                btnN.Enabled=false;
                btnP.Enabled=true;
            }
    
            //如果是第一页
            if(pds.CurrentPageIndex==0)
            {
                btnP.Enabled=false;
                btnN.Enabled=true;
            }
            
            rptNavigate.DataBind();
        }
    
    
        //下一页事件
        protected void btnN_Click(object sender, EventArgs e)
        {
            lblCount.Text = (Convert.ToInt32(lblCount.Text.ToString()) + 1).ToString ();
            this.Bind();
        }
    
        //上一页事件
        protected void btnP_Click(object sender, EventArgs e)
        {
            lblCount.Text = (Convert.ToInt32(lblCount.Text.ToString()) - 1).ToString ();
            this.Bind();
        }
    }
    

     

    页面效果:

      第一页:

        

         第二页:

     

  • 相关阅读:
    SpringMVC项目模块浅析
    利用python脚本(xpath)抓取数据
    利用python脚本(re)抓取美空mm图片
    Intellij idea开发Hadoop MapReduce程序
    在Hadoop平台跑python脚本
    Hadoop常用命令
    CentOS6.5 安装Zookeeper集群
    MySQL常用命令
    MongoDB常用命令
    前后端分离架构+k8s+ingress
  • 原文地址:https://www.cnblogs.com/307914070/p/1927695.html
Copyright © 2020-2023  润新知