แรงจูงใจ:
เพื่ออำนวยความสะดวกให้ผู้ใช้ดูข้อมูลจำนวนมาก เราจะใช้การเพจแบบไดนามิก ดังนั้นฟังก์ชันการเพจจึงเป็นโมดูลการทำงานที่ใช้กันทั่วไปและใช้บ่อยที่สุดที่เราเคยเห็นบนเว็บไซต์ ในอดีต เพจข้อมูลเชื่อมต่อกับฐานข้อมูล และการคลิกทุกครั้งจำเป็นต้องได้รับการสนับสนุนจากฐานข้อมูลเบื้องหลัง สิ่งนี้ไม่เพียงเพิ่มภาระบนเซิร์ฟเวอร์เท่านั้น แต่ยังส่งผลกระทบร้ายแรงต่อความเร็วในการเรียกดูของผู้ใช้อีกด้วย
ลองจินตนาการดูว่าถ้าฟังก์ชันเพจถูกใส่ไว้บนไคลเอนต์ มันจะมีผลกระทบอะไรบ้าง? ฮ่าฮ่า ลองดูการออกแบบด้านล่างสิ! -
วัสดุ:
การเพจแบบไดนามิกของวอลุ่ม XML มีสองไฟล์: Pages.xml และ Pages.xsl
ฟังก์ชันคือ:
วางฟังก์ชันเพจจิ้งไว้ที่ฝั่งไคลเอ็นต์ กรองข้อมูลโดยไม่ต้องรีเฟรชหน้า ปรับปรุงประสิทธิภาพของข้อมูลการท่องเว็บอย่างมีประสิทธิภาพ
ผล:
เรียกดูที่นี่
รหัส:
หน้า.xml
<?xml version="1.0" encoding="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>มมมม</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" encoding="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:แม่แบบที่ตรงกัน="/">
<html>
<หัว>
<title> เคล็ดลับการปฏิบัติเกี่ยวกับวอลุ่ม XML (3): การเพจแบบไดนามิก</title>
<สไตล์>
body,BlueIdea,ทีม,blue_ID,blue_name,blue_text,blue_time,blue_class{ แบบอักษร: 12px "宋体", "Arial", "Times New Roman";
ตาราง { ขนาดตัวอักษร: 12px; เส้นขอบ: 0px; เส้นขอบสี: #99CC99 #99CC99 #CCCCC #CCCCCC;
ขยาย { ขนาดตัวอักษร: 12px;
.keybutton { เคอร์เซอร์: มือ; ขนาดตัวอักษร: 12px; สี: #003300; พื้นหลัง: #ffffff;
</สไตล์>
<สคริปต์>
<xsl:ความคิดเห็น>
<![ซีดีข้อมูล[
varOnePageNum=2;
varPageNum=1;
var XMLPageNum=1;
หน้าฟังก์ชัน(จำนวน)
-
stylesheet=document.XSLDocument;
แหล่งที่มา=document.XMLDocument;
โหนด=source.documentElement.childNodes;
len=nodes.ความยาว;
สำหรับ(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var firstNum=0;
var LastNume=0;
ถ้า (Num=="First") {PageNum=1;}
ถ้า (Num=="ก่อนหน้า") {if (PageNum>1) PageNum -=1;}
ถ้า (Num=="ถัดไป") {ถ้า (PageNum<XMLPageNum) PageNum +=1;}
ถ้า (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:ความคิดเห็น>
</สคริปต์>
</หัว>
<ร่างกาย>
<p align="center"><span>เคล็ดลับการปฏิบัติเกี่ยวกับไดรฟ์ข้อมูล XML (3): การเพจแบบไดนามิก</span></p>
<ตาราง 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>
</ตาราง>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</ร่างกาย>
</html>
</xsl:แม่แบบ>
<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="ทีม" สั่งซื้อโดย = "blue_ID"/>
</ตาราง>
</xsl:แม่แบบ>
<xsl:template match="ทีม">
<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:ถ้า>
</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:template match="blue_time">
<td>
<xsl:มูลค่าของ />
</td>
</xsl:แม่แบบ>
<xsl:แม่แบบที่ตรงกัน="blue_class">
<td>
<xsl:มูลค่าของ />
</td>
</xsl:แม่แบบ>
</xsl:สไตล์ชีท>
อธิบาย:
1) search.xml เป็นไฟล์ข้อมูล ฉันเชื่อว่าทุกคนจะไม่มีปัญหา
2) search.xsl เป็นไฟล์ฟอร์แมต มีหลายสิ่งที่ต้องใส่ใจ
(1) ในสคริปต์:
nodes=source.documentElement.childNodes;
ฟังก์ชั่นคือ: ค้นหาโหนดทั้งหมด nodes.length คือจำนวนโหนดทั้งหมดที่ตรงตามเงื่อนไข
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
ฟังก์ชันคือ: ค้นหาโหนดแรกที่มีแอตทริบิวต์ expr ดังนั้นโหนดที่สอดคล้องกันคือ
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
ดังนั้นค่าของ expr ระหว่าง onLoad แรกคือ
หมายเลขลูก(นี้)<=1 & หมายเลขลูก(นี้)>=2
เกี่ยวกับ > คุณอาจจะคุ้นเคยมากขึ้น แล้วอะไรคือ & มันคือ "และ"
คุณสามารถค้นหาผู้อื่นได้ในหนังสือ XML
คำอธิบายพารามิเตอร์:
OnePageNum: จำนวนข้อมูลที่แสดงในแต่ละหน้า
PageNum: หมายเลขหน้าปัจจุบัน
XMLPageNum: จำนวนหน้าทั้งหมด
firstNum: ค่าข้อมูลแรกของหน้าปัจจุบัน
LastNum: ค่าข้อมูลสุดท้ายของหน้าปัจจุบัน
(2) ในข้อความ:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
ในการเพจ เราจำเป็นต้องส่งออกข้อมูลที่เหมาะสม ดังนั้นเราจึงใช้เงื่อนไขการตัดสินใจเพื่อควบคุมมัน
ในตอนแรกเราขอให้ส่งออกเฉพาะค่าของสองโหนดแรกเท่านั้น
หมายเลขบุตร(นี้)
ฟังก์ชัน: ส่งกลับจำนวนของโหนดปัจจุบันในรายการโหนดที่เหนือกว่า หมายเลขเริ่มต้นของโหนดแรกในรายการคือ 1
ในการเพจ เราจะตัดสินว่าเพจนั้นเป็นของเพจใดโดยพิจารณาจากจำนวนของโหนด
หมดอายุ
ฉันไม่รู้ว่าคุณสังเกตไหมว่าสองครั้งแรกที่เราใช้การทดสอบ แต่คราวนี้เราใช้ expr
มีความแตกต่างบางอย่างระหว่างพวกเขาและการใช้งานก็แตกต่างกันเช่นกัน
expr ─ นิพจน์ภาษาสคริปต์ ผลการคำนวณจะเป็น "จริง" หรือ "เท็จ" หากผลลัพธ์เป็น "จริง" และผ่านการทดสอบ เนื้อหาจะถูกแสดงในเอาต์พุต (สามารถละเว้นแอตทริบิวต์นี้ได้)
ทดสอบ ── เงื่อนไขการทดสอบแหล่งข้อมูล
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >หน้าแรก</button>
ฟังก์ชั่นคือการส่งคืนข้อมูลไปยังหน้าก่อนหน้า ปุ่มอื่นๆ ทำงานในลักษณะเดียวกัน
อีกประเด็นหนึ่ง: วิธีใช้ไฟล์ตัวอย่าง XML
1) บันทึกไฟล์ทั้งสองในแต่ละตัวอย่างแยกกันตามชื่อไฟล์
2) ใช้เบราว์เซอร์เพื่อเรียกดูไฟล์ XML นี่คือเอฟเฟกต์ที่คุณจะเห็น มันควรจะดี!
คำลงท้าย:
ฮ่าฮ่า คุณสามารถเพิ่มฟังก์ชั่นเพจได้หลังจากการเรียงลำดับแบบไดนามิก จากนั้นจึงกำหนดจำนวนรายการได้ ใช้จินตนาการของคุณเพื่อทำให้ฟังก์ชันเหล่านี้สมบูรณ์แบบยิ่งขึ้น คุณสามารถค้นหาวิธีที่ดีกว่าในการใช้ฟังก์ชันเพจจิ้งได้ เป็นเรื่องดีที่ได้พูดคุยกัน!