Ajax分页查询

wolferill

浏览: 58375 次
性别:
来自: 广州

最近访客更多访客>>

cherishzzz

vintlike

kelvin_liu

paul33

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Ajax SQL HTML JavaScript Web

首先说清楚什么是分页查询。

分页查询就是将数据库中的查询结果在程序中进行分页显示（如果不进行分页的话，将数据库中上万条的数据都显示出来，那么一个页面就过于臃肿了，而且效率很成问题）。

分页查询要实现的功能包括：限制每页显示的个数、翻页（上一页、下一页）、跳转（转至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>

paging.rar (1.8 KB)
下载次数: 152

分享到：