首先碰到的问题是,数据库中有很多数据,例如工地,历史图片,这些数据量可能上千。如果全部在一页加载显示,很慢,而且会往下拉长特别多。因此要实现分页,如果先把所有数据得到,然后假分布,一页一页的显示,一次加载所需的时间仍然很长,因此需要实现只从数据库中取得需要的数据部分。这个我是使用javascript实现的。利用Jquery的分布功能:
<script src="../js/backstage/jquery.pager.js" type="text/javascript"></script>
<link href="../lib/jquery/splitPaper/pager.css" rel="stylesheet" type="text/css" />
接下来,我需要在页面中定义一个div,显示分页。而且页面上有一个text用来存储总的数据记录数,这样才可以得到页数。
<div id="pager" class="pager" > </div>
<input type="text" name="sitesNum" id="sitesNum" value="${sitesCount}" style="display:none"/>
然后我在javascript文件中定义页面数和每页显示的记录数。
var csiteNums, pageCount;
var pageSize = 10;
定义一个函数,用来根据页数来获得相应的后台记录,需要用到ajax。如下:
function getCsiteByPage(type, keyword, pageclickednumber) {
//alert(type, keyword, pageclickednumber);
var option = {
url : "GetActiveCsiteByPage.action",
type : "POST",
data : "type=" + type + "&keyWord=" + keyword + "&pageclickednumber=" + pageclickednumber + "&pagesize=" + pageSize,
dataType : "json",
success : function(res, textStatus) {
var con = "";
$.each(res, function(i, item) {
var startNum = (pageclickednumber-1)*pageSize;
con += "<tr>";
con += "<td>" + (startNum + i + 1) + "</td>";
con += "<td>" + item.id + "</td>";
con += "<td><a href=\"ExecCsite.action?siteID=" + item.id
+ "\">";
con += item.name + "</a></td>";
con += "<td>" + item.addr + "</td>";
con += "<td>" + item.province_name + "</td>";
con += "<td>" + item.city_name + "</td>";
//con += "<td>" + item.district_id + "</td>";
con += "<td>" + item.region_name + "</td>";
con += "<td>" + item.constructor + "</td>";
con += "<td>" + item.builder + "</td>";
con += "<td>" + item.etpr_name + "</td>";
con += "<td>" + item.ctc_name + "</td>";
con += "<td>" + item.active + "</td>";
/*con += "<td><a href=\"ViewCsiteDetail.action?siteID=" + item.id
+ "\">";
con += "查看</a></td>";*/
con += "<td><a href=\"ViewCsiteDetail.action?siteID=" + item.id
+ "\">";
con += "修改</a></td>";
/* con += "<td><a href=\"StopCsiteDetail.action?siteID=" + item.id
+ "\">";
con += "停止</a></td>";*/
con += "</tr>";
});
// 先移除原有数据
var entries = $("#table_overview tr");
var i;
for (i = 1; i < entries.length; i++)
$(entries[i]).remove();
$("#table_overview").append(con);
addSizeFrame();
},
error : function(res, textStatus) {
// alert(textStatus);
}
};
$.ajax(option);
}
所以感觉分页只能使用ajax来完成,而不能使用一个action得到所有的数据,然后在前台显示这种easy的方法。