(1)分页数据
mysql或orcale中都有分页查询数据的设计
Java程序中可以写好sql语句 ，可以利用mybatis框架（SSM框架的一部分）
（2）分页查询需要的参数
查询条件、当前页码、上一页、下一页、总页码（总页数（数据库中客观存在的数量）---（count(0)查询速度快）--- ，当前页面数据显示量（用户自己选择），计算而来）
另外还要设计，排序，一般为时间逆序，保证最新的数据显示在最上面
（3）jsp页面显示
a)不采用ajax异步查询
比较简单
b)采用ajax异步查询
需要考虑的问题：
①ajax返回json格式数据，不会像EL表达式那样，调用get方法获取到属性值，只能通过对象.属性的方式获取
②首页，上一页，下一页，不断刷新的问题，可以利用循环调用函数的思路解决
function renderData(pageNo,url){
//清除多余数据
$("#parentContainner").children(".mood-list").remove();
$("#parentContainner").children(".pagination").remove();
$.ajax({
type : "GET",
url : "url" + "?pageNo=" + pageNo,
dataType : "json",
success : function(moodJson){
var htmlStr="";
htmlStr += "<ul class=\"mood-list\">";
//组装html：ajax异步获得数据
for(var i= 0; i<moodJson.dataList.length; i++){
htmlStr += "<li class=\"mood-item clearfix\">";
htmlStr += "<div class=\"mood-item-no lf\">" + (i + 1) + "</div>";
htmlStr += "<div class=\"mood-item-title lf\">";
htmlStr += "<a href = \"page/mymood/detail.jsp\">" + moodJson.dataList[i].title + "</a>"
htmlStr += "</div>";
htmlStr += "<div class=\"mood-item-auth rf\"><a href=\"#\">删除</a> <a href=\"moodModule/update.jsp\">修改</a></div>";
htmlStr += "<div class=\"mood-item-publish-time rf\">";
htmlStr += moodJson.dataList[i].publishTime
htmlStr += "</div>";
htmlStr += "</li>";
}
htmlStr += "</ul>";
//分页功能的html----非常巧妙
htmlStr += "<div class=\"pagination\">";
htmlStr += "<a href=\"javascript:renderData(" + 1 + ",'" + url + "')\" class=\"firstPage\">首页</a>";
htmlStr += "<a href=\"javascript:renderData(" + moodJson.previousNo + ",'" + url + "')\" class=\"prePage\"><上一页</a>";
htmlStr += "<a href=\"javascript:renderData(" + moodJson.nextNo + ",'" + url + "')\" class=\"prePage\">>下一页</a>";
htmlStr += "<a href=\"javascript:renderData(" + moodJson.totalPage + ",'" + url + "')\" class=\"lastPage\">末页></a>";
htmlStr += "</div>";
//将html,添加到jsp页面
$("#parentContainner").append(htmlStr);
}
});
//清除多余数据
$("#parentContainner").children(".mood-list").remove();
$("#parentContainner").children(".pagination").remove();
$.ajax({
type : "GET",
url : "url" + "?pageNo=" + pageNo,
dataType : "json",
success : function(moodJson){
var htmlStr="";
htmlStr += "<ul class=\"mood-list\">";
//组装html：ajax异步获得数据
for(var i= 0; i<moodJson.dataList.length; i++){
htmlStr += "<li class=\"mood-item clearfix\">";
htmlStr += "<div class=\"mood-item-no lf\">" + (i + 1) + "</div>";
htmlStr += "<div class=\"mood-item-title lf\">";
htmlStr += "<a href = \"page/mymood/detail.jsp\">" + moodJson.dataList[i].title + "</a>"
htmlStr += "</div>";
htmlStr += "<div class=\"mood-item-auth rf\"><a href=\"#\">删除</a> <a href=\"moodModule/update.jsp\">修改</a></div>";
htmlStr += "<div class=\"mood-item-publish-time rf\">";
htmlStr += moodJson.dataList[i].publishTime
htmlStr += "</div>";
htmlStr += "</li>";
}
htmlStr += "</ul>";
//分页功能的html----非常巧妙
htmlStr += "<div class=\"pagination\">";
htmlStr += "<a href=\"javascript:renderData(" + 1 + ",'" + url + "')\" class=\"firstPage\">首页</a>";
htmlStr += "<a href=\"javascript:renderData(" + moodJson.previousNo + ",'" + url + "')\" class=\"prePage\"><上一页</a>";
htmlStr += "<a href=\"javascript:renderData(" + moodJson.nextNo + ",'" + url + "')\" class=\"prePage\">>下一页</a>";
htmlStr += "<a href=\"javascript:renderData(" + moodJson.totalPage + ",'" + url + "')\" class=\"lastPage\">末页></a>";
htmlStr += "</div>";
//将html,添加到jsp页面
$("#parentContainner").append(htmlStr);
}
});
}
jsp页面的调用
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="js/myMood.js"></script>
<script type="text/javascript">
renderData(1,"myMood/queryByPage.action");
<script type="text/javascript" src="js/myMood.js"></script>
<script type="text/javascript">
renderData(1,"myMood/queryByPage.action");
-------------------------
mood是自己写的实体类
moodJson是mood的为了满足Json格式调用的类