自定义分页控件

其他 2018-07-26 09:17:17 阅读次数: 0
  • 效果图：
    效果图
  • Paging.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Paging.ascx.cs" Inherits="Paging" %>
<script type="text/javascript">
    //分页
    function newPage(type) {
        var targetPage = $(".txtTargetPage").val();
        if (type == "target" && targetPage == "")
        {
            alert('请输入页码！');
            return false;
        } else if(type == "target" && targetPage != ""){
            var maxPage = $(".lblTotalPage").html();
            if (parseInt(targetPage) > parseInt(maxPage)) {
                alert("输入的页码不能大于当前最大页码！");
                $(".txtTargetPage").val('');
                return false;
            }
        } else
            $(".txtTargetPage").val('');
        $('.txtGuideTag').val(type);
        $(".btnFy").click();
    }
    //只能输入自然数
    function DigitInput(obj, event) {
        //响应鼠标事件，允许左右方向键移动 
        event = window.event || event;
        if (event.keyCode == 37 | event.keyCode == 39) {
            return;
        }
        obj.value = obj.value.replace(/\D/g, "");
        if (parseInt(obj.value) == 0) obj.value = "";
    }
</script>
<table style="width: 100%; margin-left: 40px">
    <tr style="height: 25px; vertical-align: middle;">
        <td style="width: 60%">共检索到：<asp:Label ID="lblTotalCount" runat="server" Text="0"></asp:Label>条！<asp:TextBox ID="txtGuideTag" class="txtGuideTag"
            runat="server" Style="display: none"></asp:TextBox>每页<select id="pSize" style=""
                runat="server">
                <option value="5">5</option>
                <option selected value="10">10</option>
                <option value="15">15</option>
                <option value="20">20</option>
                <option value="30">30</option>
                <option value="40">40</option>
                <option value="50">50</option>
            </select>条
        </td>
        <td style="text-align: right; vertical-align: middle">
            <span id="pre" runat="server">[<a href="#" onclick="newPage('-1')" style='color: blue; text-decoration: underline'>前页</a>]
            </span>
            <span id="pre2" runat="server" style="display: none;">
                <span style='color: blue'>[<a href="#" style='color: blue; text-decoration: none'>前页</a>]</span>
            </span>
        </td>
        <td style="text-align: left; vertical-align: middle">
            <span id="next" runat="server">[<a href="#" onclick="newPage('+1')" style='color: blue; text-decoration: underline'>后页</a>]</span>
            <span id="next2" runat="server" style="display: none;">
                <span style='color: blue'>[<a href="#" style='color: blue; text-decoration: none'>后页</a>]</span></span>
        </td>
        <td style="vertical-align: middle">页码：<span id="lblCurr" runat="server">1</span>/<span id="lblTotalPage" class="lblTotalPage"
            runat="server"></span>
            &nbsp;&nbsp;&nbsp; 跳转到<input id="txtTargetPage" class="txtTargetPage" runat="server" style="width: 20px;"
                onkeyup="DigitInput(this,event);" onpaste="return false" />页[<a href="#" onclick="newPage('target')"
                    style='color: blue; text-decoration: underline'>转到</a>]
        </td>
    </tr>
</table>
<asp:Button ID="btnFy" runat="server" class="btnFy" Text="分页" OnClick="btnFy_Click" Style="display: none" />
<asp:Button ID="btnSearch" runat="server" class="btnSearch" Text="查询" OnClick="btnSearch_Click" Style="display: none" />
  • Paging.ascx.cs
using System;
using System.Web.UI;

/**************************************************
 * 类 名 称 :  自定义分页用户控件   
 * 版 本 号 :  v1.0.0.0   
 * 说    明 :  本控件通过点击“上一页、下一页”或输入“页码”方式进行跳转。
 *              注意：在页面引用时务必引用jQuery。使用例子：“<%@ Register Src="~/Paging.ascx" TagPrefix="ZDControl" TagName="Paging" %>
 *               <ZDControl:Paging runat="server" id="MyPaging" />”
 * 作    者 :     
 * 创建时间 :  2018-7-17
**************************************************/

