分页实现

最新推荐文章于 2025-11-24 03:12:01 发布

原创最新推荐文章于 2025-11-24 03:12:01 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #数据库 #json #ViewUI

实际问题专栏收录该内容

4 篇文章

订阅专栏

本文探讨了如何在面对大量数据时，通过分页技术优化数据展示效率，详细介绍了使用JavaScript和jQuery实现分页的具体步骤，包括如何获取、处理和呈现数据，以及如何实现分页导航。重点在于通过AJAX请求获取特定页的数据，避免一次性加载大量数据导致的性能问题。

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