ホーム>ネットワークプログラミングチュートリアル>Ajax チュートリアル

Ajax はページング クエリを実装します

著者：Eve Cole 更新時間：2009-07-06 16:39:26

クエリによって返されるデータの量は 100,000 個を超える大量であるため、ページ クエリ関数を最適化する必要があります。元のプログラムで DataGrid を使用する習慣を放棄し、ページング表示モジュールを自分で作成します。
まず、ページにいくつかの DIV を追加します。

<div id="div_trackpoint" style=" border:solid 1px grey; 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; //現在のグループ化

私のプログラムは、1 ページあたり 50 個のデータ、グループあたり 7 ページを表示するように設定されています。これらは必要に応じて調整できます。

TurnTab 関数は、グループを切り替え、渡された val に基づいてどのページのグループを表示するかを計算するために使用されます。 val=1 は次のグループへの切り替えを意味し、val=-1 は前のグループへの切り替えを意味し、0 は最初のグループへの切り替えを意味し、-2 は最後のグループへの切り替えを意味します。ユーザーは、ページ上の ... 記号をクリックしてグループを切り替えます。

関数 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;
nページ = 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 + "ページ";

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 から 51 までのレコードをクエリするなど、表示されるページ数に基づいてクエリ範囲が生成されます。 100、および101から150までのレコード。 。 。
cscCustomAnalyst は非同期呼び出し関数であり、関数実装のコードを以下に掲載します。 「メソッド」、「SID」、「TIME1」、「TIME2」、「ROW1」、「ROW2」はすべてクエリの実行に必要なパラメータです。メソッドは実行するクエリを決定するために使用されます。「ROW1」、「ROW2」は意味します。クエリ対象のレコードの範囲やその他のパラメータは、実際のニーズに応じて調整できます。 ShowCarTrack(val) は、クエリ結果を処理する関数です。非同期呼び出しの完了後に取得された結果は、この関数内で分析、処理、表示されます。コードのこの部分は特定の実装に従って記述されているため、ここではリストしません。

関数 TurnPage(val)
{
if (Number(val) != CurPage) {

CurPage = 数値(val);

var row1 = String((CurPage - 1) * 50 + 1);
var row2 = 文字列(CurPage * 50);

var trackinfo = document.getElementById("div_trackpoint");
trackinfo.innerHTML = "データを取得しています。お待ちください...";

_cscCustomAnalyst(["メソッド", "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 + "ページ";

次のページが現在のグループを超える場合は、次のページに切り替える必要があり

ます

。

functionNextPage()
{
if (CurPage < TotalPage) {

TurnPage(CurPage+1);

if ((CurPage + 1) > (CurTab * PageTab)) {
ターンタブ(1);
}
}

PreviousPage

は前のページに切り替え、TurnPage を呼び出してそれを実装します。前のページが現在のグループを超える場合は、前のグループに切り替える必要があります。
関数PreviousPage()
{
if (CurPage > 1) {

TurnPage(CurPage-1);

if ((CurPage - 1) <= ((CurTab - 1) * PageTab)) {
ターンタブ(-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(){

varreadyState=xhr.readyState;

if (readyState==4){

var status=xhr.status;

if(ステータス==200){

var resultset = xhr.responseText;

if(結果セット == null){
onComplete(null);
戻る;
if

(onComplete){
onComplete(結果セット);
結果セット = null;
}
}
それ以外{
if(エラー時){
onError(xhr.responseText);
}
}

xhr.onreadystatechange = function(){};

xhr = null;
}
};

var paramString=null;

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

var params = 新しい Array();

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

paramString = params.join("&");

}

xhr.send(paramString);
最後

に、数量範囲ごとにクエリを実行する Oracle SQL ステートメントをリストします (最初の 50 レコードをクエリします)。
選択 *
FROM (SELECT /*+ FULL(テーブル名)*/ フィールド名, ROWNUM rn FROM テーブル名 WHERE 条件 AND ROWNUM <= 50 ORDER BY フィールド DESC) t2 where t2.rn >= 1;
関連記事