Maison > Article > développement back-end > Conseils pratiques sur les volumes XML (3) : pagination dynamique
Conseils pratiques sur les volumes XML (3) : pagination dynamique
- 黄舟original
- 2017-02-10 16:16:291698parcourir
Motivation :
Afin de permettre aux utilisateurs de visualiser de grandes quantités de données, nous utiliserons la pagination dynamique, de sorte que la fonction de pagination est 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 mise sur le client, quel effet cela aura-t-il ? Haha, jetez un œil au design ci-dessous ! .
Matériaux :
La pagination dynamique du volume XML
comporte 2 fichiers : pages.xml et pages.xsl
Fonction :
Mettez la fonction de pagination sur le client. Filtrez les données sans actualiser la page, améliorant ainsi efficacement l'efficacité de la navigation des données.
Effet :
Parcourir ici
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>
pages.xsl
<?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>
Explication :
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;
est utilisé pour trouver tous les nœuds. nodes.length est le nombre total de nœuds qui remplissent les conditions
sortField=document.XSLDocument.selectSingleNode("//@expr"); Sa fonction est de trouver le premier nœud avec l'attribut expr, donc son nœud correspondant est
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Donc, la valeur de expr lors du premier onLoad est
childnumber(this)<=1 & childnumber(this)>=2
À propos de> 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 : le numéro de la page actuelle
XMLPageNum : le 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 contrôler.
Dans la phase initiale, nous exigeons que seules les valeurs des deux premiers nœuds soient sorties.
childnumber(this)
Fonction : renvoie le numéro du nœud actuel dans sa liste de nœuds parents. Le numéro par défaut du premier nœud de la liste est 1.
En pagination, nous jugeons à quelle page il appartient en fonction du numéro du nœud.
expr
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');" >首页</button>
permet de renvoyer les données à la page précédente. Les autres boutons fonctionnent de la même manière.
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) Parcourez simplement le fichier XML avec un navigateur. C'est l'effet que vous verrez, ça devrait être bon !
Postscript :
Haha, vous pouvez ajouter la fonction de tri dynamique puis de pagination. 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 !
Ce qui précède concerne les conseils pratiques pour les volumes XML (3) : le contenu de la pagination dynamique. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !