【9】分页浏览的管理
阅读目录
- 分页关注的内容
- 状态的传递
- 数据的获取
- 查询结果的分页
- 跳页的实现
- 分页器的样式
- 页面的完整处理流程
分页关注的内容
前面博文中,通过自行构造HTML表格代码,可以生成易于管理、易于扩展的数据列表。但在实际应用中,数据量动则成百上千,单一页面根本无法完全显示所有数据。把所有数据进行分页后逐页显示,是当前比较流行的数据展示方式。因此,我们需要研究和表格方式展示数据相适应的分页管理机制。
分页显示的核心,是根据页面记录数、页号、查询条件、排序顺序等因素,在数据库中查出该页相对应的数据集(DataTable)。按页返回数据集的功能,已经作为一个基本的功能被封装到AccessDB中了,通过AccessDB.GetPage就可以直接获取。因此,我们只需要关心执行查询以外的各种管理和操作,包括以下方面:
- 获取总记录集的记录数
- 页码的有效性的检验
- 查询条件的传递和应用
- 向任意页面跳转的支持
- 分页器的样式控制
状态的传递
分页管理的目的就是要对多个相互关联的页面进行管理,这些页面之间存在着联系,因此必须要能够把当前页面的某些重要状态传递给下一个页面。这些状态包括:
- 数据表名
- 当前页号
- 页面大小
- 当前查询条件
- 当前排序条件
ASPX有多种方式在页面间传递状态,如Cookie、Session、URL参数等。其中,以URL参数进行状态传递,是当前很多分页工具的普遍做法。综合考虑需求,使用URL传递参数,需要定义以下参数:
- TableName
- PageNo
- PageSize
- strWhere
- strOrder
分页的管理在页面中的体现就是分页器,即一组链接按钮和文字信息,通过它们可以了解当前分页信息,进行各种分页的跳转。有了上述的参数定义后,就可以定义分页的几个主要链接的形式。和前面的表格生成工具相一致,我们把分页器的HTML代码生成也封装到一个函数中:
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结果如下:
<a href='?PageNo=1'>首页</a> <a href='?PageNo=1'>上页</a> 1/20 <a href='?PageNo=2'>下页</a> <a href='?PageNo=20'>末页</a>
页面显示效果如下:
对于分页器的构造方法而言,需要的参数,就是PageNo而已。但如果页面还有其他的参数,跳转链接应该同时把这些参数传递给下一个页面。因此,我们看到构造方法中有一个urlpara,就是用来传递其他的参数的。
数据的获取
通过传入的参数,就可以进行页面数据的获取了。获取记录的流程是:
取得参数——查询总记录——判断范围,修正页码——查询记录集——构造分页器代码
代码如下:
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页面,增加一个查询对话框,如下:
查询按钮处理如下:
//查询按钮事件
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时,取得这个参数并构造查询串。
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来实现。
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>";
这样构造出的分页器就具备了跳转功能了!
分页器的样式
分页功能几乎是每个数据管理页面都需要的,但其样式总的来说,不会有太多的变化,因此,写好一个通用性较强的样式,就可以到处使用了。这是一个常用的分页器样式。
<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中,效果如下:
页面的完整的处理流程
以下是页面的完成处理流程代码:
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对象可以访问。
- python多版本的pip共存问题解决办法
- C++ 对vector进行排序
- 小程序优化36计
- 神经网络权重初始化问题
- Andrew Ng机器学习课程笔记--week11(图像识别&总结划重点)
- 市民近期到南沙有望体验到无人驾驶技术
- Andrew Ng机器学习课程笔记--week10(优化梯度下降)
- Andrew Ng机器学习课程笔记--week9(下)(推荐系统&协同过滤)
- Andrew Ng机器学习课程笔记--week9(上)(异常检测&推荐系统)
- python程序员开发必备的5大工具,你用过几个?
- Andrew Ng机器学习课程笔记--week8(K-means&PCA)
- Andrew Ng机器学习课程笔记--week7(SVM)
- Pytorch windows10安装教程
- Udacity并行计算课程笔记-The GPU Programming Model
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 详解shell脚本的环境、普通、特殊变量
- 玩转zabbix之超详细的二进制安装
- 玩转zabbix之源码编译安装,添加主机监控
- 总结一篇shell调试技巧及常见的脚本错误
- 备战金九银十:当你裸辞遇到了面试难,你需要了解一下这些面试题
- 看完这7个测试常见问题总结,你的面试就成功了80%
- geant4入门讲解篇-2
- Geant4-怎样设置你的粒子源--精简注释+收藏版
- Geant4--一次编译,运行多个Run,极大提升模拟效率
- Geant4--是怎样使用的?--(1.信息抽取)
- ROOT-数据读取-直方图-Roofit拟合基本流程-(入门实用)
- 最简单的基于FFmpeg的直播系统开发移动端例子:IOS 视频解码器
- 哇塞哇塞--一行命令搞定视频截取和gif制作!
- 01.Android崩溃Crash封装库
- Geant4的root文件读取