동기 부여:
사용자가 많은 양의 데이터를 쉽게 볼 수 있도록 동적 페이징을 사용하므로 페이징 기능은 웹사이트에서 본 기능 모듈 중 가장 일반적이고 일반적으로 사용되는 기능 모듈입니다. 과거에는 정보 페이징이 데이터베이스에 연결되었으며 클릭할 때마다 백그라운드 데이터베이스의 지원이 필요했습니다. 이는 서버의 부담을 증가시킬 뿐만 아니라 사용자의 브라우징 속도에도 심각한 영향을 미칩니다.
상상해 보세요. 클라이언트에 페이징 기능을 추가하면 어떤 효과가 있을까요? 하하, 아래 디자인을 보세요! .
재료:
XML 볼륨의 동적 페이징에는 두 개의 파일(pages.xml 및 Pages.xsl)이 있습니다
.
클라이언트 측에 페이징 기능을 추가하십시오. 페이지를 새로 고치지 않고 데이터를 필터링하여 데이터 탐색 효율성을 효과적으로 향상시킵니다.
효과:
여기에서 찾아보세요
암호:
페이지.xml
<?xml version="1.0" 인코딩="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<블루아이디어>
<팀>
<blue_ID>1</blue_ID>
<blue_name>항해</blue_name>
<blue_text>간단한 페이징</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>XML 주제</blue_class>
</팀>
<팀>
<blue_ID>2</blue_ID>
<blue_name>날아다니는 새</blue_name>
<blue_text>당신과 결혼하면 당신에게 상처를 줄 것입니다</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>이리게이션 에센스</blue_class>
</팀>
<팀>
<blue_ID>3</blue_ID>
<blue_name>카오지</blue_name>
<blue_text>UBB 포럼에서 정규식 적용</blue_text>
<blue_time>2001-11-23 21:02:16</blue_time>
<blue_class>웹 프로그래밍 본질</blue_class>
</팀>
<팀>
<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>
</팀>
<팀>
<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>자바스크립트</blue_class>
</팀>
</블루아이디어>
페이지.xsl
<?xml version="1.0" 인코딩="gb2312" ?>
<xsl:스타일시트 xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:템플릿 일치="/">
<html>
<머리>
<title> XML 볼륨의 실용적인 팁(3): 동적 페이징</title>
<스타일>
body,BlueIdea,team,blue_ID,blue_name,blue_text,blue_time,blue_class{ 글꼴: 12px "宋体", "Arial", "Times New Roman" }
테이블 { 글꼴 크기: 12px; 테두리: 0px double; 테두리 색상: #99CC99 #99CC99 #CCCCCC #CCCCCC;cellspacing:3; 텍스트 장식: 깜박임
범위 { 글꼴 크기: 12px; 색상: 빨간색 }
.keybutton { 커서:손; 글꼴 크기: 12px; 배경: #ffffff;
</style>
<스크립트>
<xsl:주석>
<![CDATA[
varOnePageNum=2;
varPageNum=1;
var XMLPageNum=1;
기능 페이지(Num)
{
스타일시트=document.XSLDocument;
소스=document.XMLDocument;
노드=source.documentElement.childNodes;
len=nodes.length;
for(i=1;i<=(len/OnePageNum);i++);
XML페이지번호=i;
var firstNum=0;
var lastNume=0;
if (Num=="first") {PageNum=1;}
if (Num=="이전") {if (PageNum>1) PageNum -=1;}
if (Num=="next") {if (PageNum<XMLPageNum) 페이지 번호 +=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=텍스트;
Layer1.innerHTML=source.documentElement.transformNode(스타일시트);
}
]]>
</xsl:코멘트>
</script>
</head>
<본문>
<p align="center"><span>XML 볼륨 실무 팁 (3): 동적 페이징</span></p>
<테이블 정렬="중앙" 너비="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:템플릿>
<xsl:템플릿 일치="BlueIdea">
<table width="500" border="1" align="center" cellpadding="1" cellpacing="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="팀" order-by="blue_ID"/>
</table>
</xsl:템플릿>
<xsl:템플릿 매치="팀">
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
<tr 정렬="가운데">
<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:템플릿>
<xsl:템플릿 일치="blue_ID">
<td bgcolor="#eeeeee">
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_name">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_text">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_time">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
<xsl:템플릿 일치="blue_class">
<TD>
<xsl:값/>
</td>
</xsl:템플릿>
</xsl:스타일시트>
설명하다:
1) search.xml은 데이터 파일이므로 누구에게나 문제가 없을 것이라고 생각합니다.
2) search.xsl은 형식 파일이므로 주의할 점이 몇 가지 있습니다.
(1) 스크립트에서:
node=source.documentElement.childNodes;
기능은 모든 노드를 찾는 것입니다. node.length는 조건을 충족하는 총 노드 수입니다.
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
함수는 다음과 같습니다. expr 속성을 가진 첫 번째 노드를 찾으므로 해당 노드는 다음과 같습니다.
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
따라서 첫 번째 onLoad 동안 expr의 값은 다음과 같습니다.
childnumber(this)<=1 & childnumber(this)>=2
<에 대해 더 잘 알고 계실 것입니다. 그렇다면 &는 무엇입니까? "그리고" 입니다.
XML 책에서 다른 내용을 찾을 수 있습니다.
매개변수 설명:
OnePageNum: 각 페이지에 표시되는 데이터 수
PageNum: 현재 페이지 번호
XMLPageNum: 총 페이지 수
firstNum: 현재 페이지의 첫 번째 데이터 값
lastNum: 현재 페이지의 마지막 데이터 값
(2) 본문에서:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
페이징에서는 적절한 데이터를 출력해야 하므로 if 판단 조건을 사용하여 이를 제어합니다.
처음에는 처음 두 노드의 값만 출력되도록 요청했습니다.
자녀번호(이것)
기능: 상위 노드 목록에 있는 현재 노드의 번호를 반환합니다. 목록에 있는 첫 번째 노드의 기본 번호는 1입니다.
페이징에서는 노드 수를 기준으로 어느 페이지에 속하는지 판단합니다.
특급
처음 두 번은 test를 사용했지만 이번에는 expr을 사용했다는 사실을 눈치채셨는지 모르겠습니다.
그들 사이에는 특정한 차이점이 있으며 사용법도 다릅니다.
expr ─ 스크립팅 언어 표현식, 계산 결과는 "true" 또는 "false"입니다. 결과가 "true"이고 테스트를 통과하면 내용이 출력에 표시됩니다(이 속성은 생략 가능).
test ── 소스 데이터 테스트 조건.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >홈페이지</button>
이 기능은 데이터를 이전 페이지로 되돌리는 것입니다. 다른 버튼도 비슷하게 작동합니다.
추가 사항: XML 예제 파일 사용 방법
1) 각 예제의 두 파일을 파일 이름에 따라 별도로 저장합니다.
2) 브라우저를 사용하여 XML 파일을 찾아보세요. 이것이 당신이 보게 될 효과입니다. 좋을 것입니다!
추신:
ㅎㅎ 동적 정렬 후 페이징 기능을 추가할 수 있습니다. 그런 다음 목록 수를 구성 가능하게 만듭니다. 상상력을 발휘하여 이러한 기능을 더욱 완벽하게 만드십시오. 페이징 기능을 구현하는 더 나은 방법을 연구할 수 있습니다. 서로 토론하는 것이 좋습니다!