牛腩新闻发布系统不知不觉就看完了,第一次接触网页制作,感觉很多知识点都是新的,虽然新,但是有种似曾相识的感觉,利用米老师的织网学习法,很快便消化了!由于学到的东西太多太多,而且很杂,就没有发到博客上来。看到最后,牛腩大哥没有做分页,但是我感觉这是一个相当重要的功能,几乎是网页必备。作为一个锻炼的机会,自己实现了一下分页功能。第一次做,显得很生疏,为了方便以后参考和方便更多人学习,特总结成一篇文章。本文使用的分页控件为AspNetPager。
注意这篇文章不适合没有任何网页编程经验的人看,我写的只是关键步骤,宏观模块,并没有细节实现,但是我可以保证补全代码之后绝对可以实现。看懂这个必须是你亲自用ASP.NET编写过网页程序。
还是那句话,我的方法肯定不是最好的,如果您有好的建议欢迎与我交流!!
效果图:
分页控件样式设置:
/*拍拍网风格*/
.paginator { font: 11px Arial, Helvetica, sans-serif;padding:10px 20px 10px 0; margin: 0px;}
.paginator a {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;margin-right:2px}
.paginator a:visited {padding: 1px 6px; border: solid 1px #ddd; background: #fff; text-decoration: none;}
.paginator .cpb {padding: 1px 6px;font-weight: bold; font-size: 13px;border:none}
.paginator a:hover {color: #fff; background: #ffa501;border-color:#ffa501;text-decoration: none;}
/*淘宝风格*/
.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;}
说明:保存到css文件中,引用即可。这两个样式任选一个。。。。不要都粘贴进去
web页面分页控件引用设置:
<table cellpadding="0" cellspacing="0" align="center" width="99%" class="border">
<tr>
<td align="left" colspan="2">
<webdiyer:AspNetPager ID="anpNewsPage" CssClass="paginator" CurrentPageButtonClass="cpb" runat="server" AlwaysShow="True"
FirstPageText="首页" LastPageText="尾页" NextPageText="下一页" PageSize="10" PrevPageText="上一页" ShowCustomInfoSection="Left"
ShowInputBox="Never" onpagechanged="anpNewsPage_PageChanged" CustomInfoTextAlign="Left" LayoutType="Table" >
</webdiyer:AspNetPager>
</td>
</tr>
</table>
说明:分页控件AspNetPager下载地址:http://www.webdiyer.com/Controls/AspNetPager/Downloads。先引用AspNetPager.dll,然后添加到工具箱中即可。
后台响应代码:
/// <summary>
/// 分页选择新闻
/// </summary>
/// <param name="sender">系统内置</param>
/// <param name="e">系统内置</param>
protected void anpNewsPage_PageChanged(object sender, EventArgs e)
{
repNews.DataSource = new BLL_News().selectPage(anpNewsPage.CurrentPageIndex);
repNews.DataBind();
}
说明:由于这是从我的工程中抽出来的代码,所以看起来可能比较困难。这个方法是来自于AspNetPager控件的onpagechanged="anpNewsPage_PageChanged"事件,所以名字当然要一样了,在AspNetPager控件中找到onpagechanged事件双击即可,但是我没找到,我是手写的。new BLL_News().selectPage()这个方法就是调用的数据库中的proSelectPage存储过程(见下边的“数据库存储过程”),anpNewsPage.CurrentPageIndex当然就是获取当前是第几页,然后传入存储过程,选出该页的数据。利用proSelectPage存储过程选出当前页的数据后,设置为repNews对象的数据源。repNews是什么呢?它是一个Repeater控件(把数据绑定到repNews对象后,利用一个ItemTemplate模版就可以轻松显示该页的数据了,至于具体如何读数据,不是本文的讨论范围。。百度一下就有了)。需要注意的是:在页面加载的时候,要设置分页控件的总记录数,可以用如下SQL语句获得:select
count(*) as allCount from News 。
数据库存储过程:
SET ANSI_NULLS ON
GO
SET QUOTED_IDENTIFIER ON
GO
-- =============================================
-- Author: yy
-- Create date: 2011-12-28
-- Description: 分页读取数据
-- =============================================
CREATE PROCEDURE proSelectPage
@pageNow int -- 当前页数
AS
BEGIN
SELECT TOP 10 * FROM News -- 每页显示多少条数据在这设置(语句中的10)
WHERE id NOT IN
(SELECT TOP (10*(@pageNow-1)) id FROM News ORDER BY id) -- 设置显示多少条数据这里的10也要改
ORDER BY id
END
GO
说明:存储过程中的id是表的主键,设置为自增长即可。News是指要读取的表
分享到:
相关推荐
ASP.NET分页控件(AspNetPager)
asp.net分页控件 AspNetPager 包含AspNetPager.xml
AspNetPager分页控件源代码.rar
这个分页控件名为AspNetPager控件,是Asp.net上使用率最高的分页控件,想怎么分就怎么分.附带'超详细代码注释",好用请给评论. 基本步骤: 1.拖拽控件(存放到到Bin目录下,再拖入工具箱) 2.粘贴复制(已放出实例源码) 3....
asp.net第三方控件AspNetPager分页控件
AspNetPager针对ASP.NET分页控件的不足,提出了与众不同的解决asp.net中分页问题的方案,即将分页导航功能与数据显示功能完全独立开来,由用户自己控制数据的获取及显示方式,因此可以被灵活地应用于任何需要实现...
asp.net通用分页控件AspNetPager7.2
asp.net分页控件AspNetPager4.0
AspNetPager ASP.net分页控件
AspNetPager针对ASP.NET分页控件的不足,提出了与众不同的解决asp.net中分页问题的方案,即将分页导航功能与数据显示功能完全独立开来,由用户自己控制数据的获取及显示方式,因此可以被灵活地应用于任何需要实现...
<webdiyer:AspNetPager ID="AspNetPager1" runat="server" CustomInfoHTML="每页%PageSize%条 第%CurrentPageIndex%页 共%PageCount%页 共%RecordCount%条" CustomInfoTextAlign="left" HorizontalAlign="Left" ...
ASP .NET Webform 利用AspNetPager控制实现分页
一、AspNetPager分页控件 分页是Web应用程序中最常用到的功能之一,在ASP.NET中,虽然自带了一个可以分页的DataGrid(asp.net 1.1)和GridView(asp.net 2.0)控件,但其分页功能并不尽如人意,如可定制性差、无法...
使用AspNetPager控件,进行简单的 分页。里面包含 真假分页的对比。当然,仅仅是一个例子而已,就没有美化了。
ASP.NET实例开发源码——AspNetPager分页控件(附实例代码)
<webdiyer:aspnetpager id=\"AspNetPager1\" runat=\"server\" horizontalalign=\"Left\" onpagechanged=\"AspNetPager1_PageChanged\" showcustominfosection=\"Left\" width=\"37%\" meta:resourceKey=\...
自己改写的ASP.NET分页控件 在 张子阳 "Asp.Net 分页显示控件http://www.tracefact.net/asp-net/Extensible-Paging-User-Control.aspx" ...并参照 杨涛 "AspNetPager分页控件http://www.webdiyer.com " 感谢两位作者
AspNetPager分页控件
三种风格的分页控件以及分页控件的 dll
源码使用AspNetPager.dll做分页控件,这个控件据说目前是网上使用最多的。支持gridview和reapter控件。