首先说清楚什么是分页查询。
分页查询就是将数据库中的查询结果在程序中进行分页显示(如果不进行分页的话,将数据库中上万条的数据都显示出来,那么一个页面就过于臃肿了,而且效率很成问题)。
分页查询要实现的功能包括:限制每页显示的个数、翻页(上一页、下一页)、跳转(转至XXX页)等。
很多web开发的初学者对分页查询的实现感到非常痛苦(包括我自己),因为它实在太繁琐了,有很多的全局变量要考虑,包括查询结果总条数totalCount、每页显示个数limit、当前所在页数page、总页数pageCount、当前页起始条目序号start等,而且每个参数之间都有千丝万缕的联系,一个不小心就弄错了。
在解决这个问题前最重要的是弄清楚这些参数之间的关系,找出它们的最小覆盖(通过最少的参数,把其他的参数都求出来),同时尽量全局变量的单一职责原则(系统状态变化所需改变的全局变量的个数越少越好,一个全局变量控制系统的一种状态)。
在许多场合,尤其是B/S架构的富客户端开发中,我们需要用Ajax来实现分页,以达到较好的用户体验与较高的效率。
经过一段时间的摸索,找出了一种个人觉得比较好用的Ajax分页查询实现方法。下面是例子,欢迎大侠们拍砖。提供源码下载,稍微再封装一下,使用还是挺方便的。
Js如下:
扫描二维码关注公众号,回复:
802878 查看本文章
/////////////////////////// // 定义全局变量 // /////////////////////////// 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>