为DataGrid的自带分页添加首页、尾页及状态功能

DataGrid提供了分页功能,不过看上去功能有限,但是我们可以通过DataGrid的一些属性来获取状态以及增加首页、尾页功能按钮。这里没有使用DataGrid的自定义分页功能,如果在速度效率不是很讲究的情况下,由DataGrid自己管理分页还是不错的,付出的代价就是要把整个相关数据取出来后再删选指定页的数据。好处就是开发速度快,不需要写分页的存储过程。本文事例使用的是Sql Server中的Northwind数据库。运行界面如下:


对于前台的显示界面,我放了一个DataGrid;四个LinkButton导向按钮;四个Literal来显示纪录状态。

剩下的就是用表格定位。

这里需要设置DataGrid的AllowPaging属性为True,同时设置AllowCustomPaging属性位false(默认为false),设置PagerStyle的Visible属性为False,使前台不显示。

前台的代码如下:

<%@ Page language="c#" Codebehind="DataGridPaging.aspx.cs" AutoEventWireup="false" Inherits="ZZ.AspnetPaging.DataGridPaging" %>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >

<HTML>

     <HEAD>

         <title>DataGridPaging</title>

         <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">

         <meta content="C#" name="CODE_LANGUAGE">

         <meta content="JavaScript" name="vs_defaultClientScript">

         <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">

     </HEAD>

     <body>

         <form id="Form1" method="post" runat="server">

              <TABLE id="Table1" style="FONT-SIZE: 9pt" cellSpacing="1" cellPadding="1" width="450" align="center"

                   border="1">

                   <TR>

                       <TD><asp:datagrid id="DataGrid1" runat="server" PageSize="5" Width="100%" AllowPaging="True">

                                 <HeaderStyle Font-Size="9pt"></HeaderStyle>

                                 <FooterStyle Font-Size="9pt"></FooterStyle>

                                 <PagerStyle Visible="False" Font-Size="9pt" Mode="NumericPages"></PagerStyle>

                            </asp:datagrid></TD>

                   </TR>

              </TABLE>

              <TABLE id="Table2" style="FONT-SIZE: 9pt" cellSpacing="1" cellPadding="1" width="450" align="center"

                   border="1">

                   <TR>

                       <TD style="WIDTH: 207px">

                            <asp:linkbutton id="LBtnFirst" runat="server" CommandName="First">首页</asp:linkbutton>

                            <asp:linkbutton id="LBtnPrev" runat="server" CommandName="Prev">上一页</asp:linkbutton> 

                            <asp:linkbutton id="LBtnNext" runat="server" CommandName="Next">下一页</asp:linkbutton>

                            <asp:linkbutton id="LBtnLast" runat="server" CommandName="Last">尾页</asp:linkbutton> </TD>

                       <TD>第

                            <asp:literal id="LtlPageIndex" runat="server"></asp:literal>页 共

                            <asp:literal id="LtlPageCount" runat="server"></asp:literal>页 每页

                            <asp:literal id="LtlPageSize" runat="server"></asp:literal>条 共

                            <asp:literal id="LtlRecordCount" runat="server"></asp:literal>条

                       </TD>

                   </TR>

              </TABLE>

         </form>

     </body>

</HTML>

后台cs文件代码,DataGridPaging类从System.Web.UI.Page继承,在数据绑定时需要注意没有数据的情况(0页时),以及当页数减少时避免前台正在反页导致缺页。

using System;

using System.Collections;

using System.ComponentModel;

using System.Data;

using System.Drawing;

using System.Web;

using System.Web.SessionState;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

using System.Configuration;

 

namespace ZZ.AspnetPaging

{

     public class DataGridPaging : System.Web.UI.Page

     {

         private static string connString = ConfigurationSettings.AppSettings["ConnString"];

         private int recordCount;

         private int pageCount;

 

         protected System.Web.UI.WebControls.LinkButton LBtnFirst;

         protected System.Web.UI.WebControls.LinkButton LBtnPrev;

         protected System.Web.UI.WebControls.LinkButton LBtnNext;

         protected System.Web.UI.WebControls.LinkButton LBtnLast;

          protected System.Web.UI.WebControls.Literal LtlPageIndex;

         protected System.Web.UI.WebControls.Literal LtlPageCount;

         protected System.Web.UI.WebControls.Literal LtlPageSize;

         protected System.Web.UI.WebControls.Literal LtlRecordCount;

         protected System.Web.UI.WebControls.DataGrid DataGrid1;

    

         private void Page_Load(object sender, System.EventArgs e)

         {

              if(!Page.IsPostBack)

              {

                   DataGridDataBind();

              }

         }

 

         //绑定数据

         private void DataGridDataBind()

