前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >【9】分页浏览的管理

【9】分页浏览的管理

作者头像
用户1075292
发布于 2018-01-23 03:51:57
发布于 2018-01-23 03:51:57
1.3K00
代码可运行
举报
文章被收录于专栏:听雨堂听雨堂
运行总次数:0
代码可运行

阅读目录

  • 分页关注的内容
  • 状态的传递
  • 数据的获取
  • 查询结果的分页
  • 跳页的实现
  • 分页器的样式
  • 页面的完整处理流程

分页关注的内容

前面博文中,通过自行构造HTML表格代码,可以生成易于管理、易于扩展的数据列表。但在实际应用中,数据量动则成百上千,单一页面根本无法完全显示所有数据。把所有数据进行分页后逐页显示,是当前比较流行的数据展示方式。因此,我们需要研究和表格方式展示数据相适应的分页管理机制。

分页显示的核心,是根据页面记录数、页号、查询条件、排序顺序等因素,在数据库中查出该页相对应的数据集(DataTable)。按页返回数据集的功能,已经作为一个基本的功能被封装到AccessDB中了,通过AccessDB.GetPage就可以直接获取。因此,我们只需要关心执行查询以外的各种管理和操作,包括以下方面:

  • 获取总记录集的记录数
  • 页码的有效性的检验
  • 查询条件的传递和应用
  • 向任意页面跳转的支持
  • 分页器的样式控制

状态的传递

分页管理的目的就是要对多个相互关联的页面进行管理,这些页面之间存在着联系,因此必须要能够把当前页面的某些重要状态传递给下一个页面。这些状态包括:

  • 数据表名
  • 当前页号
  • 页面大小
  • 当前查询条件
  • 当前排序条件

ASPX有多种方式在页面间传递状态,如Cookie、Session、URL参数等。其中,以URL参数进行状态传递,是当前很多分页工具的普遍做法。综合考虑需求,使用URL传递参数,需要定义以下参数:

  • TableName
  • PageNo
  • PageSize
  • strWhere
  • strOrder

分页的管理在页面中的体现就是分页器,即一组链接按钮和文字信息,通过它们可以了解当前分页信息,进行各种分页的跳转。有了上述的参数定义后,就可以定义分页的几个主要链接的形式。和前面的表格生成工具相一致,我们把分页器的HTML代码生成也封装到一个函数中:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public string GetPager(int pagecount, int currentpage, string urlpara)
{
	string strPager = "";
	strPager += "<a href='?PageNo=1" + urlpara + "'>首页</a>";
	strPager += " <a href='?PageNo=" + (currentpage - 1 < 1 ? 1 : currentpage - 1).ToString() + urlpara + "'>上页</a>";
	strPager += " " + currentpage.ToString() + "/" + pagecount.ToString();
	strPager += " <a href='?PageNo=" + (currentpage + 1 > pagecount ? pagecount : currentpage + 1).ToString() + urlpara + "'>下页</a>";
	strPager += " <a href='?PageNo=" + pagecount.ToString() + urlpara + "'>末页</a>";

	return strPager;
}

通过语句调用:

strContent += GetPager(20,1,"");

达到HTML结果如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <a href='?PageNo=1'>首页</a> <a href='?PageNo=1'>上页</a> 1/20 <a href='?PageNo=2'>下页</a> <a href='?PageNo=20'>末页</a>

页面显示效果如下:

对于分页器的构造方法而言,需要的参数,就是PageNo而已。但如果页面还有其他的参数,跳转链接应该同时把这些参数传递给下一个页面。因此,我们看到构造方法中有一个urlpara,就是用来传递其他的参数的。

数据的获取

通过传入的参数,就可以进行页面数据的获取了。获取记录的流程是:

取得参数——查询总记录——判断范围,修正页码——查询记录集——构造分页器代码

