Motivation:
Um Benutzern die Anzeige großer Datenmengen zu erleichtern, verwenden wir dynamisches Paging. Daher ist die Paging-Funktion das häufigste und am häufigsten verwendete Funktionsmodul, das wir auf der Website gesehen haben. In der Vergangenheit war das Informations-Paging mit der Datenbank verbunden und jeder Klick erforderte die Unterstützung der Hintergrunddatenbank. Dies erhöht nicht nur die Belastung des Servers, sondern beeinträchtigt auch die Browsing-Geschwindigkeit des Benutzers erheblich. Stellen Sie sich vor, welche Auswirkungen würde es haben, wenn die Paging-Funktion auf dem Client platziert würde? Haha, schauen Sie sich das Design unten an! .
XML-Volume-Dynamik-Paging
hat 2 Dateien: seiten.xml und seiten.xsl
Legen Sie die Paging-Funktion auf den Client. Filtern Sie Daten, ohne die Seite zu aktualisieren, und verbessern Sie so effektiv die Effizienz beim Durchsuchen von Daten.
Effekt:
Hier durchsuchen
Code:
pages.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<BlueIdea>
<team>
<blue_ID>1</blue_ID>
<blue_name>Sailflying</blue_name>
<blue_text>一个简单的分页</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML专题</blue_class>
</team>
<team>
<blue_ID>2</blue_ID>
<blue_name>flyingbird</blue_name>
<blue_text>嫁给你，是要你疼的</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>灌水精华</blue_class>
</team>
<team>
<blue_ID>3</blue_ID>
<blue_name>苛子</blue_name>
<blue_text>正则表达式在ＵＢＢ论坛中的应用</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>Web 编程精华</blue_class>
</team>
<team>
<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>
</team>
<team>
<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>
</team>
</BlueIdea>
<?xml version="1.0" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:template match="/">
<html>
<head>
<title> XML卷之实战锦囊（3）：动态分页</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ font: 12px "宋体", "Arial", "Times New Roman"; }
table { font-size: 12px; border: 0px double; border-color: #99CC99 #99CC99 #CCCCCC #CCCCCC; cellpadding:3;cellspacing:3; bgcolor:#eeeeee; text-decoration: blink}
span { font-size: 12px; color: red; }
.keybutton { cursor:hand; font-size: 12px; color: #003300; background: #ffffff; border: 0px solid;}
</style>
<script>
<xsl:comment>
<![CDATA[
var OnePageNum=2;
var PageNum=1;
var XMLPageNum=1;
function pages(Num)
{
stylesheet=document.XSLDocument;
source=document.XMLDocument;
nodes=source.documentElement.childNodes;
len=nodes.length;
for(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var firstNum=0;
var lastNume=0;
if (Num=="first") {PageNum=1;}
if (Num=="previous") {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=text;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
]]>
</xsl:comment>
</script>
</head>
<body>
<p align="center"><span>XML卷之实战锦囊（3）：动态分页</span></p>
<table 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>
</table>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</body>
</html>
</xsl:template>
<xsl:template match="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellspacing="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"/>
</table>
</xsl:template>
<xsl:template match="team">
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=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:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:value-of />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:value-of />
</td>
</xsl:template>
</xsl:stylesheet>Erklärung:
1) search.xml ist eine Datendatei, ich glaube, dass jeder kein Problem haben wird.
2) search.xsl ist eine Formatdatei, es gibt mehrere Dinge zu beachten.
(1) Im Skript:
nodes=source.documentElement.childNodes;
sortField=document.XSLDocument.selectSingleNode("//@expr");
ist
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
childnumber(this)<=1 & childnumber(this)>=2
Einige andere finden Sie in XML-Büchern.
OnePageNum: die Anzahl der auf jeder Seite angezeigten Daten
PageNum: die aktuelle Seitennummer
XMLPageNum: die Gesamtzahl der Seiten
firstNum: Der erste Datenwert der aktuellen Seite
lastNum: Der letzte Datenwert der aktuellen Seite
(2) Im Text:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
In der Anfangsphase verlangen wir, dass nur die Werte der ersten beiden Knoten ausgegeben werden.
Funktion: Gibt die Nummer des aktuellen Knotens in seiner übergeordneten Knotenliste zurück. Die Standardnummer des ersten Knotens in der Liste ist 1.
Beim Paging beurteilen wir anhand der Nummer des Knotens, zu welcher Seite es gehört.
expr
Ich weiß nicht, ob Ihnen aufgefallen ist, dass wir die ersten beiden Male test verwendet haben, aber dieses Mal haben wir expr verwendet.
Es gibt bestimmte Unterschiede zwischen ihnen und auch ihre Verwendung ist unterschiedlich.
expr ── Skriptsprachausdruck, das Berechnungsergebnis ist „wahr“ oder „falsch“; wenn das Ergebnis „wahr“ ist und den Test besteht, wird der Inhalt in der Ausgabe angezeigt (dieses Attribut kann weggelassen werden).
Test ── Quelldaten-Testbedingungen.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >首页</button>
2) Durchsuchen Sie einfach die XML-Datei mit einem Browser. Das ist der Effekt, den Sie sehen werden, er sollte gut sein!
Postscript:
Haha, Sie können die Funktion der dynamischen Sortierung und anschließenden Paginierung hinzufügen. Machen Sie dann die Anzahl der Listen konfigurierbar. Lassen Sie Ihrer Fantasie freien Lauf, um diese Funktionen zu perfektionieren. Sie können nach besseren Möglichkeiten zur Implementierung der Paging-Funktionalität suchen. Es ist toll, miteinander zu diskutieren!
So konvertieren Sie PDF in das XML-Format
BIOS kann Solid-State-Laufwerk nicht erkennen
So verwenden Sie Union in C-Sprache
So legen Sie die Dreamweaver-Schriftart fest
Einführung in die Verwendung von Messageboxen
So lösen Sie 0xc000035
Welche Tools zur statischen Codeprüfung gibt es?
Was bedeutet Root-Server?
