AspNetPager控件+repeater+Ajax+存储过程实现高效分页,还有漂亮控件样式

--=============================================--Description:    分页，用到了ROW_NUMBER()--=============================================
create PROCEDURE [dbo].[proc_SplitPage]
@tblName   varchar(255),       --表名
@strFields varchar(1000) = '*', --需要返回的列，默认*
@strOrder varchar(255)='',      --排序的字段名，必填
@strOrderType varchar(10)='ASC', --排序的方式,默认ASC
@PageSize   int = 10,          --页尺寸,默认10
@PageIndex int = 1,           --页码,默认1
@strWhere varchar(1500) = '' --查询条件 (注意: 不要加 where)
ASdeclare @strSQL   nvarchar(4000)if @strWhere !=''
set @strWhere='where'+@strWhereset @strSQL=
'SELECT *,(select count(1) from'+@tblName+') as counts FROM ('+'SELECT ROW_NUMBER() OVER (ORDER BY'+@strOrder+' '+@strOrderType+') AS pos,'+@strFields+' '+'FROM'+@tblName+' '+@strWhere+
') AS sp WHERE pos BETWEEN'+str((@PageIndex-1)*@PageSize+1)+'AND'+str(@PageIndex*@PageSize)print @strSQL
EXEC sp_executesql @strSQL

usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Text;usingSystem.Data;usingSystem.Data.SqlClient;namespacerepeaterDAO
{public classMessageDAO{private SQLHelper sqlHelper = null;private SqlCommand cmd = null;publicMessageDAO(){sqlHelper= new SQLHelper(); 　　　　/*SQLHelper 助手类*/}/**  获取分页数据*　tblName:表名　strOrder:以哪个字段排序　strOrderType:数据显示顺序类型如desc　*　PageSize:一页显示的数据数目　PageIndex当前页码索引　strWhere:查询条件　*/
<pre name="code" class="csharp">      public List<AirBtc.Entity.Sys_News> GetList(string tblName, string strOrder, string strOrderType, int PageSize, int PageIndex, stringstrWhere){List<AirBtc.Entity.Sys_News> list = new List<AirBtc.Entity.Sys_News>();string cmdText = "proc_SplitPage";SqlParameter[] paras= newSqlParameter[] {new SqlParameter("@tblName", tblName),new SqlParameter("@strOrder", strOrder),new SqlParameter("@strOrderType", strOrderType),new SqlParameter("@PageSize", PageSize),new SqlParameter("@PageIndex", PageIndex),new SqlParameter("@strWhere", strWhere)  };using (SqlDataReader sdr =SqlHelper.ExecuteReader(CommandType.StoredProcedure, cmdText, paras)){while(sdr.Read()){list.Add(DataReaderToEntity(sdr));list.Capacity= Convert.ToInt32(sdr["counts"]);}};returnlist;}

增加anp控件方法: vs20008/vs2010 左侧->工具箱->常规->选项->浏览->选择AspNetPage.dll
把控件拉入前台页面如：default.aspx 想要显示AspNetPage处。

AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2._Default" %><%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %><!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><asp:Repeater ID="rep" runat="server"><HeaderTemplate><table></HeaderTemplate><ItemTemplate><tr><td><%# Eval("newsTitle") %> <!-- 数据列绑定 --></td></tr></ItemTemplate><FooterTemplate></table></FooterTemplate></asp:Repeater><webdiyer:AspNetPager ID="anp" runat="server" onpagechanged="anp_PageChanged">　　<!-- AspNetPage控件 --></webdiyer:AspNetPager></div></form>
</body>
</html>

usingSystem.Collections.Generic;usingSystem.Linq;usingSystem.Web;usingSystem.Web.UI;usingSystem.Web.UI.WebControls;usingAirBtc.Entity;usingAirBtc.BLL;usingSystem.Collections.Generic;namespaceWebApplication2
{public partial class_Default : System.Web.UI.Page{protected void Page_Load(objectsender, EventArgs e){if (!IsPostBack){RepBind();}}/*repeater控件绑定方法*/private voidRepBind(){Sys_News_Rule rule=Sys_News_Rule.GetInstance();List<AirBtc.Entity.Sys_News> list = rule.GetList("News", "newsAddTime", "desc", anp.PageSize, anp.CurrentPageIndex, "");rep.DataSource=list; rep.DataBind();anp.RecordCount=Convert.ToInt32(list.Capacity);}/// <summary>///分页/// </summary>/// <param name="sender"></param>/// <param name="e"></param>protected void anp_PageChanged(objectsender, EventArgs e){RepBind();}
}}

以上是非常原始的样式，非常难看，所以，如果要达到良好的用户体验，还得加上以下的样式代码。

 /*拍拍风格*/.paginator{font:12px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0;margin:0px;}.paginator a{padding:5px 10px;border:solid 1px #ddd;background:#fff;text-decoration:none;margin-right:2px}.paginator a:visited{padding:5px 10px;border:solid 1px #ddd;background:#fff;text-decoration:none;}.paginator .cpb{padding:5px 10px;font-weight:bold;font-size:13px;border:none;}.paginator a:hover{color:#fff;background:#ffa501;border-color:#ffa501;text-decoration:none;padding:5px 10px;}
/*淘宝风格*/.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;}

实际上，当数据多的时候，样式还是不能很好的控制。只好用jquery控制：$(".paginator").css("width","100%");

通常，当分页数量多的时候，最好设置一个调转的文本框和按钮，这个可以在控件的属性里设置。比如超过5页的时候显示跳转文本框。可是用以上代码，当显示跳转文本框的时候，样式不好看。所以，在上面添加上。

在分页控件应用这个paginator样式就可以了。UrlPaging="True"，用url传值会好一点，个人觉得，因为就算不用它也会autoPostBlack，一样会跳动。另外，要使得这个控件实现无刷新的效果，就必须将他放置在updatePannel里面。暂时没能找到更好的方法。但是发现很多都是没有实现无刷新的，那就先这样吧。

.paginator input[type="text"]
{
position: absolute;
left: 600px;
top: 4px;
border:solid 1px #ddd;
height:23px;
width:230px;
padding-left:5px;
padding-right:5px;
}
.paginator input[type="submit"]
{
position: absolute;
left: 650px;
top: 4px;
border:1px solid #ddd;
height:27px;
padding-left:10px;
padding-right:10px;
background-color:White;
}
.paginator input[type="submit"]:hover
{cursor: pointer;
}

sql分页:

 string selectSQL = "declare @row int;select @row=count(*) from Hotel_Detail where " + where + ";SELECT TOP " + pageSize + " @row as Record, * FROM Hotel_Detail WHERE " + where + " and hotelId NOT IN(SELECT TOP (" + pageSize + "*(" + indexPage + "-1)) hotelId FROM Hotel_Detail where " + where + "ORDER BY UpdateDate desc)ORDER BY UpdateDate desc";

补充：

在实践过程中，发现有一个页面，当自己点击第二页的时候，虽然地址栏上面是第二页的值，但是页面数据没有发生改变。通过调试，发现CurrentPageIndex仍为第一页，

后来用expertMore_PageChanging事件的e.NewPageIndex才解决。

/// <summary>
/// 分页
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void expertMore_PageChanging(object src, Wuqi.Webdiyer.PageChangingEventArgs e)
{
this.expertMore.CurrentPageIndex = e.NewPageIndex;
DataBind();
}

实现Ajax的关键是，设置AspNetPager的UrlPaging=false。天呐！搞了好久，也没个人告诉我一下，浪费了一天几个小时的时间。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="subjectAdmin.aspx.cs" Inherits="WebUI.SystemPage.subjectAdmin" %><%@ Register Assembly="AspNetPager" Namespace="Wuqi.Webdiyer" TagPrefix="webdiyer" %><!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><link href="../commonCss/common.css" rel="stylesheet" type="text/css" /><link href="css/subjectAdmin.css" rel="stylesheet" type="text/css" /><link href="../artDialog4.1.6/skins/simple.css" rel="stylesheet" type="text/css" /><script src="js/jquery-1.7.2.min.js" type="text/javascript"></script><script src="js/aubjectAdmin.js" type="text/javascript"></script><script src="../artDialog4.1.6/artDialog.source.js" type="text/javascript"></script><script src="../artDialog4.1.6/plugins/iframeTools.source.js" type="text/javascript"></script>
</head>
<body><form id="form1" runat="server"><div id="list" class="box"><a href="javascript:void(0)"><div>添加科目</div></a></div><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><div style="width:100%; margin-top:10px;" class="box"><table id="subjectTabel" style="width:100%; border-collapse:collapse; border:1px solid #71B90B" border="1"><asp:Repeater ID="Repeater1" runat="server"><HeaderTemplate><tr style="background-color:#71B90B; color:White; font-weight:bold;"><th>编号</th><th>科目名称</th><th>操作</th></tr></HeaderTemplate><ItemTemplate><tr><td><%#Eval("SID") %></td><td><%#Eval("SName") %></td><td>dsf</td></tr></ItemTemplate></asp:Repeater></table><webdiyer:AspNetPager ID="AspNetPager1" runat="server" CssClass="paginator" CustomInfoHTML="共%PageCount%页，当前为第%CurrentPageIndex%页，每页%PageSize%条"ShowCustomInfoSection="Right"CustomInfoSectionWidth="100%"onpagechanged="AspNetPager1_PageChanged" ToolTip="分页按钮，点击即可分页">></webdiyer:AspNetPager></div></ContentTemplate></asp:UpdatePanel></form>
</body>
</html>

若要实现静态化URL分页，注意网页的路径要绝对路径。

转载于:https://www.cnblogs.com/hougelou/archive/2013/01/10/2854493.html

AspNetPager控件+repeater+Ajax+存储过程实现高效分页,还有漂亮控件样式相关推荐

开始使用asp.net ajax的控件工具包AJAX Control Toolkit
我们来为我们的 toolbox 添加一些资源 , 这个要通过下载安装 asp.net ajax 工具包完成.登录 www.asp.net 点击 AJAX 按钮,然后找到 ASP.NET AJAX Co ...
jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件（ScriptManager、ScriptManagerProxy
[索引页] [×××] 新瓶旧酒ASP.NET AJAX(1) - 简单地过一下每个控件(ScriptManager.ScriptManagerProxy.UpdatePanel. UpdatePro ...
重复控件Repeater和数据列表控件DataList
5.3 重复控件Repeater和数据列表控件DataList 本节介绍ASP.NET中两个数据迭代控件:Repeater和DataList控件.其中,Repeater控件又被称为重复控件:Data ...
Repeater的 Items属性、Items里面的控件有几个？
这是我的文章备份,有空请到我的网站走走, http://www.dotblogs.com.tw/mis2000lab/ 才能掌握我提供的第一手信息,谢谢您. http://www.dotblogs.c ...
Asp.Net Web控件（五）（可分页Repeater的使用）
在上一节中的示例中使用url分页,使用也是非常简单. 这一节将讲述其他属性,包括如何使用postback分页.其实控件在默认情况下市使用postback分页的. 下面示例是使用postback分页: ...
控件包含代码块(即% ... %)，因此无法修改控件集合解决
控件包含代码块(即<% ... %>),因此无法修改控件集合除了其他人分析的原因之外,还有我遇到的: 有人把Repeater里数据绑定写成<%=XXX%>,改了之后就没有那个 ...
atitit. 浏览器插件控件 applet 的部署，签名总结浏览器插件控件的签名安全机制o9o...
atitit. 浏览器插件控件 applet 的部署,签名总结浏览器插件控件的签名安全机制o9o 1. 服务器部署签名 1 2. 签名流程::生成密钥..导出cert正书,签名 1 3. ...
SQL2005结合ROW_NUMBER()高效分页存储过程
SQL2005结合ROW_NUMBER()高效分页存储过程: CREATE PROCEDURE [dbo].[sp_Accounts_GetUserListPaged] @PageIndex ...
QT [007] QT UI 的控件操控问题 - 如何操控多嵌套的UI控件
前言:QT 的多层叠和嵌套的控件有很多.我在实际尝试去尝试操控这项控件的是否,发现如何要找到一组控件里面的对象去操作,总是找不到方法,本文,将介绍如何解决这个问题. 我们看下面这个例子: ref: h ...

AspNetPager控件+repeater+Ajax+存储过程实现高效分页,还有漂亮控件样式

AspNetPager控件+repeater+Ajax+存储过程实现高效分页,还有漂亮控件样式相关推荐

最新文章

热门文章