Motivation:
Um Benutzern das Anzeigen 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 Surfgeschwindigkeit des Benutzers erheblich.
Stellen Sie sich vor, welche Auswirkungen würde es haben, wenn die Paging-Funktion auf dem Client installiert würde? Haha, schauen Sie sich das Design unten an! .
Material:
Das dynamische Paging des XML-Volumes besteht aus zwei Dateien: faces.xml und faces.xsl.
Die Funktionen sind:
Platzieren Sie die Paging-Funktion auf der Clientseite. Filtern Sie Daten, ohne die Seite zu aktualisieren, und verbessern Sie so effektiv die Effizienz beim Durchsuchen von Daten.
Wirkung:
Stöbern Sie hier
Code:
seiten.xml
<?xml version="1.0"kodierung="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<BlueIdea>
<Team>
<blue_ID>1</blue_ID>
<blue_name>Segelfliegen</blue_name>
<blue_text>Ein einfaches Paging</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML-Thema</blue_class>
</team>
<Team>
<blue_ID>2</blue_ID>
<blue_name>fliegender Vogel</blue_name>
<blue_text>Dich zu heiraten wird dir wehtun</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Bewässerungsessenz</blue_class>
</team>
<Team>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Anwendung regulärer Ausdrücke im UBB-Forum</blue_text>
<blue_time>23.11.2001 21:02:16</blue_time>
<blue_class>Essenz der Webprogrammierung</blue_class>
</team>
<Team>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Jahresend-Klassiker-Lenkungsparty-Kompletthandbuch v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Forum-Bewässerungsgebiet</blue_class>
</team>
<Team>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Zusammenfassung der Asp-Fehlermeldungen</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>Javascript</blue_class>
</team>
</BlueIdea>
seiten.xsl
<?xml version="1.0"kodierung="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<Kopf>
<title> Praktische Tipps zum XML-Volume (3): dynamisches Paging</title>
<Stil>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ Schriftart: 12px "宋体", "Arial", "Times New Roman" }
Tabelle {Schriftgröße: 12px; Randfarbe: #99CC99 #99CC99 #CCCCCC #CCCCCC; bgcolor:#eeeee;
span { Schriftgröße: 12px; Farbe: rot }
.keybutton { Cursor:Hand; Schriftgröße: 12px; Hintergrund: #ffffff;}
</style>
<Skript>
<xsl:comment>
<![CDATA[
varOnePageNum=2;
varPageNum=1;
var XMLPageNum=1;
Funktionsseiten (Anzahl)
{
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>Praktische Tipps für XML-Volumes (3): dynamisches Paging</span></p>
<table align="center" width="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Homepage</button>
<button id="cmd previousPage" class="keybutton" onclick="pages(' previous');" >Vorherige Seite</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">Nächste Seite</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">Letzte Seite</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" cellpacing="1" bordercolordark="#ffffff" bordercolorlight="#ADAAAD">
<tr bgcolor="#FFCC99" align="center">
<td>Nummer</td>
<td>Name</td>
<td>Thema</td>
<td>Veröffentlichungszeit</td>
<td>Klassifizierung</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ären:
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;
Die Funktion lautet: Alle Knoten finden. nodes.length ist die Gesamtzahl der Knoten, die die Bedingungen erfüllen
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
Die Funktion lautet: Finden Sie den ersten Knoten mit dem Attribut expr, also ist der entsprechende Knoten
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Daher beträgt der Wert von expr beim ersten onLoad
Kindernummer(dieses)<=1 & Kindernummer(dieses)>=2
Über > Vielleicht kennen Sie es besser. Was ist also & Es ist „und“.
Weitere finden Sie in XML-Büchern.
Parameterbeschreibung:
OnePageNum: Die Anzahl der auf jeder Seite angezeigten Daten
PageNum: aktuelle Seitennummer
XMLPageNum: 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 ">
Beim Paging müssen wir geeignete Daten ausgeben, daher verwenden wir eine if-Beurteilungsbedingung, um sie zu steuern.
Zu Beginn haben wir gefordert, dass nur die Werte der ersten beiden Knoten ausgegeben werden.
Kindernummer(dies)
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 Knotennummer, zu welcher Seite es gehört.
Ausdruck
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 gewisse Unterschiede zwischen ihnen und auch ihre Verwendung ist unterschiedlich.
expr ─ Skriptsprachenausdruck, 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 ── Testbedingungen für Quelldaten.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Homepage</button>
Die Funktion besteht darin, die Daten zur vorherigen Seite zurückzugeben. Die anderen Tasten funktionieren ähnlich.
Ein zusätzlicher Punkt: So verwenden Sie XML-Beispieldateien
1) Speichern Sie die beiden Dateien in jedem Beispiel getrennt nach ihren Dateinamen.
2) Durchsuchen Sie die XML-Datei mit einem Browser. Das ist der Effekt, den Sie sehen werden, er sollte gut sein!
Nachwort:
Haha, Sie können die Paging-Funktion nach der dynamischen Sortierung hinzufügen. Machen Sie dann die Anzahl der Listen konfigurierbar. Lassen Sie Ihrer Fantasie freien Lauf, um diese Funktionen noch perfekter zu machen. Sie können nach besseren Möglichkeiten zur Implementierung der Paging-Funktionalität suchen. Es ist toll, miteinander zu diskutieren!