         {

              DataSet ds = GetCustomersData();

              recordCount = ds.Tables[0].Rows.Count;

              //获取当前的页数

              pageCount = (int)Math.Ceiling( recordCount * 1.0 / PageSize);

              //避免纪录从有到无时,并且已经进行过反页的情况下CurrentPageIndex > PageCount出错

              if(recordCount ==0)

              {

                   this.DataGrid1.CurrentPageIndex = 0;

              }

              else if(this.DataGrid1.CurrentPageIndex >= pageCount)

              {

                   this.DataGrid1.CurrentPageIndex = pageCount - 1;

              }

              this.DataGrid1.DataSource = ds;

              this.DataGrid1.DataBind();

              NavigationStateChange();

         }

 

         #region Web 窗体设计器生成的代码

         override protected void OnInit(EventArgs e)

         {

              //

              // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。

              //

              InitializeComponent();

              base.OnInit(e);

         }

        

         ///<summary>

         ///设计器支持所需的方法 - 不要使用代码编辑器修改

         ///此方法的内容。

         ///</summary>

         private void InitializeComponent()

         {   

              this.LBtnFirst.Click += new System.EventHandler(this.LBtnNavigation_Click);

              this.LBtnPrev.Click += new System.EventHandler(this.LBtnNavigation_Click);

              this.LBtnNext.Click += new System.EventHandler(this.LBtnNavigation_Click);

              this.LBtnLast.Click += new System.EventHandler(this.LBtnNavigation_Click);

              this.Load += new System.EventHandler(this.Page_Load);

 

         }

         #endregion

 

         private void LBtnNavigation_Click(object sender, System.EventArgs e)

         {

              LinkButton btn = (LinkButton)sender;

              switch(btn.CommandName)

              {

                   case "First":

                       PageIndex = 0;

                       break;

                   case "Prev"://if( PageIndex > 0 )

                            PageIndex = PageIndex - 1;

                       break;

                   case "Next"://if( PageIndex < PageCount -1)

                            PageIndex = PageIndex + 1;

                       break;

                   case "Last":

                       PageIndex = PageCount - 1;

                       break;

              }

              DataGridDataBind();             

         }

         //数据绑定

         public static DataSet GetCustomersData()

         {

              SqlConnection conn = new SqlConnection(connString);

              string sqlStr = "SELECT CustomerID, CompanyName,Address,Phone FROM Customers";

              SqlCommand comm = new SqlCommand( sqlStr ,conn);

              SqlDataAdapter dataAdapter = new SqlDataAdapter(comm);

              DataSet ds = new DataSet();

              dataAdapter.Fill(ds);

              return ds;

         }

 

         ///<summary>

         ///控制导航按钮或数字的状态

         ///</summary>

         public void NavigationStateChange()

         {

              if( PageCount <= 1 )//( RecordCount <= PageSize )//小于等于一页

              {

                   this.LBtnFirst.Enabled = false;

                   this.LBtnPrev.Enabled = false;

                   this.LBtnNext.Enabled = false;

                   this.LBtnLast.Enabled = false;

              }

              else //有多页

              {

                   if( PageIndex == 0 )//当前为第一页

                   {

                       this.LBtnFirst.Enabled = false;

                       this.LBtnPrev.Enabled = false;

                       this.LBtnNext.Enabled = true;

                       this.LBtnLast.Enabled = true;

                                    

                   }

                   else if( PageIndex == PageCount - 1 )//当前为最后页

                   {

                       this.LBtnFirst.Enabled = true;

                       this.LBtnPrev.Enabled = true;

                       this.LBtnNext.Enabled = false;

                       this.LBtnLast.Enabled = false;

                                    

                   }

                   else //中间页

                   {

                       this.LBtnFirst.Enabled = true;

                       this.LBtnPrev.Enabled = true;

                       this.LBtnNext.Enabled = true;

                       this.LBtnLast.Enabled = true;

                   }

                  

              }

              if(RecordCount == 0)//当没有纪录时DataGrid.PageCount会显示1页

                   this.LtlPageCount.Text = "0";

              else

                   this.LtlPageCount.Text = PageCount.ToString();

              if(RecordCount == 0)

                   this.LtlPageIndex.Text = "0";

              else

                   this.LtlPageIndex.Text = (PageIndex + 1).ToString();//在有页数的情况下前台显示页数加1

              this.LtlPageSize.Text = PageSize.ToString();

              this.LtlRecordCount.Text = RecordCount.ToString();

         }

 

        

         // 总页数

         public int PageCount

         {

              get{return this.DataGrid1.PageCount;}

         }

         //页大小

         public int PageSize

         {

              get{return this.DataGrid1.PageSize;}

         }

         //页索引,从零开始

         public int PageIndex

         {

              get{return this.DataGrid1.CurrentPageIndex;}

              set{this.DataGrid1.CurrentPageIndex = value;}

         }

         // 纪录总数

         public int RecordCount

