分页的目的
- 前台分页
1、提高性能,在某些情况下,我们并不需要查询很大的数据量,在这种情况下,我们在程序中开辟一个内存(其实就是自己定义一个变量~),专门用来存放查询数据,这样每次点击上一页,下一页,就不必每次和数据库进行交互 - 后台分页
1、提高性能,一次查20个,比一次查20000个性能肯定更好;另外如果数据量很大,一次性将内容都查询出来,查询出来的结果是放在内存里面的,内存没有这么大
2、不需要这么多数据,如新闻,一般人可能只看最近前20条;如果我们将后面的也都查询出来了,就是浪费
3、展现层面的考虑:如果一次展现太多的数据,不管是排版,还是美观上都不好 - 任何工具都存在优点与缺点,关键在于如何根据实际情况选择恰当的分页方式~
这里是前台页面~
前台分页
原理:前台分页也叫假分页,具体实现原理就是一次性从数据库中将需要的数据全部查询出来,放入程序开辟的一个内存 (其实就是自己定义的一个变量) 中,然后每次取数据都从内存 (还是那个变量)中取,不用频繁与数据库进行交互,适用于查询数据较少的情况。
首先来解释一下下面代码的大体意思:
- 在前台JSP页面JS脚本中,定义一个userMgr 对象(自己命名),体现Java面向对象思想,这里看不懂也没关系,后面的前台分页思想看明白就好….首先定义四个变量,用来初始化分页时,其中userDate就是开辟出的内存(自己定义的那个变量~)
- 然后是四个函数,分别对应首页,上一页,下一页和尾页功能,这四个函数里的对查询函数和遍历函数的调用就是前台分页的关键,如果不这样做,那么每次查询还是会和数据库进行交互,就失去了前台分页的意义
- 然后是查询函数,利用ajax和后台进行数据交互
- 最后是数据遍历函数,用来遍历每页数据
代码实现:
这里的后台Sql语句与普通查询无异,就不多赘述。
<script type="text/javascript">
var userMgr = {
currPage : 1, //当前页
pageSize : 2, //每页记录数
totalPage :null, //总页数
userData :null, //用于缓存数据的变量
//对应的按钮写对应的方法响应
gotoFirst : function(){
if(userMgr.currPage==1){
alert("已经是第一页了");
return;
}
userMgr.currPage =1;
//如果缓存里面有数据,则不进行数据访问,直接利用缓存数据填充页面
if(userMgr.userData!=null){
//就不能调用tzQueryUser();
userMgr.tzFillUserListTable(userMgr.userData);
}else{
userMgr.tzQueryUser();
}
},
gotoBefore : function(){
userMgr.currPage--;
if(userMgr.currPage<1){
alert("已经第一页了");
return;
}
//如果缓存里面有数据,则不进行数据访问,直接利用缓存数据填充页面
if(userMgr.userData!=null){
//就不能调用tzQueryUser();
userMgr.tzFillUserListTable(userMgr.userData);
}else{
userMgr.tzQueryUser();
}
},
gotoNext : function(){
userMgr.currPage++;
if(userMgr.currPage>userMgr.totalPage){
alert("已经是最后一页了");
return;
}
//如果缓存里面有数据,则不进行数据访问,直接利用缓存数据填充页面
if(userMgr.userData!=null){
//就不能调用tzQueryUser();
userMgr.tzFillUserListTable(userMgr.userData);
}else{
userMgr.tzQueryUser();
}
},
gotoLast : function(){
if(userMgr.currPage==userMgr.totalPage){
alert("已经是最后一页了");
return;
}
userMgr.currPage = userMgr.totalPage;
//如果缓存里面有数据,则不进行数据访问,直接利用缓存数据填充页面
if(userMgr.userData!=null){
//就不能调用tzQueryUser();
userMgr.tzFillUserListTable(userMgr.userData);
}else{
userMgr.tzQueryUser();
}
},
//查询用户方法
tzQueryUser :function(){
//这里是模糊查询,获得参数传给后台