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
páginas.xsl
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;
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
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);
}
]]>
Dicas práticas sobre volume XML (3): paginação dinâmica