代码如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
protected void Page_Load(object sender, EventArgs e)
{
	//获取参数
	int PageNo = Convert.ToInt32(Request.QueryString["PageNo"]);
	int PageSize = 10;          //PageSize默认值为10
	//获取总记录数
	int RecordCount = AccessDB.GetCount("select * from book");
	int PageCount = Convert.ToInt32(Math.Ceiling((double)RecordCount / PageSize));    
	//有效性判断
	if (PageNo < 1) PageNo = 1;
	if (PageNo > PageCount) PageNo = PageCount;
	//查询数据
	DataTable dt = AccessDB.GetPage("select * from book",PageSize,PageNo,"ID",false );
	//表格
	strContent = Formater.FullTable(dt, "ID", "tblsample", "|出版年|书号|", "ID=编号;出版单位=出版社;", true, true, "书名", "showbook.aspx?id=KeyField", "del.aspx", "edit.aspx");
	//分页器
	strContent += GetPager(PageSize ,PageNo,"");
}

效果显示如下:

上面的分页器的页面大小PageSize被设置为10,可以修改参数或者改造成为任意指定的大小,非常简单就不再详述了。另外,查询语句中,改用GetPage,同时sql语句不再限定条数了。

查询结果的分页

查询是数据管理的一个常用功能,查询浏览界面和数据浏览界面往往是同一个界面,或者说,查询功能本身就是数据浏览的一部分。对于查询的结果,也需要和浏览所有数据记录一致,采用相同的模式进行操作。所以分页管理必须要把查询综合考虑进来。

如果是查询结果分页浏览,和前面的分页浏览有何不同呢?其实很容易看到,就是需要把上面的sql语句,增加一个查询条件即可。因此,查询分页,实质上就是把查询条件作为参数进行传递。

另外,既然把Where子句进行参数传递,顺便把Order子句也进行传递,这样sql的大多数需求就能够满足了。

在实际应用中,查询输入的条件往往是中文的,因此还需要对strWhere进行编码和解码,把中文转换成为URL可以识别的UTF8编码。

对于上面的Demo页面,增加一个查询对话框,如下:

查询按钮处理如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
//查询按钮事件
protected void Button1_Click(object sender, EventArgs e)
{
	strWhere = " and 书名 like '%" + TextBox1.Text + "%'";
	SetContent(); 
}

由于按钮事件的处理是在Page_Load之后,在Page_Load中已经对strContent进行了一次构造,这里必须重新构造strContent,所以把上面的构造方法放到一个单独的函数SetContent中,在Page_Load中调用一次,这里再调用一次,进行覆盖。

另外,参数strWhere是一个页面级的变量,默认为空串,可以把参数保存起来,在调用SetContent时,取得这个参数并构造查询串。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
string strSQL = "select * from book";

if (strWhere == "")  //没有最近的查询动作,检查有没有传递的参数
{
	if (Request.QueryString["strWhere"] != null)
		strWhere =HttpUtility.UrlDecode( Request.QueryString["strWhere"].ToString());
}
strSQL += " where 1=1" + strWhere;

//...

//分页器
strContent += GetPager(PageCount, PageNo, "&strWhere="+HttpUtility.UrlEncode(strWhere));

上面代码中,strWhere有可能有多种情况:

  • 默认方式打开,为空串
  • 单击查询后的处理,为刚才设定的条件
  • 从分页器的链接传递而来,但是优先级要低于查询的条件

下图是查询“名著”的结果,进行分页浏览的第四页,下方状态栏是鼠标放到“下页”的链接信息:

跳页的实现

除了按顺序浏览,很多页面数量往往非常巨大,因此分页器还需要支持跳页,可以向任意页面跳转。由于通过URL参数进行控制,实际非常简单,参数一修改即可。实现则需要通过js来实现。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
strPager += "<input name='GotoNum' type='text' id='GotoNum'/><a href=\"#\" onclick=\"var url=document.URL;var gn=document.getElementById('GotoNum').value;if(gn!=''){if(url.indexOf('PageNo=')==-1){url=url +(url.indexOf('?')==-1?'?':'&')+ 'PageNo='+gn;}else{ url=url.replace('PageNo=', 'PageNo='+gn+'&wy='); }window.navigate(url);}\" >跳转</a>";

这样构造出的分页器就具备了跳转功能了!

分页器的样式

