motivação:
Para facilitar aos usuários a visualização de grandes quantidades de dados, usaremos paginação dinâmica, portanto a função de paginação é o módulo funcional mais comum e comumente usado que vimos no site. No passado, a paginação de informações estava conectada ao banco de dados e cada clique exigia o suporte do banco de dados de segundo plano. Isso não só aumenta a carga do servidor, mas também afeta seriamente a velocidade de navegação do usuário.
Imagine só, se a função de paginação for colocada no cliente, que tipo de efeito isso terá? Haha, dê uma olhada no design abaixo! .
Material:
A paginação dinâmica do volume XML possui dois arquivos: pages.xml e pages.xsl
.
Coloque a função de paginação no lado do cliente. Filtre os dados sem atualizar a página, melhorando efetivamente a eficiência dos dados de navegação.
Efeito:
Navegue aqui
Código:
páginas.xml
<?xml version="1.0" encoding="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<Ideia Azul>
<equipe>
<blue_ID>1</blue_ID>
<blue_name>Velando</blue_name>
<blue_text>Uma paginação simples</blue_text>
<blue_time>11/01/2002 17:35:33</blue_time>
<blue_class>tópico XML</blue_class>
</equipe>
<equipe>
<blue_ID>2</blue_ID>
<blue_name>pássaro voador</blue_name>
<blue_text>Casar com você vai te machucar</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Essência de Irrigação</blue_class>
</equipe>
<equipe>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Aplicação de expressões regulares no fórum UBB</blue_text>
<blue_time>23/11/2001 21:02:16</blue_time>
<blue_class>Essência da Programação Web</blue_class>
</equipe>
<equipe>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Manual completo do grupo de direção clássico de fim de ano v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Área de irrigação do fórum</blue_class>
</equipe>
<equipe>
<blue_ID>5</blue_ID>
<blue_name>mmkk</blue_name>
<blue_text>Resumo da mensagem de erro Asp</blue_text>
<blue_time>13/10/2001 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</equipe>
</BlueIdea>
páginas.xsl
<?xml version="1.0" encoding="gb2312" ?>
<xsl:folha de estilo xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:template match="/">
<html>
<cabeça>
<title> Dicas práticas sobre volume XML (3): paginação dinâmica</title>
<estilo>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ fonte: 12px "宋体", "Arial", "Times New Roman" };
tabela {tamanho da fonte: 12px borda: 0px cor da borda: #99CC99 #99CC99 #CCCCCC #CCCCCC;espaçamento de célula:3;
span {tamanho da fonte: 12px cor: vermelho};
.keybutton { cursor: mão; tamanho da fonte: 12px cor: #003300;
</estilo>
<roteiro>
<xsl:comentar>
<![CDATA[
varOnePageNum=2;
varPageNum=1;
var XMLPageNum=1;
páginas de função (Num)
{
folha de estilo=document.XSLDocument;
fonte=documento.XMLDocument;
nós=source.documentElement.childNodes;
len=nós.comprimento;
for(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var primeiroNum=0;
var últimoNume=0;
if (Num=="primeiro") {PageNum=1;}
if (Num=="anterior") {if (PageNum>1) PageNum -=1;}
if (Num=="próximo") {if (PageNum<XMLPageNum) PageNum +=1;}
if (Num=="último") {PageNum =XMLPageNum;}
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
primeiroNum=OnePageNum*(PageNum-1)+1;
lastNum=OnePageNum*(PageNum-1)+OnePageNum;
text="childnumber(this)>="+firstNum+" & childnumber(this)<="+lastNum;
sortField.value=texto;
Layer1.innerHTML=source.documentElement.transformNode(folha de estilo);
}
]]>
</xsl:comment>
</script>
</head>
<corpo>
<p align="center"><span>Dicas práticas sobre volume XML (3): paginação dinâmica</span></p>
<tabela alinhar="centro" largura="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Página inicial</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >Página anterior</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">Próxima página</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">Última página</button>
</td>
</tr>
</tabela>
<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" alinhamento="centro">
<td>Número</td>
<td>Nome</td>
<td>Tema</td>
<td>Hora de publicação</td>
<td>Classificação</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</tabela>
</xsl:template>
<xsl:template match="team">
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
<tr alinhar="centro">
<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:se>
</xsl:template>
<xsl:template match="blue_ID">
<td bgcolor="#eeeee">
<xsl:valor-de />
</td>
</xsl:template>
<xsl:template match="blue_name">
<td>
<xsl:valor-de />
</td>
</xsl:template>
<xsl:template match="blue_text">
<td>
<xsl:valor-de />
</td>
</xsl:template>
<xsl:template match="blue_time">
<td>
<xsl:valor-de />
</td>
</xsl:template>
<xsl:template match="blue_class">
<td>
<xsl:valor-de />
</td>
</xsl:template>
</xsl:folha de estilo>
explicar:
1) search.xml é um arquivo de dados, acredito que todos não terão problemas.
2) search.xsl é um arquivo de formato, há várias coisas para prestar atenção.
(1) No script:
nós=source.documentElement.childNodes;
A função é: encontrar todos os nós. nós.length é o número total de nós que atendem às condições
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
A função é: encontre o primeiro nó com o atributo expr, então seu nó correspondente é
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Portanto, o valor de expr durante o primeiro onLoad é
númerofilho(este)<=1 & númerofilho(este)>=2
Sobre > Você pode estar mais familiarizado com isso. Então, o que é & É "e".
Você pode encontrar outros em livros XML.
Descrição do parâmetro:
OnePageNum: o número de dados exibidos em cada página
PageNum: número da página atual
XMLPageNum: número total de páginas
firstNum: o primeiro valor de dados da página atual
lastNum: o último valor de dados da página atual
(2) No texto:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Na paginação, precisamos gerar dados apropriados, então usamos uma condição de julgamento if para controlá-los.
No início, solicitamos que apenas os valores dos dois primeiros nós fossem gerados.
número do filho (este)
Função: Retorna o número do nó atual em sua lista de nós superiores. O número padrão do primeiro nó na lista é 1.
Na paginação, julgamos a qual página ela pertence com base no número do nó.
expressão
Não sei se você notou que nas duas primeiras vezes usamos test, mas dessa vez usamos expr.
Existem certas diferenças entre eles e seu uso também é diferente.
expr ─ Expressão em linguagem de script, o resultado do cálculo é "verdadeiro" ou "falso"; se o resultado for "verdadeiro" e passar no teste, o conteúdo será exibido na saída (este atributo pode ser omitido).
teste ── condições de teste dos dados de origem.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Página inicial</button>
A função é retornar os dados para a página anterior. Os outros botões funcionam de forma semelhante.
Um ponto adicional: Como usar arquivos de exemplo XML
1) Salve os dois arquivos em cada exemplo separadamente de acordo com seus nomes de arquivo.
2) Use um navegador para navegar no arquivo XML. Esse é o efeito que você verá, deve ser bom!
pós-escrito:
Haha, você pode adicionar a função de paginação após a classificação dinâmica. Em seguida, torne o número de listas configurável. Use sua imaginação para tornar essas funções mais perfeitas. Você pode pesquisar maneiras melhores de implementar a funcionalidade de paginação. É ótimo discutirmos uns com os outros!