首先说清楚什么是分页查询。
分页查询就是将数据库中的查询结果在程序中进行分页显示（如果不进行分页的话，将数据库中上万条的数据都显示出来，那么一个页面就过于臃肿了，而且效率很成问题）。
分页查询要实现的功能包括：限制每页显示的个数、翻页（上一页、下一页）、跳转（转至XXX页）等。
很多web开发的初学者对分页查询的实现感到非常痛苦（包括我自己），因为它实在太繁琐了，有很多的全局变量要考虑，包括查询结果总条数totalCount、每页显示个数limit、当前所在页数page、总页数pageCount、当前页起始条目序号start等，而且每个参数之间都有千丝万缕的联系，一个不小心就弄错了。
在解决这个问题前最重要的是弄清楚这些参数之间的关系，找出它们的最小覆盖（通过最少的参数，把其他的参数都求出来），同时尽量全局变量的单一职责原则（系统状态变化所需改变的全局变量的个数越少越好，一个全局变量控制系统的一种状态）。
在许多场合，尤其是B/S架构的富客户端开发中，我们需要用Ajax来实现分页，以达到较好的用户体验与较高的效率。
经过一段时间的摸索，找出了一种个人觉得比较好用的Ajax分页查询实现方法。下面是例子，欢迎大侠们拍砖。提供源码下载，稍微再封装一下，使用还是挺方便的。
Js如下：
///////////////////////////
// 定义全局变量 //
///////////////////////////
var totalCount; //文件列表长度
var start; //文件列表当前索引
var limit; //每页显示个数
var first; //是否为第一次查询
///////////////////////////
// 页面控制部分 //
///////////////////////////
//上一页
function prePage(){
}
//下一页
function nextPage(){
}
//跳转
function goToPage(){
}
//修改每页显示数
function setLimit(value){
}
//控制按钮显示
function buttomDisplay(){
}
//页面初始化
function init(){
first = true;
start = 0;
limit = 20;
document.getElementById("limit").value = 20;
getList();
}
window.onload = init;
///////////////////////////
// 模拟Ajax部分 //
///////////////////////////
//模拟Ajax，服务器返回分页查询结果
function getList(){
if(first){
//如果是第一次查询，则访问服务器，获取记录总数
getCount();
first = false;
}
//将查询结果转换为HTML，并显示
……
//修改当前页码
document.getElementById("page").innerHTML= parseInt(start/limit +1);
buttomDisplay();
}
//模拟Ajax，服务器返回totalCount
function getCount(){
totalCount = sqlGetCount();
//修改总页数
document.getElementById("pageCount").innerHTML = Math.ceil(totalCount /limit);
}
/////////////////////////////
// 模拟服务器部分 //
/////////////////////////////
//数据库查询（select * from xxx where yyy）
function sqlGetList(sqlStart,sqlLimit){
//模拟sql查询，返回分页查询结果
var result = [];
……
return result;
}
//获取查询结果总条数（select count(*) from xxx where yyy）
function sqlGetCount(){
//模拟sql查询，返回记录条数
return 300;
}
对应的HTML如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>分页查询</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK">
<script src="js/paging.js" type="text/javascript"></script>
</head>
<body>
<div id="container" align="center">
<div id="header">
<h1>分页查询例子</h1>
</div>
<div id="mainContainer">
<div id="list">
</div>
<div id="paging">
<table width="80%">
<tr>
<td><input type="button" value="上一页" id="pre" onClick="prePage()" /></td>
<td> 第<span id="page">1</span>页/共<span id="pageCount"></span>页</td>
<td>第<input type="text" id="goto" name="goto" value="1" size="2" />页<input type="button" value="跳转" onclick="goToPage()"/></td>
<td>每页显示<select id="limit" name="limit" onChange="setLimit(this.value)" >
<option value="10" >10</option>
<option value="20">20</option>
<option value="30" >30</option></select>个</td>
<td><input type="button" value="下一页" id="next" onClick="nextPage()"/></td>
</tr>
</table>
</div>
</div>
<div id="footer">
<span>Copyright 2010 Technicolor</span>
</div>
</div>
</body>
</html>