public partial class Paging : System.Web.UI.UserControl
{
    #region 属性

    //总条数
    public int TotalCount { get; set; }

    //开始index
    private int startIndex;
    public int StartIndex
    {
        get
        {
            return startIndex;
        }

        set
        {
            startIndex = value;
        }
    }
    //结束index
    private int endIndex;
    public int EndIndex
    {
        get
        {
            return endIndex;
        }

        set
        {
            endIndex = value;
        }
    }
    #endregion
    int pageSize = 0;//每页显示条数
    int pageCount = 0;//总页数
    protected void Page_Load(object sender, EventArgs e)
    {
        pageSize = int.Parse(pSize.Value);//每页显示条数
        lblTotalCount.Text = TotalCount.ToString();//总条数
        pageCount = (TotalCount % pageSize == 0) ? (TotalCount / pageSize) : (TotalCount / pageSize + 1);//总页数
        lblTotalPage.InnerText = pageCount.ToString();//总页数
        if (!IsPostBack)
            InintControl();
    }
    //点击“上一页、下一页”或“跳转”，刷新页面
    protected void btnFy_Click(object sender, EventArgs e)
    {
        InintControl();
    }
    //查询点击事件
    protected void btnSearch_Click(object sender, EventArgs e)
    {
        int currPage = 1;
        startIndex = pageSize * (currPage - 1) + 1;
        endIndex = pageSize * currPage;//序号
        lblCurr.InnerText = currPage.ToString();
        GuidStyle(currPage, pageCount);//“上一页/下一页”样式
    }

    #region 控件显示
    //分页控件初始化
    protected void InintControl()
    {
        #region 分页控件初始化
        int pageCount = (TotalCount % pageSize == 0) ? (TotalCount / pageSize) : (TotalCount / pageSize + 1);//总页数
        int currPage = int.Parse(lblCurr.InnerText); //当前页数
        string page = this.txtGuideTag.Text;
        this.txtGuideTag.Text = "";
        //设置当前页码
        if (page == "target")
        {
            currPage = int.Parse(this.txtTargetPage.Value.Trim());
        }
        else
        {
            switch (page)
            {
                //下一页
                case "+1":
                    currPage = currPage + 1;
                    break;
                //上一页
                case "-1":
                    currPage = currPage - 1;
                    break;
            }
        }
        if (currPage > pageCount)
        {
            currPage = 1;
        }
        lblCurr.InnerText = currPage.ToString();//当前页数
        startIndex = pageSize * (currPage - 1) + 1;
        endIndex = pageSize * currPage;//序号
        #endregion
        GuidStyle(currPage, pageCount);//“上一页/下一页”样式
    }
    //“上一页/下一页”样式
    protected void GuidStyle(int currPage, int pageCount)
    {
        #region “上一页/下一页”样式
        if (currPage == 1)
        {
            pre.Attributes["style"] = "display:none";
            pre2.Attributes["style"] = "display:block";
        }
        else
        {
            pre.Attributes["style"] = "display:block";
            pre2.Attributes["style"] = "display:none";
        }
        if ((currPage == pageCount) || (currPage == 1 && pageCount == 0))
        {
            next.Attributes["style"] = "display:none";
            next2.Attributes["style"] = "display:block";
        }
        else
        {
            next.Attributes["style"] = "display:block";
            next2.Attributes["style"] = "display:none";
        }
        #endregion
    }
    #endregion

}
  • 引用页面
//1：Default2.aspx代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<%@ Register Src="~/Paging.ascx" TagPrefix="ZDControl" TagName="Paging" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery-1.11.1.min.js"></script>

    <title></title>
    <script>
        $(function () {
            $('#Search').click(function () {
                $('.btnSearch').click();
            })
        })
    </script>
</head>
<body>
    <form id="form1" runat="server">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年份：<input type="text" id="txtAssYesr" value="" runat="server" /> 
        <input type="button" id="Search" value="查询" />
        <div id="div1" runat="server"></div>
        <ZDControl:Paging runat="server" ID="MyPaging" />
    </form>
