分析DataList分页和超级链接技术

今天实现了一个很重要的功能,相信大家还是平时做的时候会经常用到的,虽然ASP.NET 有DataGrid 的功能很强大,但是Repeater,DataList 很灵活啊,可以定义自己的样式出来,DataList 可以说是Repeater 的强化版吧,功能更强大。今天研究了下用DataList 做分页技术,还有使用其中的一列做超级链接,因为大家知道,DataList 是没提供分页属性的,同时它也没有DataGrid 中的超级链接列,所以需要自己写代码的,两个技术点先给大家列出来,希望对大家有帮助,当然我在做这个的时候也参考了别人的做法的,大家互相学习嘛。
     技术点一:分页主要用到了sda.Fill(System.Data.DataSet ds ,int startRecord,int maxRecords,string srcTable)第一个重载方法。
 
      技术点二:让绑定列一列成为一个超级链接列。
 
在HTML端代码:<%#show(DataBinder.Eval(Container.DataItem,”OrderID”))%>
 
在后台代码是一个show()的方法:
 
public string show (object orderID)
 
{
 
return "<a href=WebForm2.aspx?id="+orderID+" target='_blank'>"+orderID+" </a>";
 
}
 
     主要是这两个技术点了,现在给大家看详细的代码,我运行通过的,以后用的时候就可以COPY了,偷下懒,嘿嘿~~~。
 
      第一个页面分页技术的:
 
前台代码如下:
 
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 32px; WIDTH: 752px; POSITION: absolute; TOP: 16px; HEIGHT: 312px" cellSpacing="0" cellPadding="0" width="752" border="0">
 
<TR>
 
              <TD style="HEIGHT: 29px"><FONT" times="" new="">宋体">DataList分页技术和超级链接</FONT></TD>  
 
</TR>
 
<TR>
 
           <TD style="HEIGHT: 252px"><asp:datalist id="DataList1" runat="server" Width="576px"
 

 

 
Height="96px">
 
                                                 <HeaderTemplate>
 
                                                        定单编号<td>
 
                                                        员工编号<td>
 
                                                        定单日期<td>
 
                                                        运费<td>
 
                                                        运往所在城市
 
                                                 </HeaderTemplate>
 
                                                 <ItemTemplate>
 
<%# show(DataBinder.Eval(Container.DataItem,"OrderID"))%>
 
                                                        <td>
<%# DataBinder.Eval(Container.DataItem,"CustomerID")%>
 
                                                        <td>
<%# DataBinder.Eval(Container.DataItem,"OrderDate")%>
 
                                                        <td>
 
<%# DataBinder.Eval(Container.DataItem,"Freight")%>
 
                                                        <td>
<%# DataBinder.Eval(Container.DataItem,"ShipCity")%>
 
                                                 </ItemTemplate>
 
                                          </asp:datalist></TD>
 
                            </TR>
 
                            <TR>
 
                                   <TD><FONT" times="" new="">宋体">
<asp:linkbutton id="FirstLB" runat="server" OnCommand="LinkButton_Click" CommandName="first">第一页</asp:linkbutton>&nbsp;
 
<asp:linkbutton id="PreviousLB" runat="server" OnCommand="LinkButton_Click" CommandName="prev">上一页</asp:linkbutton>&nbsp;
<asp:linkbutton id="NextLB" runat="server" OnCommand=LinkButton_Click
 
CommandName="next">下一页</asp:linkbutton>&nbsp;
<asp:linkbutton id="EndLB" runat="server" OnCommand=LinkButton_Click
 
CommandName="end">最后一页</asp:linkbutton>&nbsp;&nbsp;
总<asp:label id="TotalLbl" runat="server"></asp:label>页 当前第<asp:label id="CurrentLbl" runat="server"></asp:label>页
 
<asp:linkbutton id="JumpLB" runat="server" OnCommand=LinkButton_Click CommandName="jump">跳到</asp:linkbutton>第
 
       <asp:textbox id="TextBox1" runat="server" Width="90px"></asp:textbox>
 
页</FONT></TD>
 
                            </TR>
 
