分页实现

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