</body>
</html>
-----------------------------------------
//2：Default2.aspx.cs代码：Default2.aspx元素加载完毕后才加载Paging.ascx内容，Paging.ascx根据传来的总页数，返回数据起止索引
private void Page_Load(object sender, System.EventArgs e)
{
    MyPaging.TotalCount = GetTotalCount();//设置分页控件总页数
}
//Default2.aspx页面加载完成事件
protected override void OnLoadComplete(EventArgs e)
{
    base.OnLoadComplete(e);
    int start = MyPaging.StartIndex, end = MyPaging.EndIndex;//获得分页控件里的数据开始和结束索引
    string where = GetWhere();
    ShowTable(where,start, end);
}
//筛选条件
 protected string GetWhere()
 {
     string year = txtYear.Value.Trim();
     if (year == "")
         return " 1=1 ";
     else
         return " year=" +txtYear.Value.Trim();
 }
//获得符合条件数据总数
public int GetTotalCount(string whereSql)
{
     string sql = " SELECT count(id) FROM 表 where "+ GetWhere();
    return int.Parse(DbHelperSQL.ExecuteScalar(CommandType.Text, sql));
}
//显示查询到的主table(html串)
public void ShowTable(string whereSql,int start,int end)
{
    string sql = @" SELECT  * FROM ( SELECT    row_No = ROW_NUMBER() OVER ( ORDER BY ID ASC ) 
                                            ,id,assessName  FROM      表
                                ) tbl  WHERE   row_No BETWEEN "+start+" AND "+end +" and "+whereSql;
    DataTable dt2 = DbHelperSQL.Query(sql).Tables[0];
    div1.InnerHtml= DataTableToHtml(dt2);//datatbale转html
}
  • aspx中使用分页控件：AspNetPager.dll
<%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %>

<style type="text/css">
/*淘宝风格*/
.paginator { font: 12px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;}
.paginator a {border:solid 1px #ccc;color:#0063dc;cursor:pointer;text-decoration:none;}
.paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;}
.paginator .cpb {border:1px solid #F50;font-weight:700;color:#F50;background-color:#ffeee5;}
.paginator a:hover {border:solid 1px #F50;color:#f60;text-decoration:none;}
.paginator a,.paginator a:visited,.paginator .cpb,.paginator a:hover  
{float:left;height:16px;line-height:16px;min-width:10px;_width:10px;margin-right:5px;text-align:center;
 white-space:nowrap;font-size:12px;font-family:Arial,SimSun;padding:0 3px;}
 </style>
<webdiyer:AspNetPager ID="aspPage" runat="server" FirstPageText="首页" 
                    AlwaysShow="true"  Width="100%"
                    LastPageText="尾页" NextPageText="下一页" PrevPageText="上一页" 
                    onpagechanged="aspPage_PageChanged" CssClass="paginator"  
                    CurrentPageButtonClass="cpb" 
                    CustomInfoHTML="共%PageCount%页，当前为第%CurrentPageIndex%页，每页%PageSize%条" >
                </webdiyer:AspNetPager>
  • 后置代码： 
protected void aspPage_PageChanged(object sender, EventArgs e)
{
    InitData();
}

protected void InitData()
{
    aspPage.PageSize = 20;//每页条数
    int recount = 0;//总条数
    string strWhere="";
    DataSet ds = ExtendTool.ExecuteSearch(out recount, "PR_SAP_SendLeve", "ID", aspPage.CurrentPageIndex, aspPage.PageSize, "", "ID", strWhere);
    aspPage.RecordCount = recount;//总条数
    //此处省略绑定前台代码
}

猜你喜欢

转载自blog.csdn.net/zhexiaode/article/details/81084926
今日推荐
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
周排行
[编程题]学英语
[codeforces 1288A] Deadline 约数+模
Python的web开发
Docker在Centos 7上的部署
python编码
解决Ubuntu16.04 fatal error: json/json.h: No such file or directory
mysql并发插入
rest接口如何适应jsonp的方案
linux 终端上网设置
高数——等号两边同时求导、积分的解释
每日归档
更多
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022