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

XML ボリュームの実践的なヒント (3): 動的ページング

著者：Eve Cole 更新時間：2009-07-07 16:08:45

モチベーション：
ユーザーが大量のデータを簡単に表示できるようにするために、動的ページングを使用します。そのため、ページング機能は、Web サイトで最も一般的でよく使用される機能モジュールです。以前は、情報ページングは​​データベースに接続されており、クリックするたびにバックグラウンド データベースのサポートが必要でした。これはサーバーの負荷を増大させるだけでなく、ユーザーの閲覧速度にも重大な影響を与えます。
想像してみてください。ページング機能がクライアントに搭載された場合、どのような効果があるでしょうか?笑、下のデザインを見てください！ 。

材料：
XML ボリュームの動的ページングには、pages.xml と Pages.xsl という 2 つのファイルがあります。

その機能は次のとおりです。
ページング機能をクライアント側に置きます。ページを更新せずにデータをフィルタリングし、データ閲覧の効率を効果的に向上させます。
効果：
ここを参照してください
コード：
ページ.xml
<?xml バージョン="1.0" エンコーディング="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<ブルーアイデア>
<チーム>
<blue_ID>1</blue_ID>
<blue_name>帆走</blue_name>
<blue_text>シンプルなページング</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML トピック</blue_class>
</チーム>
<チーム>
<blue_ID>2</blue_ID>
<blue_name>フライングバード</blue_name>
<blue_text>結婚すると傷つくことになる</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>イリゲーション エッセンス</blue_class>
</チーム>
<チーム>
<blue_ID>3</blue_ID>
<blue_name>カオ ジー</blue_name>
<blue_text>UBB フォーラムでの正規表現のアプリケーション</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Web プログラミングのエッセンス</blue_class>
</チーム>
<チーム>
<blue_ID>4</blue_ID>
<blue_name>タイラン</blue_name>
<blue_text>年末クラシックステアリングパーティー完全マニュアル v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>フォーラム灌漑エリア</blue_class>
</チーム>
<チーム>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>ASP エラー メッセージの概要</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>JavaScript</blue_class>
</チーム>
</ブルーアイデア>

