Izinkan saya menunjukkan rendering terlebih dahulu. Jika Anda merasa efeknya baik, silakan merujuk ke kode implementasi:
Karena ini adalah pertama kalinya saya menulis paging di JS, tulisannya tidak boleh sempurna. Beberapa yang publik tidak diekstraksi, tetapi masih boleh digunakan. Kode ini dapat diperlakukan sebagai paging publik. Saya menggunakan kode ini untuk menulis dua paging yang sedikit berbeda! Ekstrak kode umum serupa, terutama karena latar belakang AJAX dan nilai yang dikembalikan berbeda. Selama total nomor halaman diperoleh dan klik pada halaman beranda/halaman berikutnya untuk melewati nilainya dengan benar, pada dasarnya tidak akan ada masalah dengan pagination.
Memang ada banyak plug-in paging dan kode sumber terbuka di internet. Single Book adalah kera pengembangan backend, dan CSS frontend dan gaya lainnya masih belum terkendali, jadi saya mulai menulisnya sendiri. Bahkan, prinsip paging sangat sederhana. Ini untuk menggunakan AJAX untuk meneruskan nilai (nomor halaman saat ini) ke latar belakang, dan menggunakan batas untuk menyampaikannya di latar belakang.
Tanpa basa -basi lagi, cukup unggah kode!
Catatan: Proyek ini ditulis menggunakan JS di seluruh proses. Data meja depan diperoleh melalui AJAX, dan kemudian dirakit dan dimuat ke halaman secara dinamis.
1. Pertama lampirkan kode halaman sebelumnya, halaman berikutnya, dll. (Nilai -nilai di dalamnya adalah semua nilai semu, dan berikut ini akan dipindahkan dalam JS!)
<ul id = "page"> <li id = "shouye"> <a href = 'javascript: indexpage (1);'> home </a> </li> <li id = "shangyiye"> <a href = 'javascript: indexpage (-1);'> <i> </iD </i> </a> </a> </Li> "> </Li> </Li> </Li>"> </Li> </Li> "> </Li>"> </Li> </Li> </Li> "> </Li>" Li> </Li> "> </Li>" Li> "Li>"> </ID </ID </ID sebelumnya> " href = "javascript: void (0);" > 1 </a> </li> <li> <a id = "dua" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "tiga" href = "javascript: void (0);" > 2 </a> </li> <li> <a id = "tiga" href = "javascript: void (0);" > 3 </a> </li> <li> <a id = "lima" href = "javascript: void (0);" > ... </a> </li> <li> <a id = "fore" href = "javascript: void (0);" > 13855 </a> </li> <li class = 'p--next'> <a href = 'javascript: indexPage (-3);' OnClick = "Jumptopage ('2', '/Goods/AjaxQueryGoodSlist.do.html', '', 'GoodsListContainer', '13855', ListPageCallback);"> Wei <i> </i> </a> </li> <li> <li> <li> <li> <Li> </a> </a> </a> </li> <li> <li> <li> href = 'javascript: void (0);' OnClick = "IndexPage (0);"> Halaman Terakhir </a> </li> <li> <span id = "span_number"> Total 13.855 halaman ke <input type = "text" id = "input_number"/> halaman <input name = "" value = "identifikasi" type = "tombol" " OnClick = "Jumpopopage (jQuery ('#input_number'). Val (), '/Goods/AjaxQueryGoodSlist.do.html', '', 'GoodsListContainer', '13855', ListPageCallback);"//</span> </li> </Ul>2. Pertama taruh dua bidang tersembunyi di halaman, satu adalah nomor halaman saat ini dan yang lainnya adalah nomor halaman total. Nomor halaman total adalah halaman yang dimuat dan nilainya terlampir langsung setelah diminta dari latar belakang. Jika tidak ada pengoperasian nomor halaman saat ini, Anda harus menetapkan nilai ke nomor halaman saat ini.
<input id = "jiazai" type = "hidden"> </input> <!-Nomor halaman saat ini-> <input id = "totalpage" type = "hidden"> </input> <!-nomor halaman total->
3. Tulis fungsi yang telah dimuat pada halaman dan tetapkan nilai ke nomor halaman total dan nomor halaman saat ini.
$ (function () {$ ('#jiazai'). Val (1); // Tetapkan nomor halaman saat ini, defaultnya adalah Ajaxfunction (halaman, arg, chipsort, ''); // Metode ini adalah metode akses latar belakang Ajax yang diekstraksi});4. Metode AJAX yang diekstraksi. Halaman ini akan menggunakan metode ini beberapa kali, dan semuanya dikumpulkan karena data halaman diperoleh dari latar belakang melalui Ajax, dan latar belakang mengembalikan koleksi daftar.
// Metode mengekstraksi fungsi AJAX AJAXFunction (halaman, arg, chipsort, fontval) {$. AJAX ({type: 'Post', URL: '/admin/receptionchips/showlist', // alamat URL yang diminta Data: {Halaman: Halaman, Sortir: Arg, Chipssort: Chipsort, FontVal: FontVal}, DataType: 'JSON', ContentType: 'Application/X-WWW-Form-Urlencoded;3. Tidak banyak kode untuk dilihat, yang terakhir
//The method of extracting string spelling function commonfunction(data){$('#projectlist').find("li").remove();for (var i=0;i<data.length;i++ ){ /*****Because this page is loaded dynamically, it mainly performs string spelling, and there is a lot of code, so it does not leak out and take up space*****/<br> }<br> //The beginning is Inti dari pagination if (data.length> 0) {// Setel nomor halaman var pading = data [0] .padingnum; // nomor total halaman $ ('#totalpage'). val (pading); var page = $ ('#jiazai'). val (); // halaman saat ini $ ('#Countpage'). id = 'currentpageno'> "+page+" </b>/"+pading+" "); $ ('#span_number'). html (" Total "+Pading+" halaman ke <input type = 'Text' id = 'input_number' class = 'halaman-txtbox'/> halaman <input name = 'value =' OnClick = 'IndexPage (-2)'/Goods/AjaxQueryGoodSlist.do.html ',' ',' GoodsListContainer ',' "+Pading+", ListPageCallback); ' class = 'page-btn'/> ")} else {$ ('#countpage'). html (" <b id = 'currentpageno'> "+0+" </b>/"+0+" ");} // bagian bawah halaman pengaturan adalah rumah Page1 2 3 4 5 6 PAGE Last Page Var Pading = Data [0] .PAD. href = "JavaScript: void (0);" var nowpage = $ ('#jiazai'). val (); // halaman saat ini // satu dua tiga lima kedepan <br> // kode berikut terlihat lebih bermasalah, tetapi tidak sulit untuk memahami bahwa itu semua kode yang sama, tetapi hanya menambahkan beberapa penilaian jika (sekarang halaman <5 ) {$ ('#satu'). Teks (1); $ ('#satu'). Attr ('href', 'JavaScript: pagenum ("'+1+'");'); $ ('#dua'). Teks (2); $ ('#dua'). ('Href', 'Javascript: pagenum (pagenum (pagenum (pagenum (pagenum (pagenum (') (3); $ ('#tiga'). Attr ('href', 'javascript: pagenum ("'+(3)+'");'); $ ('#lima'). Teks (4); $ ('#lima'). A ttr ('href', 'javascript: pagenum ("'+(4)+'");'); $ ('#fore'). Teks (5); $ ('#fore'). Teks (5); $ ('#fore'). e '). attr (' href ',' javascript: pagenum ("'+(5)+'"); '); $ ('#lima '). Parent (). Show (); $ ('#fore '). Parent () (). ();} else {// peringatan ("Ini bukan halaman kelima lagi"). owpage) -2); $ ('#satu'). attr ('href', 'javascript: indexpage ("'+(angka (nowpage) -2)+'");'); $ ('#dua'). Teks (nomor (nowpage) -1); $ ('#dua'). ATTR ('href', 'javas) -1); +(Angka (nowpage) -1)+'");'); $ ('#tiga'). Teks (nowpage); $ ('#tiga'). Attr ('href', 'javascript: indexpage ("'+(nowpage)+'"); $ ('#lima '). Parent (). Tampilkan (); $ () ($ () () (page) (PEDU). melebihi jumlah total halaman jika (angka (nowpage) +1> pading) {$ ('#lima'). Parent (). Hide (); $ ('#fore'). Parent (). Sembunyikan ();} else {$ ('#lima'). Parent (). Show (); $ ('#lima'). Teks (number (n#lima '). owpage) +1); $ ('#lima'). attr ('href', 'javascript: indexpage ("'+(angka (nowpage) +1)+'");');} // menilai apakah halaman kedua dari halaman berikutnya melebihi jumlah halaman (nowpage). lse {$ ('#fore'). Parent (). show (); $ ('#fore'). Teks (angka (nowpage) +2); $ ('#fore'). attr ('href', 'javascript: indexpage ("' 2 now -tanya 5, now -tanya 5, nopes nope 5, nope nope 5, nopes nope 5); dan Sembunyikan jika (pading == 0) {$ ('#satu'). Parent (). Hide (); $ ('#dua'). Parent (). Sembunyikan (); $ ('#tiga'). Parent (). Sembunyikan (); $ ('#lima'). Parent (). Sembunyikan (); $ ('#fore'). Parent (). Hide ();} lainnya if (pading == 1) {$ ('#shouye'). hide (); $ ('#weiye'). hide (); $ ('#one'). Parent (). sembunyikan (); $ ('#dua'). Parent ( ) .hide (); $ ('#tiga'). Parent (). Hide (); $ ('#lima'). Parent (). Hide (); $ ('#fore'). Parent (). Sembunyikan ();} lain if (pading == 2) {$ ('#one'). Parent (). show (); $ ('#dua'). Parent (). Show (); $ ('#tiga'). Parent (). Sembunyikan (); $ ('#lima'). Parent (). Hide (); $ ('#fore'). Parent (). Hide ();} lainnya if (pading == 3) {$ ('#satu'). Parent (). show (); $ ('#dua'). Parent (). Show (); $ ('#tiga'). Parent (). Show (); $ ('#lima'). Parent (). Hide (); $ ('#fore'). Parent (). Hide ();} lainnya if (pading == 4) {$ ('#satu'). Parent (). show (); $ ('#dua'). Parent (). Show (); $ ('#tiga'). Parent (). Show (); $ ('#lima'). Parent (). Show (); $ ('#fore'). Parent (). Hide ();} lainnya {). ) .parent (). show (); $ ('#dua'). Parent (). show (); $ ('#tiga'). Parent (). Show (); $ ('#lima'). Parent (). Show (); $ ('#fore'). Parent (). Show ();} // disorot, 1 ada di halaman pertama, dan 2 halaman. a '). masing -masing (fungsi () {$ (this) .parent (). RemoveClass ("saat ini"); if ($ (this) .text () == nowpage) {$ (this) .parent (). addClass ("current");}}); // kembali ke atas halaman setelah pagaring $ ("htm); 500); // Akhirnya, tambahkan 1 $ ('#jiazai'). Val (angka (bianlaing)+angka (1)); }Oke, halaman sudah selesai di sini. Jika Anda perlu menggunakannya, mungkin perlu waktu untuk memahami kode saya. Faktanya, kode tidak sulit. Saya menggunakannya selama dua jam untuk menulisnya. Baca saja satu baris demi satu, dan tambahkan komentar sendiri. Lakukan bagian ini, dan itu pasti akan dilakukan dalam waktu setengah jam!