RSS
热门关键字:  Linux  图形  项目管理  LAMP  java
当前位置 : 主页>开源技术>AJAX技术>列表

Ajax实现分页查询

来源:中国开源社区 作者:开源爱好者 时间:2007-10-21 点击:

由于查询返回的数据量很大,超过10w条数据,因此需要对页面查询功能进行优化。放弃原有程序中使用DataGrid的做法,自己编写分页显示模块。
首先在页面上添加几个DIV:

<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> 字串2

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

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

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

字串4

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"); 字串2

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;"; 字串5

carinfo.innerHTML = strInner;

} 字串2

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

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 "页";
} 字串8

} 字串9

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

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

TurnPage(CurPage 1);

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

}

字串9

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

字串9

TurnPage(CurPage-1);

最新评论共有 0 位网友发表了评论
发表评论
评论内容:不能超过250字,需审核,请自觉遵守互联网相关政策法规。
用户名: 密码:
匿名?
注册