ページ.xsl
<?xml バージョン="1.0" エンコーディング="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<頭>
<title> XML ボリュームの実践的なヒント (3): 動的ページング</title>
<スタイル>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman";
テーブル { フォントサイズ: 12px; ボーダー: 0px; ボーダーカラー: #99CC99 #CCCCCC; セルスペース:3; テキスト装飾: ブリンク}
スパン { フォントサイズ: 12px; }
.keybutton { カーソル:ハンド; カラー: #003300; 背景: #ffffff; }
</スタイル>
<スクリプト>
<xsl:コメント>
<![CDATA[
varOnePageNum=2;
varPageNum=1;
var XMLPageNum=1;
機能ページ(数)
{
スタイルシート=ドキュメント.XSLドキュメント;
ソース=ドキュメント.XMLドキュメント;
ノード=source.documentElement.childNodes;
len=ノード.長さ;
for(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var firstNum=0;
var lastNume=0;

if (Num=="first") {PageNum=1;}
if (Num=="前") {if (PageNum>1) PageNum -=1;}
if (Num=="next") {if (PageNum<XMLPageNum) PageNum +=1;}
if (Num=="last") {PageNum =XMLPageNum;}

sortField=document.XSLDocument.selectSingleNode(" //@expr ");
firstNum=OnePageNum*(PageNum-1)+1;
lastNum=OnePageNum*(PageNum-1)+OnePageNum;
text="childnumber(this)>="+firstNum+" & childnumber(this)<="+lastNum;
sortField.value=テキスト;
Layer1.innerHTML=source.documentElement.transformNode(スタイルシート);
}
]]>
</xsl:コメント>
</script>
</head>

<body>
<p align="center"><span>XML ボリュームの実践的なヒント (3): 動的ページング</span></p>
<テーブル align="center" width="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >ホームページ</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >前のページ</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">次のページ</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">最後のページ</button>
</td>
</tr>
</テーブル>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</body>

</html>
</xsl:テンプレート>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>番号</td>
<td>名前</td>
<td>テーマ</td>
<td>公開時間</td>
<td>分類</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</テーブル>
</xsl:テンプレート>
<xsl:template match="チーム">
<xsl:if expr="childnumber(this)&gt;=1 &amp; childnumber(this)&lt;=2 ">
<tr align="center">
<xsl:apply-templates select="blue_ID" />
<xsl:apply-templates select="blue_name" />
<xsl:apply-templates select="blue_text" />
<xsl:apply-templates select="blue_time" />
<xsl:apply-templates select="blue_class" />
</tr>
</xsl:if>
</xsl:テンプレート>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:値 />
</td>
</xsl:テンプレート>
<xsl:template match="blue_name">
<td>
<xsl:値 />
</td>
</xsl:テンプレート>
<xsl:template match="blue_text">
<td>
<xsl:値 />
</td>
</xsl:テンプレート>
<xsl:template match="blue_time">
<td>
<xsl:値 />
</td>
</xsl:テンプレート>
<xsl:template match="blue_class">
<td>
<xsl:値 />
</td>
</xsl:テンプレート>
</xsl:スタイルシート>


説明する：
1) search.xml はデータ ファイルです。誰でも問題ないと思います。
2) search.xsl はフォーマット ファイルです。注意すべき点がいくつかあります。

(1) スクリプト内:

nodes=source.documentElement.childNodes;
機能は次のとおりです: すべてのノードを検索します。

nodes.length は、条件

sortField=document.XSLDocument.selectSingleNode(" //@expr ");

を満たすノードの総数です

。


関数は次のとおりです。属性 expr を持つ最初のノードを見つけます。したがって、その対応するノードは次のようになります。
<xsl:if expr="childnumber(this)&gt;=1 &amp; childnumber(this)&lt;=2 ">
したがって、最初の onLoad 時の expr の値は次のようになります。
子番号(これ)<=1 & 子番号(これ)>=2
について &lt; のほうが馴染みがあるかもしれません。それで、＆amp;とは何ですか？ それは「そして」です。
その他の内容については、XML の書籍で見つけることができます。

 

パラメータの説明:
OnePageNum: 各ページに表示されるデータの数
PageNum: 現在のページ番号
XMLPageNum: 総ページ数
firstNum: 現在のページの最初のデータ値
lastNum: 現在のページの最後のデータ値


(2) 本文内:

<xsl:if expr="childnumber(this)&gt;=1 &amp; childnumber(this)&lt;=2 ">
ページングでは適切なデータを出力する必要があるため、if判定条件を使って制御します。
最初は、最初の 2 つのノードの値のみを出力するように要求しました。

子番号(これ)
機能: 上位ノード リスト内の現在のノードの番号を返します。リスト内の最初のノードのデフォルトの番号は 1 です。
ページングではノードの番号に基づいてどのページに属するかを判断します。
式
最初の 2 回では test を使用しましたが、今回は expr を使用したことに気づいたかどうかはわかりません。
それらの間にはいくつかの違いがあり、使用方法も異なります。
expr ─ スクリプト言語の式。計算結果は「true」または「false」です。結果が「true」でテストに合格した場合、その内容が出力に表示されます（この属性は省略可能）。
テスト ── ソース データのテスト条件。

<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >ホームページ</button>
データを前のページに戻す機能です。他のボタンも同様に機能します。

 

追加のポイント: XML サンプル ファイルの使用方法

1) 各サンプルの 2 つのファイルをファイル名に従って別々に保存します。
2) ブラウザを使用して XML ファイルを参照します。これで効果がわかります。きっと良いはずです。


追記：
あはは、動的ソートの後にページングの機能を追加できます。次に、リストの数を構成可能にします。想像力を働かせて、これらの機能をより完璧なものにしてください。ページング機能を実装するより良い方法を研究できます。お互いに議論するのは素晴らしいことです！
関連記事