</TABLE>
后台代码如下:
private void Page_Load(object sender, System.EventArgs e)
 
        {
 
            // 在此处放置用户代码以初始化页面
 
            PageSize = 12;//每页12条记录
 

 

 
            if(!Page.IsPostBack)
 
            {
 
                this.DataListBind();
 
                CurrentPage = 0;//当前页习惯设为0
 
                ViewState["PageIndex"] = 0;//页索引也设为0
 

 

 
                //计算总共有多少记录
 
                RecordCount = CalculateRecord();
 

 

 
                //计算总共有多少页
 
                PageCount = RecordCount/PageSize;
 
                this.TotalLbl.Text = PageCount.ToString();//显示总页数
 
                ViewState["PageCount"] = PageCount;//会话session 对整个 application 有效 ,而视图状态 viewstate相当于某个页面的 session
 

 

 
            }
 
        }
 
       
 
   
 
   
 
       
 
        //计算总共有多少条记录
 
        private int CalculateRecord()
 
        {
 
            try
 
            {
 
                int recordCount;
 
                SqlConnection con=new SqlConnection("server=.;database=Northwind;uid=sa;pwd=");//数据库使用Northwind;
 
                con.Open();
 
                string sql= "select count(*) as count from Orders";
 
                SqlCommand cmd = new SqlCommand(sql,con);
 
                SqlDataReader sdr = cmd.ExecuteReader();
 
                if(sdr.Read())
 
                {
 
                    recordCount = Int32.Parse(sdr["count"].ToString());
 
                }
 
                else
 
                {
 
                    recordCount = 0;
 
                }
 
                sdr.Close();
 
                con.Close();
 
                return recordCount;
 
            }
 
            catch(Exception ex)
 
            {
 
                throw new Exception(ex.Message);
 
            }
 
        }
 
        //以第一列定单号做个超级链接,链接到第二页显示定单详细信息
 
        public string show (object orderID)
 
        {
 
         return "<a href=WebForm2.aspx?id="+orderID+" target='_blank'>"+orderID+" </a>";
 
        }
 
        //将数据绑定到Datalist控件
 
        public void DataListBind()
 
        {
 
            try
 
            {
 
               
 
                int StartIndex = CurrentPage*PageSize;//设定导入的起终地址
 
                string sql = "select * from Orders";
 
                DataSet ds = new DataSet();
 
                SqlConnection con=new SqlConnection("server=.;database=Northwind;uid=sa;pwd=");
 
                con.Open();
 
                SqlDataAdapter sda= new SqlDataAdapter(sql,con);
 
               
 
                sda.Fill(ds,StartIndex,PageSize,"orders");//这是sda.Fill方法的第一次重载,里面的变量分别是数据集DataSet ,开始记录数StartRecord,最大的记录数MaxRecord,数据表名TableName
 
                this.DataList1.DataSource = ds.Tables["orders"].DefaultView;
 
                this.DataList1.DataBind();
 
                this.PreviousLB.Enabled = true;
 
                this.NextLB.Enabled = true;
 
                if(CurrentPage==(PageCount-1)) this.NextLB.Enabled = false;//当为最后一页时,下一页链接按钮不可用
 
                if(CurrentPage==0) this.PreviousLB.Enabled = false;//当为第一页时,上一页按钮不可用
 
                this.CurrentLbl.Text = (CurrentPage+1).ToString();//当前页数
 
            }
 
            catch(Exception ex)
 
            {
 
                throw new Exception(ex.Message);
 
            }
 

 

 
        }
 

 

 
        public void LinkButton_Click(Object sender,CommandEventArgs e)//自己编写的按钮点击事件
 
        {
 
            CurrentPage = (int)ViewState["PageIndex"];//获得当前页索引
 
            PageCount = (int)ViewState["PageCount"];//获得总页数
 

 

 
            string cmd = e.CommandName;
 
            //判断cmd,以判定翻页方向
 
            switch(cmd)
 
            {
 
                case "prev"://上一页
 
                    if(CurrentPage>0) CurrentPage--;
 
                    break;
 
                case "next":
 
                    if(CurrentPage<(PageCount-1)) CurrentPage++;//下一页
 
                    break;
 
                case "first"://第一页
 
                    CurrentPage=0;
 
                    break;
 
                case "end"://最后一页
 
                    CurrentPage=PageCount-1;
 
                    break;
 
                case "jump"://跳转到第几页
 
                    if(this.TextBox1.Text.Trim()==""||Int64.Parse(this.TextBox1.Text.Trim())>PageCount)//如果输入数字为空或超出范围则返回
 
                        return;
 
                    else
 
                    {
 
                        CurrentPage=Int32.Parse(this.TextBox1.Text.ToString())-1;
 
                        break;
 
                    }
 
                   
 
            }
 

 

 
            ViewState["PageIndex"] = CurrentPage;//获得当前页
 

 

 
            this.DataListBind();//重新将DataList绑定到数据库
 

 

 
        }
 
