分页兑现

分页实现

? 首先碰到的问题是，数据库中有很多数据，例如工地，历史图片，这些数据量可能上千。如果全部在一页加载显示，很慢，而且会往下拉长特别多。因此要实现分页，如果先把所有数据得到，然后假分布，一页一页的显示，一次加载所需的时间仍然很长，因此需要实现只从数据库中取得需要的数据部分。这个我是使用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" > </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);}

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?