         {

              get{return recordCount;}

              set{recordCount = value;}

         }

     }

}

 

如果需要追求执行效率,而且数据量比较大的情况下建议使用DataGrid的自定义分页功能。存储过程执行只取一页的情况。如果有什么好的建议或发现问题请在Blog上留言。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如题,项目要用到jeasyui,所以必须要下载它的demo,获取相应的js,css等等的文件 jeasyui的下载地址:http://www.jeasyui.com/download/index.php <!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> <title></title> <link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css" /> <link href="easyui/themes/icon.css" rel="stylesheet" type="text/css" /> <link href="easyui/demo.css" rel="stylesheet" type="text/css" /> <script src="easyui/jquery.min.js" type="text/javascript"></script> <script src="easyui/jquery.easyui.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#tab").datagrid({ // width: 600, //宽度 height: 400, //高度 singleSelect: true, //选中一行的设置 fitColumns:true, url: "EditorUserHandler.ashx", //请求路径 title: "用户信息", //标题 iconCls: "icon-add", //图标 // collapsible: true, //隐藏按钮 //冻结列 // frozenColumns: [[{ field: "chk", "checkbox": true}]], //复选框 //列 rownumbers: false, //传输参数 queryParams: { "action": "query" }, pagination: true, toolbar: "#tool" }); $("#tab").datagrid('getPager').pagination({ beforePageText: "第", afterPageText: "页", displayMsg: "当前 {from} - {to}条数据 共{total} 条数据", pageSize: 10, pageList: [5, 10, 15, 20, 30] }); }) </script> <!--//打印--> <script type="text/javascript"> function CreateFormPage(strPrintName, printDatagrid) { var tableString = '<div><table width="100%"><tr style="text-align:center;"><td colspan="2" style="font-size:24px; font-weight:bold;"><span style="text-decoration:underline;"> </span>年<span style="text-decoration:underline;"> </span>半年广东省房屋市政工程安全生产文明施工示范工地申报项目汇总表</td></tr><tr><td style="text-align:left;">地区(部门)公 章: </td><td style="text-align:right;">报送时间: 年 月 日</td></tr></table> <table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid.datagrid("options").columns; // 得到columns对象 var nameList = ''; // 载入title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n<tr>'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i < frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n<th width="' + frozenColumns[index][i].width + '"'; if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList += ',{"f":"' + frozenColumns[index][i].field + '", "a":"' + frozenColumns[index][i].align + '"}'; } tableString += '>' + frozenColumns[0][i].title + '</th>'; } } } for (var i = 0; i < columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n<th width="' + columns[index][i].width + '"'; if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList += ',{"f":"' + columns[index][i].field + '", "a":"' + columns[index][i].align + '"}'; } tableString += '>' + columns[index][i].title + '</th>'; } } tableString += '\n</tr>'; }); } // 载入内容 var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行 var nl = eval('([' + nameList.substring(1) + '])'); for (var i = 0; i < rows.length; ++i) { tableString += '\n<tr>'; $(nl).each(function (j) { var e = nl[j].f.lastIndexOf('_0'); tableString += '\n<td'; if (nl[j].a != 'undefined' && nl[j].a != '') { tableString += ' style="text-align:' + nl[j].a + ';"'; } tableString += '>'; if (e + 2 == nl[j].f.length) { tableString += rows[i][nl[j].f.substring(0, e)]; } else tableString += rows[i][nl[j].f]; tableString += '</td>'; }); tableString += '\n</tr>'; } tableString += '\n</table></div>'; window.showModalDialog("/print.htm", tableString, "location:No;status:No;help:No;dialogWidth:800px;dialogHeight:600px;scroll:auto;"); } </script> <!--//导出--> <script type="text/javascript"> function ChangeToTable(printDatagrid) { var tableString = '<table cellspacing="0" class="pb">'; var frozenColumns = printDatagrid.datagrid("options").frozenColumns; // 得到frozenColumns对象 var columns = printDatagrid.datagrid("options").columns; // 得到columns对象 var nameList = new Array(); // 载入title if (typeof columns != 'undefined' && columns != '') { $(columns).each(function (index) { tableString += '\n<tr>'; if (typeof frozenColumns != 'undefined' && typeof frozenColumns[index] != 'undefined') { for (var i = 0; i < frozenColumns[index].length; ++i) { if (!frozenColumns[index][i].hidden) { tableString += '\n<th width="' + frozenColumns[index][i].width + '"'; if (typeof frozenColumns[index][i].rowspan != 'undefined' && frozenColumns[index][i].rowspan > 1) { tableString += ' rowspan="' + frozenColumns[index][i].rowspan + '"'; } if (typeof frozenColumns[index][i].colspan != 'undefined' && frozenColumns[index][i].colspan > 1) { tableString += ' colspan="' + frozenColumns[index][i].colspan + '"'; } if (typeof frozenColumns[index][i].field != 'undefined' && frozenColumns[index][i].field != '') { nameList.push(frozenColumns[index][i]); } tableString += '>' + frozenColumns[0][i].title + '</th>'; } } } for (var i = 0; i < columns[index].length; ++i) { if (!columns[index][i].hidden) { tableString += '\n<th width="' + columns[index][i].width + '"'; if (typeof columns[index][i].rowspan != 'undefined' && columns[index][i].rowspan > 1) { tableString += ' rowspan="' + columns[index][i].rowspan + '"'; } if (typeof columns[index][i].colspan != 'undefined' && columns[index][i].colspan > 1) { tableString += ' colspan="' + columns[index][i].colspan + '"'; } if (typeof columns[index][i].field != 'undefined' && columns[index][i].field != '') { nameList.push(columns[index][i]); } tableString += '>' + columns[index][i].title + '</th>'; } } tableString += '\n</tr>'; }); } // 载入内容 var rows = printDatagrid.datagrid("getRows"); // 这段代码是获取当前页的所有行 for (var i = 0; i < rows.length; ++i) { tableString += '\n<tr>'; for (var j = 0; j < nameList.length; ++j) { var e = nameList[j].field.lastIndexOf('_0'); tableString += '\n<td'; if (nameList[j].align != 'undefined' && nameList[j].align != '') { tableString += ' style="text-align:' + nameList[j].align + ';"'; } tableString += '>'; if (e + 2 == nameList[j].field.length) { tableString += rows[i][nameList[j].field.substring(0, e)]; } else tableString += rows[i][nameList[j].field]; tableString += '</td>'; } tableString += '\n</tr>'; } tableString += '\n</table>'; return tableString; } function Export(strXlsName, exportGrid) { var f = $('<form action="export.aspx" method="post" id="fm1"></form>'); var i = $('<input type="hidden" id="txtContent" name="txtContent" />'); var l = $('<input type="hidden" id="txtName" name="txtName" />'); i.val(ChangeToTable(exportGrid)); i.appendTo(f); l.val(strXlsName); l.appendTo(f); f.appendTo(document.body).submit(); try { document.body.removeChild(f); } catch (e) { } } </script> </head> <body> <a href="javascript:void(0);" onclick="CreateFormPage('打印测试', $('#tab'));">打印</a> <a href="javascript:void(0);" onclick="Export('导出excel', $('#tab'));">导出</a> <table id="tab"> <thead> <tr> <th data-options="field:'flid',width:80" rowspan="2">编号</th> <th data-options="field:'flname',width:100" rowspan="2">姓名</th> <th colspan="3">详细信息</th> <th colspan="2">登录信息</th> </tr> <tr> <th data-options="field:'fladdress',width:80,align:'right'">地址</th> <th data-options="field:'flphone',width:80,align:'right'">电话</th> <th data-options="field:'flemail',width:240">邮箱</th> <th data-options="field:'flloginname',width:60,align:'center'">登录名</th> <th data-options="field:'flloginpwd',width:60,align:'center'">密码</th> </tr> </thead></table> <div id="tool"> <table border="0" cellspacing="0" cellpadding="0" width="100%" class="easyui-datagrid"> <!--<tr> <td style=" padding-left:2px"> <a href="#" class="easyui-linkbutton" id="id_add" iconcls="icon-add" plain="true" onclick="add_dg();" >添加</a> <a href="#" class="easyui-linkbutton" id="id_edit" iconCls="icon-edit" plain="true" onclick="edit_dg();">修改</a> <a href="#" class="easyui-linkbutton" id="id_cancel " onclick="delete_dg();" iconcls="icon-cancel" plain="true">删除</a> </td> </tr>--> </table> </div> <br /> <div id="dd_dg" style=" display:none"> <form id="fm_dg"> 编号:<input id="flid" name="flid" class="easyui-numberbox" type="text" required="true" missingMessage="请输入编号" /> <br /> 姓名:<input id="flname" name="flname" class="easyui-validatebox" required="true" missingMessage="请输入姓名"/> <br /> 地址:<input id="fladdress" name="fladdress" class="easyui-validatebox" type="text" required="true" missingMessage="请输入地址" /> <br /> 电话:<input id="flphone" name="flphone" class="easyui-validatebox" type="text" required="true" missingMessage="请输入电话" /> <br /> 邮箱:<input id="flMail" name="flMail" class="easyui-validatebox" type="text" validType="email" required="true" missingMessage="请输入邮箱" /> <br /> 登录名:<input id="flloginname" name="flloginname" class="easyui-validatebox" type="text" required="true" missingMessage="请输入登录名" /> <br /> 密码:<input type="password" id="flloginpwd" name="flloginpwd" class="easyui-validatebox" required="true" missingMessage="请输入密码" /> <br /> </form> </div> </body> </html>

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值