• datalist 或者repeater分页


         找了很久,终于找到了自己想要的分页效果
    aspx:

    <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

    <!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 id="Head1" runat="server">
        <title>无标题页</title>
        <style type="text/css">
       body{
         font:12px tahoma;
         background:#E4E8F3;
       }
       table{
            border-collapse:collapse;
       }
       th{
            background:#B8C0D3;
       }
       th,td{
            border:1px solid #8594B1;
       }
       td{
            height:25px;
            padding:5px;
            background:#EFF1F5;
       }
        a
       {
            color:#240589;
            text-decoration: none;
       }
       /* Pager Style Start */
    .number span a
    {
        font-size:12px;
          padding-top:4px;
          padding-bottom:4px;
          padding-left:6px;
          padding-right:6px;
    }
    .number span a:hover
    {
        font-size: 12px;
        padding-top:4px;
          padding-bottom:4px;
          padding-left:6px;
          padding-right:6px;
        background-color: #3366cc;
        color:#FFFFFF;
    }
    .number
    {
        margin-bottom:5px;
        margin-top:5px;
        font-size: 14px;
        font-weight: bold;
        color: #ff00ff;
    }
    .number span
    {
        border:solid 1px #cccccc;
        background-color:#FFFFFF;
        color:#666666;
        font-size:12px;
        font-family:Verdana;
        line-height:20px;
        display:inline-block;
        margin-left:4px;
        margin-right:4px;
    }
       </style>
    </head>


    <body>
        <form id="form1" runat="server">
        <script src="pager.js" type="text/javascript"></script>
        <div>
            <asp:Repeater ID="myRepeater" runat="server" OnItemCommand="Repeater1_ItemCommand">
            <HeaderTemplate>
            <table>
            <tr>
            <th>房</td>
            <th>厅</td>
            <th>厨</td>
            <th>ID</td>
            <th>名称</th>
            </tr>
            </HeaderTemplate>
            <ItemTemplate>
            <tr>
            <td><asp:Label ID="Label1" runat="server" Text='<%#Eval("room1","{0}") %>' /></td>
            <td><asp:Label ID="Label2" runat="server" Text='<%#Eval("room2","{0}") %>' /></td>
            <td><asp:Label ID="Label3" runat="server" Text='<%#Eval("room3","{0}") %>' /></td>
            <td><asp:Label ID="Label4" runat="server" Text='<%#Eval("id","{0}") %>' /></td>
            <td><asp:Label ID="Label5" runat="server" Text='<%#Eval("platename","{0}") %>' /></td>
            </tr>
            </ItemTemplate>
            <FooterTemplate>    
            </table>
            </FooterTemplate>
            </asp:Repeater>
        </div>
        <br />
        <script language="javascript" type="text/javascript">
        var pg = new showPages('pg');
        pg.pageCount = <%=PageCount %>;
        pg.printHtml();
        </script>
        </form>
    </body>
    </html>

     

    CS:

    using System;
    using System.Data;
    using System.Configuration;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using System.Data.SqlClient;

    public partial class _Default : System.Web.UI.Page
    {
        string pageCount;
        public string PageCount
        {
            get { return pageCount; }
            set { pageCount = value; }
        }
        int currentPage;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (Request.QueryString["Page"] != null)
                currentPage = Convert.ToInt32(Request.QueryString["Page"]);
            else
                currentPage = 1;

            CreateData(currentPage);

        }

        private void CreateData(int currentPage)
        {
            SqlConnection myConn = new SqlConnection("uid=sa;pwd=998113;database=mssqlsouwoo;server=192.168.0.135;");
            PagedDataSource ps = new PagedDataSource();
            myConn.Open();
            //定义一个OleDbDataAdapter
            SqlDataAdapter myAdapter = new  SqlDataAdapter("select top 500 * from [souwoo_adhouse]", myConn);
            DataSet ds = new DataSet();
            //填充数据
            myAdapter.Fill(ds);
            ps.DataSource = ds.Tables[0].DefaultView;
            ps.AllowPaging = true;
            ps.PageSize = 10;
            ps.CurrentPageIndex = currentPage - 1;
            pageCount = ps.PageCount.ToString();
            this.myRepeater.DataSource = ps;
            this.myRepeater.DataBind();
        }

        protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
        {

        }
    }


     


    pager.js

    // JScript 文件

    function showPages(name) { //初始化属性
        this.name = name;      //对象名称
        this.page = 1;         //当前页数
        this.pageCount = 1;    //总页数
        this.argName = 'page'; //参数名
        this.showTimes = 1;    //打印次数
    }

    showPages.prototype.getPage = function(){ //丛url获得当前页数,如果变量重复只获取最后一个
        var args = location.search;
        var reg = new RegExp('[\?&]?' + this.argName + '=([^&]*)[&$]?', 'gi');
        var chk = args.match(reg);
        this.page = RegExp.$1;
    }
    showPages.prototype.checkPages = function(){ //进行当前页数和总页数的验证
        if (isNaN(parseInt(this.page))) this.page = 1;
        if (isNaN(parseInt(this.pageCount))) this.pageCount = 1;
        if (this.page < 1) this.page = 1;
        if (this.pageCount < 1) this.pageCount = 1;
        if (this.page > this.pageCount) this.page = this.pageCount;
        this.page = parseInt(this.page);
        this.pageCount = parseInt(this.pageCount);
    }
    showPages.prototype.createHtml = function(){ //生成html代码
        var strHtml = '', prevPage = this.page - 1, nextPage = this.page + 1;
                strHtml += '<span class="count">Pages: ' + this.page + ' / ' + this.pageCount + '</span>';
                strHtml += '<span class="number">';
                if (prevPage < 1) {
                    strHtml += '<span title="首页">«</span>';
                    strHtml += '<span title="前一页">‹</span>';
                } else {
                    strHtml += '<span title="首页"><a href="javascript:' + this.name + '.toPage(1);">«</a></span>';
                    strHtml += '<span title="前一页"><a href="javascript:' + this.name + '.toPage(' + prevPage + ');">‹</a></span>';
                }
                if (this.page % 10 ==0) {
                    var startPage = this.page - 9;
                } else {
                    var startPage = this.page - this.page % 10 + 1;
                }
                if (startPage > 10) strHtml += '<span title="前十页"><a href="javascript:' + this.name + '.toPage(' + (startPage - 1) + ');">...</a></span>';
                for (var i = startPage; i < startPage + 10; i++) {
                    if (i > this.pageCount) break;
                    if (i == this.page) {
                        strHtml += '<span title="第' + i + '页">' + i + '</span>';
                    } else {
                        strHtml += '<span title="第' + i + '页"><a href="javascript:' + this.name + '.toPage(' + i + ');">' + i + '</a></span>';
                    }
                }
                if (this.pageCount >= startPage + 10) strHtml += '<span title="后10页"><a href="javascript:' + this.name + '.toPage(' + (startPage + 10) + ');">...</a></span>';
                if (nextPage > this.pageCount) {
                    strHtml += '<span title="下一页">›</span>';
                    strHtml += '<span title="上一页">»</span>';
                } else {
                    strHtml += '<span title="下一页"><a href="javascript:' + this.name + '.toPage(' + nextPage + ');">›</a></span>';
                    strHtml += '<span title="最后一页"><a href="javascript:' + this.name + '.toPage(' + this.pageCount + ');">»</a></span>';
                }
                strHtml += '</span><br />';
        return strHtml;
    }
    showPages.prototype.createUrl = function (page) { //生成页面跳转url
        if (isNaN(parseInt(page))) page = 1;
        if (page < 1) page = 1;
        if (page > this.pageCount) page = this.pageCount;
        var url = location.protocol + '//' + location.host + location.pathname;
        var args = location.search;
        var reg = new RegExp('([\?&]?)' + this.argName + '=[^&]*[&$]?', 'gi');
        args = args.replace(reg,'$1');
        if (args == '' || args == null) {
            args += '?' + this.argName + '=' + page;
        } else if (args.substr(args.length - 1,1) == '?' || args.substr(args.length - 1,1) == '&') {
                args += this.argName + '=' + page;
        } else {
                args += '&' + this.argName + '=' + page;
        }
        return url + args;
    }
    showPages.prototype.toPage = function(page){ //页面跳转
        var turnTo = 1;
        if (typeof(page) == 'object') {
            turnTo = page.options[page.selectedIndex].value;
        } else {
            turnTo = page;
        }
        self.location.href = this.createUrl(turnTo);
    }
    showPages.prototype.printHtml = function(){ //显示html代码
        this.getPage();
        this.checkPages();
        this.showTimes += 1;
        document.write('<div id="pages_' + this.name + '_' + this.showTimes + '" class="pages"></div>');
        document.getElementById('pages_' + this.name + '_' + this.showTimes).innerHTML = this.createHtml();
       
    }
    showPages.prototype.formatInputPage = function(e){ //限定输入页数格式
        var ie = navigator.appName=="Microsoft Internet Explorer"?true:false;
        if(!ie) var key = e.which;
        else var key = event.keyCode;
        if (key == 8 || key == 46 || (key >= 48 && key <= 57)) return true;
        return false;
    }

     

    但是,这几乎只是把.net中的控件分页重写了一遍,如果操作大容量数据库的时候,还是很笨的。需要改进,
    谁有意见请发表!

  • 相关阅读:
    webSQL 实现即时通讯
    微信开发(微信公众号)
    回顾 git 常用命令
    面向对象的 javascript
    关于HTML、js加密、混淆、源码保护、代码安全,防止解压直接看源码
    svn 的使用
    css新单位 vw , vh
    图片转成base64, base64转成图片
    EL表达式
    jsp页面获取集合的长度
  • 原文地址:https://www.cnblogs.com/jackrebel/p/1088483.html
Copyright © 2020-2023  润新知