동기:
사용자가 많은 양의 데이터를 쉽게 볼 수 있도록 동적 페이징을 사용할 것이므로 페이징 기능은 우리가 웹 사이트에서 본 기능 모듈 중 가장 일반적이고 일반적으로 사용되는 기능 모듈입니다. 과거에는 정보 페이징이 데이터베이스에 연결되었으며 모든 클릭은 백그라운드 데이터베이스에서 지원되어야 합니다. 이는 서버의 부담을 증가시킬 뿐만 아니라 사용자의 브라우징 속도에도 심각한 영향을 미칩니다.
클라이언트에 페이징 기능을 얹는다면 어떤 영향을 미칠까요? 하하, 아래 디자인을 보세요! .
자료:
XML 볼륨 동적 페이징
에는 두 개의 파일이 있습니다: Pages.xml 및 Pages.xsl
기능:
클라이언트에 페이징 기능을 넣습니다. 페이지를 새로 고치지 않고 데이터를 필터링하여 데이터 탐색 효율성을 효과적으로 향상시킵니다.
효과:
여기에서 찾아보기
코드:
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>
설명:
1) search.xml은 데이터 파일이므로 누구에게나 문제가 없을 것이라고 믿습니다.
2) search.xsl은 형식 파일이므로 주의할 점이 몇 가지 있습니다.
(1) 스크립트에서
nodes=source.documentElement.childNodes;
는 모든 노드를 찾는 데 사용됩니다. node.length는
sortField=document.XSLDocument.selectSingleNode("//@expr"); 조건을 충족하는 총 노드 수입니다. 해당 기능은 expr 속성을 가진 첫 번째 노드를 찾는 것이므로 해당 노드는
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
childnumber(this)<=1 & childnumber(this)>=2
XML 책에서 다른 내용을 찾을 수 있습니다.
OnePageNum: 각 페이지에 표시되는 데이터 수
PageNum: 현재 페이지 번호
XMLPageNum: 총 페이지 수
firstNum: 현재 페이지의 첫 번째 데이터 값
lastNum: 현재 페이지의 마지막 데이터 값
(2) 텍스트 내용:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
초기 단계에서는 처음 두 노드의 값만 출력되도록 요구합니다.
함수: 상위 노드 목록에 있는 현재 노드의 번호를 반환합니다. 목록에 있는 첫 번째 노드의 기본 번호는 1입니다.
페이징에서는 노드 수를 기준으로 어느 페이지에 속하는지 판단합니다.
expr
처음 두 번은 test를 사용했지만 이번에는 expr을 사용했다는 사실을 눈치채셨는지 모르겠습니다.
그들 사이에는 일정한 차이가 있으며 사용법도 다릅니다.
expr ── 스크립트 언어 표현, 계산 결과는 "true" 또는 "false"입니다. 결과가 "true"이고 테스트를 통과하면 내용이 출력에 표시됩니다(이 속성은 생략 가능).
test ── 소스 데이터 테스트 조건입니다.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >首页</button>
2) 브라우저로 XML 파일을 찾아보세요. 이것이 당신이 보게 될 효과입니다. 좋을 것입니다!
추첨:
하하, 동적 정렬 후 페이징 기능을 추가할 수 있습니다. 그런 다음 목록 수를 구성 가능하게 만듭니다. 상상력을 발휘하여 이러한 기능을 더욱 완벽하게 만드십시오. 페이징 기능을 구현하는 더 나은 방법을 연구할 수 있습니다. 서로 토론하는 것이 좋습니다!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
