ファイルメーカーProのページへ戻る

JavaScriptで、表示範囲を動的に変化させる（いっきにジャンプ）

「prevPage」ボタンを作る

　「次へ」ボタンができました。では、同じ考え方で「前へ」ボタンもつくりましょう。ここでは、一気に完成品をお見せします。「nextPage」のJavaScriptにも若干の改造が加わります。

動的ソートと動的表示範囲指定を組み込んだXSLファイル「result.xsl」 
<?xml version="1.0" encoding="Shift_JIS"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" xmlns:fm="http://www.filemaker.com/fmpdsoresult" xml:lang="ja">
	<xsl:template><xsl:apply-templates /></xsl:template>
	<xsl:template match="text()"><xsl:value-of select="."/></xsl:template>

	<xsl:script language="javascript">
<![CDATA[
pos = 0;
function getpos(spos){
	epos = spos + 4;
	pos = pos + 1;
	if(pos >= spos && pos <= epos){
		return true;
	}else{
		return false;
	}
}
]]>
	</xsl:script>

	<xsl:template match="FMPXMLRESULT">
		<html>
			<head><title>検索結果</title>

			<script language="javascript">
<xsl:comment><![CDATA[
function gonextp(spos) {
	var key = document.XSLDocument.selectSingleNode("*/xsl:template[@match='ROW']/xsl:if/@expr");
	key.value = "getpos(" + spos + ")";
	var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
	content.innerHTML = d.transformNode(document.XSLDocument);
	var s = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET/@FOUND").value;
	spos = spos + 5;
	nextp.href = "javascript:gonextp(" + spos + ")";
	if(spos >= s){nextp.style.display = "none";}
	spos = spos - 10;
	prevp.href = "javascript:goprevp(" + spos + ")";
	prevp.style.display = "inline";
}

function goprevp(spos) {
	var key = document.XSLDocument.selectSingleNode("*/xsl:template[@match='ROW']/xsl:if/@expr");
	key.value = "getpos(" + spos + ")";
	var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
	content.innerHTML = d.transformNode(document.XSLDocument);
	spos = spos + 5;
	nextp.href = "javascript:gonextp(" + spos + ")";
	nextp.style.display = "inline";
	spos = spos - 10;
	prevp.href = "javascript:goprevp(" + spos + ")";
	if(spos <= 0){prevp.style.display = "none";}
}

function sort(sortfld) {
	sortfld = sortfld - 1;
	var key = document.XSLDocument.selectSingleNode("*/xsl:template[@match='RESULTSET']//xsl:apply-templates[@select='ROW']/@order-by");
	key.value = "COL[" + sortfld + "]/DATA";
	var d = document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET");
	content.innerHTML = d.transformNode(document.XSLDocument);
}
]]></xsl:comment>
			</script>

			</head>
			<body>
				<span id="content"><xsl:apply-templates select="RESULTSET" /></span>
				<table border="1">
					<tr>
						<td width="100"><a id="prevp" href="javascript:goprevp(-4)">prevPage</a></td>
						<td width="100"><a id="nextp" href="javascript:gonextp(6)">nextPage</a></td>
					</tr>
				</table>
			</body>
		</html>
	</xsl:template>

	<xsl:template match="RESULTSET">
		<table border="1">
			<tr>
				<th><a href="javascript:sort(0)">name</a></th>
				<th><a href="javascript:sort(1)">os</a></th>
				<th><a href="javascript:sort(2)">price</a></th>
				<th><a href="javascript:sort(3)">color</a></th>
			</tr>
			<xsl:apply-templates select="ROW" order-by="COL[0]/DATA" />
		</table>
	</xsl:template>

	<xsl:template match="ROW">
		<xsl:if expr="getpos(1)">
			<tr><xsl:apply-templates select="COL" /></tr>
		</xsl:if>
	</xsl:template>

	<xsl:template match="COL">
		<td><xsl:value-of select="DATA" /></td>
	</xsl:template>
	
</xsl:stylesheet>

　もう、ここまでくるとXSL書いてるのか、JavaScript書いてるのかわからなくなってきてしまいます。document.XMLDocument.selectSingleNode("FMPXMLRESULT/RESULTSET/@FOUND").value;は、XMLの中から該当レコード数に相当する部分、つまりFMPXMLRESULT要素の子要素であるRESULTSET要素のFOUND属性の値を取り出しています。この数値を使って、最終ページになったら「nextPage」ボタンを隠す（nextp.style.display="none";）スクリプトを追加しています。同じように、最初のページになったら「prevPage」ボタンが隠れる（prevp.style.display="none";）ようになってます。＞＞

関連ページ：