Ajax实现分页查询

<div id=”div_trackpoint” style=” border:solid 1px gray; height:230px; width:99%; overflow-y:auto;”>用于显示查询回的数据</div>
<div id=”div_trackpages” style=” height:15px; width:99%; font-size:8pt; word-break:break-all; word-wrap: break-word;”>用于显示分页的页码</div><br />
<div id=”div_trackpagetab” style=” height:15px; width:99%; font-size:8pt; text-align:center;”>用于显示前一页、后一页、…、首页、尾页等控制按钮</div>
<div id=”div_trackpage_status” style=” height:20px; width:99%; font-size:8pt; text-align:center;”>用于显示当前页的页码</div>

实现客户端分页函数：
var CurPage=0;                          //当前页
var TotalPage=0;                        //总页数
var PageTab=7;                          //每组显示页数
var CurTab=0;                           //当前分组

我的程序是设置每页显示50条数据，每组显示7页，这些可以按需求调整。

TurnTab函数用于切换分组，根据传入的val来计算显示哪一组页面。val=1表示切换到下一组，val=-1表示切换到上一组，0表示切换到第一组，-2表示切换到最后一组。用户通过单击页面上的  …  符号来切换分组。

function TurnTab(val)
{
var nPage = 0;

if (val == 1) {
CurTab++;
nPage = (CurTab – 1) * PageTab + 1;
}
else if (val == -1) {
CurTab–;
nPage = (CurTab – 1) * PageTab + 1;
}
else if (val == 0) {
CurTab = 1;
nPage = 1;
}
else if (val == -2) {
CurTab = Math.floor(TotalPage / PageTab) + 1;
nPage = (CurTab – 1) * PageTab + 1;
}

var carinfo = document.getElementById(“div_trackpages”);
var tabinfo = document.getElementById(“div_trackpagetab”);

var strInner = “”;

strInner += “<a href=””javascript:TurnPage(1)””>首页</a>&nbsp;”;

strInner += “<a href=””javascript:PreviousPage()””>前一页</a>&nbsp;”;

strInner += “总共” + TotalPage + “页&nbsp;”;

strInner += “<a href=””javascript:NextPage()””>下一页</a>&nbsp;”;

strInner += “<a href=””javascript:TurnPage(” + TotalPage + “)””>尾页</a>&nbsp;”;

tabinfo.innerHTML = strInner;
strInner = “”;

if (CurTab > 1) strInner += “<a href=””javascript:TurnTab(-1)””>…</a>&nbsp;”;

for ( ; nPage<=CurTab*PageTab; nPage++) {

if (nPage <= TotalPage) {

strInner += “<a href=””javascript:TurnPage(“+ nPage + “)””>”+nPage+”</a>&nbsp;”

}
}

if (nPage < TotalPage) strInner += “<a href=””javascript:TurnTab(1)””>…</a>&nbsp;”;

carinfo.innerHTML = strInner;

}

TurnPage函数用于切换分页，val表示要切换到的页数，根据要显示的页数生成查询范围，如查询前50条记录，从51到100的记录，从101到150的记录。。。
cscCustomAnalyst是一个异步调用函数，函数实现的代码将在下面贴出。”Method”,”SID”, “TIME1”, “TIME2”, “ROW1”, “ROW2″都是执行查询所需的参数，Method是用来判断要执行什么查询，”ROW1”, “ROW2″表示要查询的记录范围，其他的参数就根据实际需要进行调整。ShowCarTrack(val)是一个对查询结果进行处理的函数，异步调用完 成后得到的结果就将在这个函数中分析处理并且显示。这部分代码按照具体实现编写，我这里就不列出。

function TurnPage(val)
{
if (Number(val) != CurPage) {

CurPage = Number(val);

var row1 = String((CurPage – 1) * 50 + 1);
var row2 = String(CurPage * 50);
var trackinfo = document.getElementById(“div_trackpoint”);
trackinfo.innerHTML = “　　获取数据中，请稍等．．．”;

_cscCustomAnalyst([“Method”, “SID”, “TIME1”, “TIME2”, “ROW1”, “ROW2”],
[“GetCarTrack”,, “80100117”, t1, t2, row1, row2],
ShowCarTrack,onQueryError);

if (CurPage == 1) TurnTab(0);

if (CurPage == TotalPage) TurnTab(-2);

var statusinfo = document.getElementById(“div_trackpage_status”);

statusinfo.innerHTML = “第” + CurPage  + “页”;
}

}

NextPage切换下一页，调用TurnPage实现，如果下一页超出当前分组则要切换到下一分组。

function NextPage()
{
if (CurPage < TotalPage) {

TurnPage(CurPage+1);

if ((CurPage + 1) > (CurTab * PageTab)) {
TurnTab(1);
}
}

}

PreviousPage切换上一页，调用TurnPage实现，如果上一页超出当前分组则要切换到上一分组。
function PreviousPage()
{
if (CurPage > 1) {

TurnPage(CurPage-1);

if ((CurPage – 1) <= ((CurTab – 1) * PageTab)) {
TurnTab(-1);
}

}
}

_cscCustomAnalyst是异步调用函数，xhr.open(“post”,”MapQuery.ashx”, true);这段话是表示将请求提交到MapQuery.ashx这个页面。所有的服务器段数据库操作都在MapQuery.ashx里面执行。

function _cscCustomAnalyst(paramNames, paramValues, onComplete, onError){

var xhr=_GetXmlHttpRequest();

xhr.open(“post”,”MapQuery.ashx”, true);

xhr.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”);

xhr.onreadystatechange=function(){

var readyState=xhr.readyState;

if (readyState==4){

var status=xhr.status;

if(status==200){
var resultset = xhr.responseText;

if(resultset == null){
onComplete(null);
return;
}

if(onComplete){
onComplete(resultset);
resultset = null;
}
}
else{
if(onError){
onError(xhr.responseText);
}
}
xhr.onreadystatechange = function(){};

xhr = null;
}
};

var paramString=null;

if(paramNames&&paramNames.length>0){

var params = new Array();

while(paramNames&&paramNames.length>0)
{
params.push(paramNames.shift()+”=”+_ToJSON(paramValues.shift()));
}

paramString = params.join(“&”);

}

xhr.send(paramString);
};

最后列出一个Oracle的按数量范围查询的SQL语句：(查询前50条记录)
SELECT *
FROM (SELECT   /*+ FULL(tablename)*/  fieldname, ROWNUM rn FROM tablename WHERE condition  AND ROWNUM <= 50 ORDER BY field DESC) t2  where t2.rn >= 1;