motivation:
Afin de permettre aux utilisateurs de visualiser de grandes quantités de données, nous utiliserons la pagination dynamique. La fonction de pagination est donc le module fonctionnel le plus courant et le plus couramment utilisé que nous ayons vu sur le site Web. Dans le passé, la pagination d'informations était connectée à la base de données et chaque clic nécessitait la prise en charge de la base de données en arrière-plan. Cela augmente non seulement la charge sur le serveur, mais affecte également sérieusement la vitesse de navigation de l'utilisateur.
Imaginez, si la fonction de pagination est appliquée au client, quel genre d'effet cela aura-t-il ? Haha, jetez un œil au design ci-dessous ! .
Matériel:
La pagination dynamique du volume XML comporte deux fichiers : pages.xml et pages.xsl.
Les fonctions sont :
Mettez la fonction de pagination côté client. Filtrez les données sans actualiser la page, améliorant ainsi efficacement l'efficacité de la navigation des données.
Effet:
Parcourez ici
Code:
pages.xml
<?xml version="1.0" encodage="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<Idée Bleue>
<équipe>
<blue_ID>1</blue_ID>
<blue_name>Vol à voile</blue_name>
<blue_text>Une simple pagination</blue_text>
<blue_time>11/01/2002 17:35:33</blue_time>
<blue_class>Sujet XML</blue_class>
</équipe>
<équipe>
<blue_ID>2</blue_ID>
<blue_name>oiseau volant</blue_name>
<blue_text>T'épouser te fera du mal</blue_text>
<blue_time>06/09/2001 12:45:51</blue_time>
<blue_class>Essence d'irrigation</blue_class>
</équipe>
<équipe>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Application des expressions régulières dans le forum UBB</blue_text>
<blue_time>23/11/2001 21:02:16</blue_time>
<blue_class>Essence de programmation Web</blue_class>
</équipe>
<équipe>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Manuel complet du pilotage classique de fin d'année v0.1</blue_text>
<blue_time>08/12/2000 10:22:48</blue_time>
<blue_class>Zone d'irrigation du Forum</blue_class>
</équipe>
<équipe>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Résumé du message d'erreur Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</équipe>
</IdéeBleue>
pages.xsl
<?xml version="1.0" encodage="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<tête>
<title> Conseils pratiques sur les volumes XML (3) : pagination dynamique</title>
<style>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ police : 12px "宋体", "Arial", "Times New Roman" };
table { taille de police : 12 px ; bordure : 0px double ; couleur de la bordure : #99CC99 #99CCCC #CCCCCC ; espacement des cellules : 3 ;
span { taille de police : 12 px ; couleur : rouge ;
.keybutton { curseur : main ; taille de police : 12 px ; couleur : #003300 ; fond : #ffffff ;
</style>
<script>
<xsl:commentaire>
<![CDATA[
varOnePageNum = 2 ;
varPageNum=1;
var XMLPageNum = 1 ;
pages de fonction (Num)
{
feuille de style=document.XSLDocument;
source=document.XMLDocument;
nodes=source.documentElement.childNodes;
len=nodes.length;
pour(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var premierNum=0;
var lastNume=0;
if (Num=="premier") {PageNum=1;}
if (Num=="précédent") {if (PageNum>1) PageNum -=1;}
if (Num=="suivant") {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=texte;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
]]>
</xsl:commentaire>
</script>
</tête>
<corps>
<p align="center"><span>Conseils pratiques sur les volumes XML (3) : pagination dynamique</span></p>
<table align="center" width="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Page d'accueil</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >Page précédente</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">Page suivante</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">Dernière page</button>
</td>
</tr>
</table>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</body>
</html>
</xsl:modèle>
<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>Numéro</td>
<td>Nom</td>
<td>Thème</td>
<td>Heure de publication</td>
<td>Classement</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</table>
</xsl:modèle>
<xsl:template match="équipe">
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
<tr align="centre">
<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:modèle>
<xsl:template match="blue_ID">
<td bgcolor="#eeeeee">
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_name">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_text">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_time">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
<xsl:template match="blue_class">
<td>
<xsl:valeur-de />
</td>
</xsl:modèle>
</xsl:feuille de style>
expliquer:
1) search.xml est un fichier de données, je pense que tout le monde n'aura aucun problème.
2) search.xsl est un fichier de format, il y a plusieurs choses auxquelles il faut faire attention.
(1) Dans le script :
nodes=source.documentElement.childNodes;
La fonction est : trouver tous les nœuds. nodes.length est le nombre total de nœuds qui remplissent les conditions
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
La fonction est : trouver le premier nœud avec l'attribut expr, donc son nœud correspondant est
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Par conséquent, la valeur de expr lors du premier onLoad est
numéroenfant(ce)<=1 & numéroenfant(ce)>=2
À propos de > < Alors, qu'est-ce que & C'est "et".
Vous pouvez en trouver d'autres dans les livres XML.
Description du paramètre :
OnePageNum : Le nombre de données affichées sur chaque page
PageNum : numéro de la page actuelle
XMLPageNum : nombre total de pages
firstNum : la première valeur de données de la page actuelle
lastNum : la dernière valeur de données de la page actuelle
(2) Dans le texte :
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Lors de la pagination, nous devons générer des données appropriées, nous utilisons donc une condition de jugement if pour les contrôler.
Au début, nous avons demandé que seules les valeurs des deux premiers nœuds soient sorties.
numéro d'enfant (ceci)
Fonction : renvoie le numéro du nœud actuel dans sa liste de nœuds supérieurs. Le numéro par défaut du premier nœud de la liste est 1.
Lors de la pagination, nous jugeons à quelle page il appartient en fonction du numéro du nœud.
expression
Je ne sais pas si vous avez remarqué que les deux premières fois nous avons utilisé test, mais cette fois nous avons utilisé expr.
Il existe certaines différences entre eux et leur utilisation est également différente.
expr ─ Expression du langage de script, le résultat du calcul est « vrai » ou « faux » si le résultat est « vrai » et réussit le test, le contenu sera affiché dans la sortie (cet attribut peut être omis).
test ── conditions de test des données sources.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Page d'accueil</button>
La fonction est de renvoyer les données à la page précédente. Les autres boutons fonctionnent de la même manière.
Un point supplémentaire : Comment utiliser les fichiers d'exemple XML
1) Enregistrez les deux fichiers de chaque exemple séparément en fonction de leurs noms de fichiers.
2) Utilisez un navigateur pour parcourir le fichier XML. C'est l'effet que vous verrez, ça devrait être bon !
post-scriptum :
Haha, vous pouvez ajouter la fonction de pagination après un tri dynamique. Rendez ensuite le nombre de listes configurable. Utilisez votre imagination pour rendre ces fonctions plus parfaites. Vous pouvez rechercher de meilleures façons d’implémenter la fonctionnalité de pagination. C'est super de discuter entre nous !