motivasi:
Untuk memudahkan pengguna melihat data dalam jumlah besar, kami akan menggunakan paging dinamis, sehingga fungsi paging adalah modul fungsional yang paling umum dan umum digunakan yang pernah kami lihat di situs web. Di masa lalu, halaman informasi terhubung ke database, dan setiap klik memerlukan dukungan database latar belakang. Hal ini tidak hanya menambah beban pada server, tetapi juga berdampak serius pada kecepatan browsing pengguna.
Bayangkan saja, jika fungsi paging diletakkan di klien, apa efeknya? Haha, coba lihat desainnya di bawah ini! .
Bahan:
Paging dinamis volume XML memiliki dua file: halaman.xml dan halaman.xsl
.
Letakkan fungsi paging di sisi klien. Filter data tanpa menyegarkan halaman, secara efektif meningkatkan efisiensi penelusuran data.
Memengaruhi:
Telusuri di sini
Kode:
halaman.xml
<?xml versi="1.0" pengkodean="gb2312" ?>
<?xml-stylesheet type="text/xsl" href="pages.xsl" ?>
<Ide Biru>
<tim>
<blue_ID>1</blue_ID>
<blue_name>Berlayar</blue_name>
<blue_text>Paging sederhana</blue_text>
<blue_time>2002-1-11 17:35:33</blue_time>
<blue_class>Topik XML</blue_class>
</tim>
<tim>
<blue_ID>2</blue_ID>
<blue_name>burung terbang</blue_name>
<blue_text>Menikahimu akan menyakitimu</blue_text>
<blue_time>2001-09-06 12:45:51</blue_time>
<blue_class>Esensi Irigasi</blue_class>
</tim>
<tim>
<blue_ID>3</blue_ID>
<blue_name>Kao Zi</blue_name>
<blue_text>Penerapan ekspresi reguler di forum UBB</blue_text>
<blue_time>23-11-2001 21:02:16</blue_time>
<blue_class>Esensi Pemrograman Web</blue_class>
</tim>
<tim>
<blue_ID>4</blue_ID>
<blue_name>Tayilang</blue_name>
<blue_text>Panduan lengkap pesta kemudi klasik akhir tahun v0.1</blue_text>
<blue_time>2000-12-08 10:22:48</blue_time>
<blue_class>Area irigasi forum</blue_class>
</tim>
<tim>
<blue_ID>5</blue_ID>
<nama_biru>mmkk</nama_biru>
<blue_text>Ringkasan pesan kesalahan Asp</blue_text>
<blue_time>2001-10-13 16:39:05</blue_time>
<blue_class>javascript</blue_class>
</tim>
</Ide Biru>
halaman.xsl
<?xml versi="1.0" pengkodean="gb2312" ?>
<xsl:stylesheet xmlns:xsl=" http://www.w3.org/TR/WD-xsl ">
<xsl:templat pertandingan="/">
<html>
<kepala>
<title> Tip praktis volume XML (3): paging dinamis</title>
<gaya>
badan,Ide Biru,tim,ID_biru,nama_biru,teks_biru,waktu_biru,kelas_biru{ font: 12px "宋体", "Arial", "Times New Roman"; }
tabel { ukuran font: 12px; batas: 0px ganda; warna batas: #99CC99 #99CC99 #CCCCCC #CCCCCC;
span { ukuran font: 12 piksel; warna: merah }
.keybutton { kursor:tangan; ukuran font: 12 piksel; warna: #003300; latar belakang: #ffffff;
</gaya>
<skrip>
<xsl:komentar>
<![CDATA[
varOnePageNum=2;
varPageNum=1;
var XMLPageNum=1;
halaman fungsi (Jumlah)
{
stylesheet=dokumen.XSLDocument;
sumber=dokumen.XMLDokumen;
node=source.documentElement.childNodes;
len=node.panjang;
untuk(i=1;i<=(len/OnePageNum);i++);
XMLPageNum=i;
var FirstNum=0;
varJumlah terakhir=0;
jika (Jumlah=="pertama") {NomorHalaman=1;}
if (Jumlah=="sebelumnya") {if (Nomor Halaman>1) Nomor Laman -=1;}
if (Num=="next") {if (PageNum<XMLPageNum) PageNum +=1;}
if (Jumlah=="terakhir") {PageNum =XMLPageNum;}
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
FirstNum=OnePageNum*(PageNum-1)+1;
Angka terakhir=Nomor SatuHalaman*(NomorHalaman-1)+NomorSatuHalaman;
text="nomor anak(ini)>="+Nomor pertama+" & nomor anak(ini)<="+Nomor terakhir;
sortField.value=teks;
Layer1.innerHTML=source.documentElement.transformNode(stylesheet);
}
]]>
</xsl:komentar>
</skrip>
</kepala>
<tubuh>
<p align="center"><span>Tips praktis volume XML (3): paging dinamis</span></p>
<tabel align="center" width="500" >
<tr>
<td>
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Beranda</button>
<button id="cmdpreviousPage" class="keybutton" onclick="pages('previous');" >Halaman sebelumnya</button>
<button id="cmdnextPage" class="keybutton" onclick="pages('next');">Halaman selanjutnya</button>
<button id="cmdlastPage" class="keybutton" onclick="pages('last');">Halaman terakhir</button>
</td>
</tr>
</tabel>
<div id="Layer1" name="Layer1"> <xsl:apply-templates select="BlueIdea" /></div>
</tubuh>
</html>
</xsl:templat>
<xsl:templat pertandingan="Ide Biru">
<tabel lebar = "500" border = "1" align = "center" cellpadding = "1" Cellspacing = "1" bordercolordark = "#ffffff" bordercolorlight = "#ADAAAD">
<tr bgcolor="#FFCC99" align="tengah">
<td>Nomor</td>
<td>Nama</td>
<td>Tema</td>
<td>Waktu publikasi</td>
<td>Klasifikasi</td>
</tr>
<xsl:apply-templates select="team" order-by="blue_ID"/>
</tabel>
</xsl:templat>
<xsl:templat pertandingan="tim">
<xsl:if expr="nomor anak(ini)>=1 & nomor anak(ini)<=2 ">
<tr menyelaraskan="tengah">
<xsl: apply-template pilih = "blue_ID" />
<xsl: apply-template pilih = "nama_biru" />
<xsl:apply-template pilih="blue_text" />
<xsl: apply-template pilih = "blue_time" />
<xsl:template penerapan pilih="kelas_biru" />
</tr>
</xsl:jika>
</xsl:templat>
<xsl:templat pertandingan="blue_ID">
<td bgcolor="#eeeeee">
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="nama_biru">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="blue_text">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="blue_time">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
<xsl:templat pertandingan="kelas_biru">
<td>
<xsl:nilai-dari />
</td>
</xsl:templat>
</xsl:lembar gaya>
menjelaskan:
1) search.xml adalah file data, saya yakin semua orang tidak akan mengalami masalah.
2) search.xsl adalah file berformat, ada beberapa hal yang perlu diperhatikan.
(1) Dalam skrip:
node=source.documentElement.childNodes;
Fungsinya adalah: temukan semua node. node.length adalah jumlah total node yang memenuhi ketentuan
sortField=document.XSLDocument.selectSingleNode(" //@expr ");
Fungsinya adalah: cari node pertama dengan atribut expr, jadi node yang bersesuaian adalah
<xsl:if expr="nomor anak(ini)>=1 & nomor anak(ini)<=2 ">
Oleh karena itu, nilai expr pada onLoad pertama adalah
nomor anak(ini)<=1 & nomor anak(ini)>=2
Tentang > Anda mungkin lebih mengenalnya. Jadi apa itu & Itu adalah "dan".
Anda dapat menemukan yang lain di buku XML.
Deskripsi parameter:
OnePageNum: Jumlah data yang ditampilkan pada setiap halaman
PageNum: nomor halaman saat ini
XMLPageNum: jumlah halaman total
firstNum: nilai data pertama dari halaman saat ini
lastNum: nilai data terakhir dari halaman saat ini
(2) Dalam teks:
<xsl:if expr="childnumber(this)>=1 & childnumber(this)<=2 ">
Dalam paging, kita perlu mengeluarkan data yang sesuai, jadi kita menggunakan kondisi penilaian if untuk mengontrolnya.
Pada awalnya, kami meminta agar hanya nilai dari dua node pertama yang ditampilkan.
nomor anak (ini)
Fungsi: Mengembalikan nomor node saat ini dalam daftar node superiornya. Nomor default dari node pertama dalam daftar adalah 1.
Dalam paging, kami menilai halaman mana yang dimilikinya berdasarkan nomor node.
expr
Saya tidak tahu apakah Anda memperhatikan bahwa dua kali pertama kami menggunakan tes, tapi kali ini kami menggunakan expr.
Ada perbedaan tertentu di antara keduanya dan penggunaannya juga berbeda.
expr ─ Ekspresi bahasa skrip, hasil perhitungannya adalah "benar" atau "salah"; jika hasilnya "benar" dan lulus pengujian, konten akan ditampilkan di output (atribut ini dapat dihilangkan).
tes ── kondisi pengujian data sumber.
<button id="cmdfirstPage" class="keybutton" onclick="pages('first');" >Beranda</button>
Fungsinya untuk mengembalikan data ke halaman sebelumnya. Tombol lainnya berfungsi serupa.
Satu poin tambahan: Cara menggunakan file contoh XML
1) Simpan kedua file di setiap contoh secara terpisah sesuai dengan nama filenya.
2) Gunakan browser untuk menelusuri file XML. Inilah efek yang akan Anda lihat, pasti bagus!
nota bene:
Haha, Anda bisa menambahkan fungsi paging setelah penyortiran dinamis. Kemudian buat jumlah daftar dapat dikonfigurasi. Gunakan imajinasi Anda untuk membuat fungsi-fungsi ini lebih sempurna. Anda dapat meneliti cara yang lebih baik untuk mengimplementasikan fungsionalitas paging. Sangat menyenangkan untuk berdiskusi satu sama lain!