由于查询返回的数据量很大,超过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>
实现客户端分页函数:
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> ";
strinner += "<a href=/"javascript:previouspage()/">前一页</a> ";
strinner += "总共" + totalpage + "页 ";
strinner += "<a href=/"javascript:nextpage()/">下一页</a> ";
strinner += "<a href=/"javascript:turnpage(" + totalpage + ")/">尾页</a> ";
tabinfo.innerhtml = strinner;
strinner = "";
if (curtab > 1) strinner += "<a href=/"javascript:turntab(-1)/">...</a> ";
for ( ; npage<=curtab*pagetab; npage++) {
if (npage <= totalpage) {
strinner += "<a href=/"javascript:turnpage("+ npage + ")/">"+npage+"</a> "
}
}
if (npage < totalpage) strinner += "<a href=/"javascript:turntab(1)/">...</a> ";
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&¶mnames.length>0){
var params = new array();
while(paramnames&¶mnames.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;
闽公网安备 35060202000074号