Ajax implements paging query

Author：Eve Cole Update Time：2009-07-06 16:39:26

Since the amount of data returned by the query is large, more than 100,000 pieces of data, the page query function needs to be optimized. Abandon the practice of using DataGrid in the original program and write the paging display module by yourself.
First add a few DIVs to the page:

<div id="div_trackpoint" style=" border:solid 1px gray; height:230px; width:99%; overflow-y:auto;">Used to display the data returned by the query</div>
<div id="div_trackpages" style=" height:15px; width:99%; font-size:8pt; word-break:break-all; word-wrap: break-word;">Page number used to display paging< /div><br />
<div id="div_trackpagetab" style=" height:15px; width:99%; font-size:8pt; text-align:center;">Used to display the previous page, next page,..., home page, Last page and other control buttons</div>
<div id="div_trackpage_status" style=" height:20px; width:99%; font-size:8pt; text-align:center;">Used to display the page number of the current page</div>

implements the client paging function:
var CurPage=0; //Current page
var TotalPage=0; //Total number of pages
var PageTab=7; //The number of pages displayed in each group
var CurTab=0; //Current grouping

My program is set to display 50 pieces of data per page and 7 pages per group. These can be adjusted as needed.

The TurnTab function is used to switch groups and calculate which group of pages to display based on the passed val. val=1 means switching to the next group, val=-1 means switching to the previous group, 0 means switching to the first group, and -2 means switching to the last group. Users switch groups by clicking the ... symbol on the page.

var strInner = "";

strInner += "<a href="javascript:TurnPage(1)">Homepage</a> ";

strInner += "<a href="javascript:PreviousPage()">Previous page</a> ";

strInner += "Total" + TotalPage + "Page ";

strInner += "<a href="javascript:NextPage()">Next page</a> ";

strInner += "<a href="javascript:TurnPage(" + TotalPage + ")">Last Page</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;

}

The TurnPage function is used to switch paging, val represents the number of pages to be switched to, and the query range is generated based on the number of pages to be displayed, such as querying the first 50 records, the records from 51 to 100, and the records from 101 to 150. . .
cscCustomAnalyst is an asynchronous calling function, and the code for function implementation will be posted below. "Method", "SID", "TIME1", "TIME2", "ROW1", "ROW2" are all parameters required to execute the query. Method is used to determine what query to execute, "ROW1", "ROW2" means The range of records to be queried, and other parameters can be adjusted according to actual needs. ShowCarTrack(val) is a function that processes query results. The results obtained after the asynchronous call is completed will be analyzed, processed and displayed in this function. This part of the code is written according to the specific implementation, so I won’t list it here.

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 = "Getting data, please wait...";

_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 = "Page" + CurPage + "Page";
}

}

NextPage switches to the next page and calls TurnPage to implement it. If the next page exceeds the current group, it must switch to the next group.

functionNextPage()
{
if (CurPage < TotalPage) {

TurnPage(CurPage+1);

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

}

PreviousPage switches to the previous page and calls TurnPage to implement it. If the previous page exceeds the current group, it must switch to the previous group.
function PreviousPage()
{
if (CurPage > 1) {

TurnPage(CurPage-1);

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

}
}

_cscCustomAnalyst is an asynchronous calling function, xhr.open("post","MapQuery.ashx", true); This paragraph means to submit the request to the MapQuery.ashx page. All server segment database operations are performed in 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);
};

Finally, list an Oracle SQL statement that queries by quantity range: (query the first 50 records)
SELECT *
FROM (SELECT /*+ FULL(tablename)*/ fieldname, ROWNUM rn FROM tablename WHERE condition AND ROWNUM <= 50 ORDER BY field DESC) t2 where t2.rn >= 1;