第二页用来显示详细的定单信息
      用的控件是DataGird
 
代码如下:
 
    private void Page_Load(object sender, System.EventArgs e)
 
        {
 
            // 在此处放置用户代码以初始化页面
 
           
 
            string id=Request.QueryString["id"];
 
            SqlConnection con=new SqlConnection("server=.;database=Northwind;uid=sa;pwd=");
 
            con.Open();
 
            SqlDataAdapter sda=new SqlDataAdapter();
 
            sda.SelectCommand=new SqlCommand("select * from [Order Details] where OrderID='"+id+"'",con);
 
            DataSet ds=new DataSet();
 
            sda.Fill(ds,"orders");
 
            this.DataGrid1.DataSource=ds.Tables["orders"].DefaultView;
 
            this.DataGrid1.DataBind();
 
            con.Close();
 
           
 
        }
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用`datalist`实现数据分页技术,通常会结合JavaScript和AJAX来实现动态加载数据。 具体的步骤如下: 1. 在HTML页面中添加`datalist`元素,设置`id`属性和`data`属性,`data`属性中包含所有数据的列表,例如: ```html <datalist id="data-list"> <option value="1">数据1</option> <option value="2">数据2</option> <option value="3">数据3</option> <option value="4">数据4</option> <option value="5">数据5</option> <option value="6">数据6</option> ... </datalist> ``` 2. 在JavaScript中获取`datalist`元素,并获取`data`属性中的所有数据。 ```javascript var dataList = document.getElementById('data-list'); var dataOptions = dataList.querySelectorAll('option'); ``` 3. 根据每页显示的数据量,计算出需要显示的页数。 ```javascript var pageSize = 5; // 每页显示5条数据 var pageCount = Math.ceil(dataOptions.length / pageSize); // 计算总共需要显示的页数 ``` 4. 根据当前页数,动态生成需要显示的数据选项,并添加到页面上。 ```javascript function showDataList(pageIndex) { var startIndex = (pageIndex - 1) * pageSize; // 计算当前页的起始索引 var endIndex = startIndex + pageSize; // 计算当前页的结束索引 var html = ''; for (var i = startIndex; i < endIndex && i < dataOptions.length; i++) { html += '<option value="' + dataOptions[i].value + '">' + dataOptions[i].text + '</option>'; } dataList.innerHTML = html; } ``` 5. 在页面上添加分页导航,当用户点击不同的页码时,调用`showDataList`方法切换数据。 ```javascript var pagination = document.getElementById('pagination'); for (var i = 1; i <= pageCount; i++) { var pageLink = document.createElement('a'); pageLink.href = 'javascript:void(0)'; pageLink.innerText = i; pageLink.onclick = function() { showDataList(parseInt(this.innerText)); } pagination.appendChild(pageLink); } ``` 6. 可以通过AJAX请求服务器端数据,实现异步加载数据的功能。例如,在用户翻页时,发送AJAX请求,获取新的数据并更新`datalist`元素。 ```javascript function loadData(pageIndex) { var xhr = new XMLHttpRequest(); xhr.open('GET', '/api/data?page=' + pageIndex); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var data = JSON.parse(xhr.responseText); var html = ''; for (var i = 0; i < data.length; i++) { html += '<option value="' + data[i].id + '">' + data[i].name + '</option>'; } dataList.innerHTML = html; } } xhr.send(); } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值