分页功能几乎是每个数据管理页面都需要的,但其样式总的来说,不会有太多的变化,因此,写好一个通用性较强的样式,就可以到处使用了。这是一个常用的分页器样式。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<style type="text/css"">
	 /** 分页 **/   
	.pager{width:770px;text-align:center;margin:10px 0 10px 0;position:absolute;bottom:0px;} 
	.pager a{display:inline-block;font-size:12px; width:40px; background-color:#FFFFFF;padding:3px;text-align:center;border:1px #CCCCCC dotted;margin:0px 0px 2px 2px;}
	.pager a:link,a:visited{ text-decoration:none;}
	.pager a:hover{text-decoration:underline; background-color:#FF99FF;}
	.pager #GotoNum{width:30px;}
	.pager #reccount,.pager #pageinfo{display:inline-block;margin:0 5px 3px 5px;font-weight:bold;}
</style>

加上这个分页器后,将页面代码放到.pager的div中,效果如下:

页面的完整的处理流程

以下是页面的完成处理流程代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
public partial class book_pager_query : System.Web.UI.Page
{
    protected string strContent;
    string strWhere="";
    protected void Page_Load(object sender, EventArgs e)
    {
        if(!Page.IsPostBack)
            SetContent();
    }
    private void SetContent()
    {
        string strSQL = "select * from book";

        if (strWhere == "")  //没有最近的查询动作,检查有没有传递的参数
        {
            if (Request.QueryString["strWhere"] != null)
                strWhere =HttpUtility.UrlDecode( Request.QueryString["strWhere"].ToString());
        }
        strSQL += " where 1=1" + strWhere;

        //获取参数
        int PageNo = Convert.ToInt32(Request.QueryString["PageNo"]);
        int PageSize = 10;          //PageSize默认值为10
        //获取总记录数
        int RecordCount = AccessDB.GetCount(strSQL);
        int PageCount = Convert.ToInt32(Math.Ceiling((double)RecordCount / PageSize));
        //有效性判断
        if (PageNo < 1) PageNo = 1;
        if (PageNo > PageCount) PageNo = PageCount;
        //查询数据
        DataTable dt = AccessDB.GetPage(strSQL, PageSize, PageNo, "ID", false);
        //表格
        strContent = Formater.FullTable(dt, "ID", "tblsample", "|出版年|书号|", "ID=编号;出版单位=出版社;", true, true, "书名", "showbook.aspx?id=KeyField", "del.aspx", "edit.aspx");
        //分页器
        strContent +="<div class=pager>"+ GetPager(PageCount, PageNo, "&strWhere="+HttpUtility.UrlEncode(strWhere))+"</div>";
    }
    public string GetPager(int pagecount, int currentpage, string urlpara)
    {
        string strPager = "";
        strPager += "<a href=\"?PageNo=1" + urlpara + "\">首页</a>";
        strPager += " <a href=\"?PageNo=" + (currentpage - 1 < 1 ? 1 : currentpage - 1).ToString() + urlpara + "\">上页</a>";
        strPager += " " + currentpage.ToString() + "/" + pagecount.ToString();
        strPager += " <a href=\"?PageNo=" + (currentpage + 1 > pagecount ? pagecount : currentpage + 1).ToString() + urlpara + "\">下页</a>";
        strPager += " <a href='?PageNo=" + pagecount.ToString() + urlpara + "'>末页</a>";

        strPager += "<input name='GotoNum' type='text' id='GotoNum'/><a href=\"#\" onclick=\"var url=document.URL;var gn=document.getElementById('GotoNum').value;if(gn!=''){if(url.indexOf('PageNo=')==-1){url=url +(url.indexOf('?')==-1?'?':'&')+ 'PageNo='+gn;}else{ url=url.replace('PageNo=', 'PageNo='+gn+'&wy='); }window.navigate(url);}\" >跳转</a>";

        return strPager;
    }
    //查询按钮事件
    protected void Button1_Click(object sender, EventArgs e)
    {
        strWhere = " and 书名 like '%" + TextBox1.Text + "%'";
        SetContent(); 
    }
}

GetPager的通用性较强,所以已经集成到CommonCode中了,通过Pager对象可以访问。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2014-05-27 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
DataList分页
  <% @ Import Namespace="System.Data.OleDb" %>
Java架构师必看
2021/03/22
4460
ssm整合之四 分页
张哥编程
2024/12/17
1050
ssm整合之四 分页
​Winfrom 实现DataGridView 自定义分页
今天给大家分享Winform实现DataGridView 自定义分页的案例,感兴趣的朋友可以一起来学习一下。
小明互联网技术分享社区
2023/11/15
4440
​Winfrom 实现DataGridView 自定义分页
MySQL---数据库从入门走向大神系列(十七)-JavaWeb分页技术实例演示2
分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不 是全部数据,而是其中的一部分,如果在其中没有找到自己想要的内容,用户可以通过指定页码或是点上/下一页的方式进行翻页。
谙忆
2021/01/21
4160
MySQL---数据库从入门走向大神系列(十七)-JavaWeb分页技术实例演示2
Asp.net之真假分页大揭秘、使用AspNetPager实现真分页
最近在web界面的时候,遇到了一些非常现实的问题。最让人头疼的问题就是显示数据中的书画作品。这些书画作品都会以图片的形式展示给用户。 起初做的时候并没有想太多,只按着最简单的方式将所有的图片从数据库中查出来并显示在界面中,做完界面之后,自己在数据库中添加了一些数据做测试,发现每次打开网页都很慢。由于原来看视频的时候就知道真假分页,但是当时对于分页并没有深刻的体会,不知道真假分页的优缺点。由于每次打开网页都很慢,让我一下想起来了分页这件事。 面对几十条的数据,网页都会显示特别慢,如果面对上千上万条的记录时,网页就不知道慢成什么样子了,此时系统就可以说报废了。今天我们从本质上将分页问题解决掉。
程序猿小亮
2021/01/28
1.3K0
【自然框架】QuickPager分页控件,新增一种分页方式——伪URL分页(Postback版)
适用场景   先说一下伪URL分页的适用场景。在网站的网页里实现查询功能,如果查询条件比较少的话,还比较好办,把查询条件放到URL里面传递即可。但是如果查询条件过多,就会照成URL的长度过长。既不好看,编写起来也很麻烦。如果查询条件是汉字的话,还有一个编码的问题。 Postback分页   再看看现有的几种分页方式。Postback分页方式可以利用ViewState来很方便的保存查询条件,但是由于采用表单提交的方式实现,搜索引擎不能识别。这个对于网站来说,是一个很难接受的。 URL分页   这个是通
用户1174620
2018/02/26
9340
【自然框架】QuickPagerSQL——专门生成分页用的SQL的类库
   分享一个生成分页用SQL的函数库   一般一提到分页,大家就会想到存储过程,而大多数情况都是在存储过程里面拼接SQL,我觉得与其在存储过程里面拼接,还不如写个程序来拼接。这样更便于维护,而且效率也不差多少。   所以我就写了这个类库—— QuickPagerSQL。   一开始这个功能是在QuickPager分页控件内部的,但是放在一起的话,违反了单一职责。所以把它独立了出来。现在QuickPagerSQL是一个独立的类库,可以单独调用。   他的目的很明确,就是根据已知条件,依据分页算法,来拼接需
用户1174620
2018/02/26
7260
【自然框架】QuickPagerSQL——专门生成分页用的SQL的类库
Java分页查询(真分页)
在开发过程中,我们经常会从数据库中查询数据,然后在客户端显示出来。当数据少时,可以在一个页面显示。当我们查询几百条以上数据,直接显示在一个页面上,不仅浏览不方便,查询效率也会受到影响,这是,我们就可以使用分页查询来解决这个问题。
全栈程序员站长
2022/08/10
3K0
Java分页查询(真分页)
【Bootstrap3.0建站笔记三】AspNetPager分页,每一列都可排序
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/119076.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/09
4190
【Bootstrap3.0建站笔记三】AspNetPager分页,每一列都可排序
100w条记录分页,可以有多快?—— DataReader分页与SQL语句分页的对比测试(在线演示)
  上周看到了两篇关于DataReader分页的帖子,帖子的观点都是可以是用DataReader来分页,而且效率还不错。   根据我的分页经历来看,很难理解DataReader分页怎么就快了呢?理论上就不说了,直接用测试说话。   1、100w条记录,使用SQL语句(max方法)分页,PostBack方式,GridView显示数据。(第一页需要统计总记录数,所以会有点慢)http://demo.naturefw.com/Nonline/QuickPager/200w/GridView.aspx   2、10
用户1174620
2018/02/08
1.5K0
曾今的代码系列——自己的分页控件+存储过程实现分页
项目里面的测试代码,仅供参考 LoginByAjax <title>Ajax登陆</title> <script src="Scripts/common.js" type="text/javascript"></script> <script type="text/javascript"> var xhr; window.onload = function () { xhr = new createXmlHttp();
用户1161731
2018/01/11
7520
曾今的代码系列——自己的分页控件+存储过程实现分页
关于数据库存储过程分页DatagridView BindingNavigator 控件的详细实现
BindingNavigator: 就是DataGridView控件上面的那个,在工程里名字: bindngrDemo
全栈程序员站长
2022/09/14
5030
关于数据库存储过程分页DatagridView BindingNavigator 控件的详细实现
MySQL---数据库从入门走向大神系列(十六)-JavaWeb分页技术实例演示1
分页,是一种将所有数据分段展示给用户的技术.用户每次看到的不 是全部数据,而是其中的一部分,如果在其中没有找到自己想要的内容,用户可以通过指定页码或是点上/下一页的方式进行翻页。
谙忆
2021/01/21
5250
MySQL---数据库从入门走向大神系列(十六)-JavaWeb分页技术实例演示1
【自然框架】QuickPager asp.net 分页控件的Ajax分页方式。
  上次比较匆忙,Ajax的分页方式仅实现了基本功能,或者说只是验证了我的想法。现在对Ajax分页有做了一些调整,现在可以正式用了。   使用方法还是非常简单,可以完全按照URL分页方式来做,只需要把PagerTurnKind 属性 设置为:PagerTurnKind.AjaxForWebControl;就可以了。   然后前台需要引用jquery-1.4.2.min.js和QuickPager-1.0.js。QuickPager-1.0.js是QuickPager需要用的一个js脚本,Demo里面有这个j
用户1174620
2018/02/26
1.9K0
ASP.NET MVC雕虫小技 3、Pager
上篇过后,被评为没有什么技术含量了,但我觉得这并没有什么问题,因为文章不一定会让所有人群受益,文章或适于新手,或适于熟手。但凡是对人有所启发,我觉得写文章有值得。
重典
2022/04/11
4340
ASP.NET MVC雕虫小技 3、Pager
实现滑动分页(微博分页方式)
  现在大家都在上微博,而微博的滑动分页引起了我的兴趣,于是自己模仿着做,以下是这段时间的成果(单纯实现,没有考虑到效率和其他细节问题)   实现内容:以30条记录为一页,每页分三次显示,每当把滚动条拖动到离浏览器底部10px时就显示该页的其余部分,当该页数据全部显示完时就显示页码控件供用户跳转到其他页面。如果数据加载失败,显示重新加载连接,实现用户手动重新加载数据。   页面代码Default.aspx: 1 <head runat="server"> 2 <title>滑动分页</title
^_^肥仔John
2018/01/18
1.4K0
java分页工具集合「建议收藏」
本文现对目前常见的java分页工具进行一次总结与记录,主要是基于自己的主观来进行总结,本文会持续更新,不断地扩充
全栈程序员站长
2022/11/09
2K0
java分页工具集合「建议收藏」
分页和多条件查询功能
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/117449.html原文链接:https://javaforall.cn
全栈程序员站长
2022/07/06
8400
【自然框架】js版的QuickPager分页控件 V2.0
优点: 1、  通过更换模板可以控制各个分页元素(比如首页、末页,页号导航等)的位置和是否显示。 2、  通过更换css可以实现各种UI风格和效果。(附带24套css效果) 3、  Js的方式创建分页UI,不占用服务器资源。 4、  可以通过插件的方式更换各部分js代码。如果自带的js代码不能满足您的需求,那么您自己写的插件实现需要的效果。 5、  Ajax的方式获取记录集,减轻网络负担。 6、  多种调用方式,让“偷懒”和灵活共存。 缺点: 1、  不支持SEO。因为用js和ajax,所以不支持搜索引擎的
用户1174620
2018/02/08
2.6K0
c# asp.net 实现分页(pager)功能
分页PagerHelper辅助类 using System; using System.Web; public class PagerHelper { #region 获取分页的Html代码 /// <summary> /// 获取分页的Html代码 /// 当前页码方法内部根据Request["page"]获取 /// </summary> /// <param name="pageSize">每一页数量</param> /// <param nam
纯粹是糖
2018/03/14
2.4K0
c#  asp.net 实现分页(pager)功能
推荐阅读
相关推荐
DataList分页
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验