本文介绍了网页开发中真分页与假分页的概念及其优缺点，并详细展示了使用MyBatis实现真分页及利用jQuery实现假分页的具体步骤。
所谓的“真分页”与“假分页”，我想大概就是前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。两种方法都可以使用，各有利弊。“真分页”显然是效率更高，面对庞大的数据量也能够从容自若，但是缺点便是每次都需要和后台交互。“假分页”不需要和后台交互，但是一旦面对大数据量时，加载将十分缓慢，影响用户的体验。
由于是个人平时的练习，数据量不大，所以在我个人的项目中都使用了。下面记录我具体的实现方法。
“真分页”：利用mybatis逆向自带的分页方法实现，代码量十分的少，用起来也很方便。
1.在实体example类中，定义两个参数startRow、pageSize。getter\setter.
2.在对应实体类mapper.xml的selectByExample方法中加入如下限制条件：
<if test="startRow != null and pageSize != null and pageSize != 0">
limit #{startRow},#{pageSize}
</if> @Override
public List<News> selectNewsList(int startRow) {
// TODO Auto-generated method stub
NewsExample newsExample = new NewsExample();
newsExample.setPageSize(8);//每页显示八条新闻
newsExample.setStartRow(startRow);
List<News> newsList = newsMapper.selectByExample(newsExample);
return newsList;
} @RequestMapping("selectNewsList")
public String showNewsList(Integer pageNo,HttpSession session){
int newsNums = newsService.countNews();//数据库中新闻的有效条目数
int pageNums;//页码的最大值（总数）
//如果能够整除，说明新闻最大页数是newsNums/8,不能够整除还需要加一页内容显示
if (newsNums%8==0) {
pageNums = newsNums/8;
} else {
pageNums = newsNums/8+1;
}
session.setAttribute("pageNums", pageNums);
//判断当前页码，如果是首页，页面为空
if (pageNo!=null) {
//通过计算分页的第一条资讯的开始编号，来执行分页的方法
List<News> newsList = newsService.selectNewsList((pageNo-1)*8);
session.setAttribute("newsList", newsList);
session.setAttribute("pageNo", pageNo);
} else {
List<News> newsList = newsService.selectNewsList(0);
session.setAttribute("newsList", newsList);
session.setAttribute("pageNo", 1);//页码默认是从一开始的。
}
List<Type> typeList = typeService.selectTypeList();
session.setAttribute("typeList", typeList);
List<News> topList = newsService.selectNewsTop();
session.setAttribute("topList", topList);
return "news";
}jsp: <c:choose>
<c:when test="${pageNo>1}">
<a href="selectNewsList.action">首页</a>
<a href="selectNewsList.action?pageNo=${pageNo-1}">上一页</a>
</c:when>
</c:choose>
当前页数:[${pageNo}/${pageNums}]
<c:choose>
<c:when test="${pageNo!=pageNums}">
<a href="selectNewsList.action?pageNo=${pageNo+1}">下一页</a>
<a href="selectNewsList.action?pageNo=${pageNums}">末页</a>
</c:when>
</c:choose>
“假分页”：利用jquery来实现。参考如下实例，很容易理解。
首页的效果利用jquery :gt选择器来实现：
语法
$(":gt(index)")
| 参数 | 描述 |
|---|---|
| index |
必需。规定要选择的元素。 会选取 index 值大于指定数的元素。 |
之后的分页效果主要是利用jquery的遍历来实现的：
| 参数 | 描述 |
|---|---|
| function(index,element) |
必需。为每个匹配元素规定运行的函数。
|
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery伪分页效果</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("ul li:gt(3)").hide();//初始化，前面4条数据显示，其他的数据隐藏。
var total_q=$("ul li").index()+1;//总数据
var current_page=4;//每页显示的数据
var current_num=1;//当前页数
var total_page= Math.ceil(total_q/current_page);//总页数
var next=$(".next");//下一页
var prev=$(".prev");//上一页
$(".total").text(total_page);//显示总页数
$(".current_page").text(current_num);//当前的页数
//下一页
$(".next").click(function(){
if(current_num>=total_page){
return false;//如果大于等于总页数就禁用下一页
}
else{
$(".current_page").text(++current_num);//点击下一页的时候当前页数的值就加1
$.each($('ul li'),function(index,item){
var start = current_page* (current_num-1);//起始范围
var end = current_page * current_num;//结束范围
if(index >= start && index < end){//如果索引值是在start和end之间的元素就显示，否则就隐
$(this).show();
}else {
$(this).hide();
}
});
}
});
//上一页方法
$(".prev").click(function(){
if(current_num==1){
return false;
}else{
$(".current_page").text(--current_num);
$.each($('ul li'),function(index,item){
var start = current_page* (current_num-1);//起始范围
var end = current_page * current_num;//结束范围
if(index >= start && index < end){//如果索引值是start和end之间的元素就显示，否则就隐藏
$(this).show();
}else {
$(this).hide();
}
});
}
})
})
</script>
<style type="text/css">
.main{width:800px;zoom:1;margin:0 auto;}
.item{width:800px;overflow:hidden;}
ul{padding:0;width:860px;zoom:1;}
.clear{zoom:1;}
.clear:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
ul li{list-style-type:none;float:left;background:#F69;font-size:60px;text-shadow:1px 1px 3px #555;width:380px;height:200px;margin:10px 40px 10px 0;line-height:200px;text-align:center;color:#fff;}
.page_btn{padding-top:20px;}
.page_btn a{cursor:pointer;padding:5px;border:solid 1px #ccc;font-size:12px;}
.page_box{float:right;}
.num{padding:0 10px;}
</style>
</head>
<body>
<div class="main">
<div class="item">
<ul class="clear">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
<li>15</li>
<li>16</li>
<li>17</li>
<li>18</li>
<li>19</li>
<li>20</li>
<li>21</li>
<li>22</li>
<li>23</li>
<li>24</li>
<li>25</li>
<li>26</li>
<li>27</li>
<li>28</li>
</ul>
</div>
<div class="page_btn clear">
<span class="page_box">
<a class="prev">上一页</a><span class="num"><span class="current_page">1</span><span style="padding:0 3px;">/</span><span class="total"></span></span><a class="next">下一页</a>
</span>
</div>
</div><!--main-->
</body>
</html>以上。
纯分页sql语句 参考：http://blog.youkuaiyun.com/qq_33764491/article/details/76691681
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
