ให้ฉันแสดงการเรนเดอร์ก่อน หากคุณรู้สึกว่าเอฟเฟกต์ดีโปรดดูรหัสการใช้งาน:
เพราะนี่เป็นครั้งแรกที่ฉันเขียนเพจใน JS การเขียนไม่ควรสมบูรณ์แบบ ประชาชนบางคนไม่ได้สกัด แต่ก็ยังใช้งานได้ รหัสนี้สามารถถือว่าเป็นเพจสาธารณะ ฉันใช้รหัสนี้เพื่อเขียนเพจที่แตกต่างกันเล็กน้อย! สกัดรหัสทั่วไปมีความคล้ายคลึงกันส่วนใหญ่เป็นเพราะพื้นหลัง AJAX และค่าที่ส่งคืนนั้นแตกต่างกัน ตราบใดที่ได้รับหมายเลขหน้าทั้งหมดและคลิกที่หน้าแรก/หน้าถัดไปเพื่อส่งผ่านค่าอย่างถูกต้องโดยทั่วไปจะไม่มีปัญหากับการปนเปื้อน
มีปลั๊กอินเพจมากมายและรหัสโอเพนซอร์สบนอินเทอร์เน็ต หนังสือเล่มเดียวเป็นลิงพัฒนาแบ็กเอนด์และส่วนหน้า CSS และสไตล์อื่น ๆ ยังคงไม่สามารถควบคุมได้ดังนั้นฉันจึงเริ่มเขียนด้วยตัวเอง ในความเป็นจริงหลักการของการเพจนั้นง่ายมาก มันคือการใช้ AJAX เพื่อส่งค่า (หมายเลขหน้าปัจจุบัน) ไปยังพื้นหลังและใช้ขีด จำกัด เพื่อทำให้พวกเขาอยู่ในพื้นหลัง
โดยไม่ต้องกังวลใจเพิ่มเติมเพียงอัปโหลดรหัส!
หมายเหตุ: โครงการนี้เขียนขึ้นโดยใช้ JS ตลอดกระบวนการ ข้อมูลแผนกต้อนรับจะได้รับผ่าน AJAX จากนั้นประกอบและโหลดไปยังหน้าแบบไดนามิก
1. ก่อนอื่นแนบรหัสของหน้าก่อนหน้าหน้าถัดไป ฯลฯ (ค่าภายในเป็นค่าเทศกาลทั้งหมดและต่อไปนี้จะถูกกำหนดใหม่ใน JS!)
<ul id = "page"> <li id = "shouye"> <a href = 'javascript: indexpage (1);'> บ้าน </a> </li> <li id = "shangyiye"> <a href = 'javaScript: indexpage (-1);'> <i> href = "JavaScript: void (0);" > 1 </a> </li> <li> <a id = "สอง" href = "JavaScript: void (0);" > 2 </a> </li> <li> <a id = "สาม" href = "JavaScript: void (0);" > 2 </a> </li> <li> <a id = "สาม" href = "JavaScript: void (0);" > 3 </a> </li> <li> <a id = "Five" 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);"> หน้าถัดไป <i> </i> </a> </li> href = 'JavaScript: void (0);' onclick = "IndexPage (0);"> หน้าสุดท้าย </a> </li> <li> <span id = "span_number"> รวม 13,855 หน้าไปยัง <อินพุตประเภท = "ข้อความ" id = "input_number"/> หน้า onclick = "jumptopage (jQuery ('#input_number'). val (), '/goods/ajaxquerygoodslist.do.html', '', 'goodslistcontainer', '13855', listpagecallback);2. ก่อนอื่นใส่สองฟิลด์ที่ซ่อนอยู่บนหน้าหนึ่งคือหมายเลขหน้าปัจจุบันและอีกฟิลด์อื่น ๆ คือหมายเลขหน้าทั้งหมด หมายเลขหน้าทั้งหมดคือหน้าโหลดและค่าที่แนบมาโดยตรงหลังจากสอบถามจากพื้นหลัง หากไม่มีการดำเนินการของหมายเลขหน้าปัจจุบันคุณต้องกำหนดค่าให้กับหมายเลขหน้าปัจจุบัน
<อินพุต id = "jiazai" type = "hidden"> </input> <!-หมายเลขหน้าปัจจุบัน-> <input id = "TotalPage" type = "hidden"> </put> <!-หมายเลขหน้าทั้งหมด->
3. เขียนฟังก์ชั่นที่โหลดบนหน้าและกำหนดค่าให้กับหมายเลขหน้าทั้งหมดและหมายเลขหน้าปัจจุบัน
$ (function () {$ ('#jiazai'). val (1); // กำหนดหมายเลขหน้าปัจจุบันค่าเริ่มต้นคือ ajaxfunction (หน้า, arg, chipssort, ''); // วิธีนี้เป็นวิธีการเข้าถึงพื้นหลัง Ajax ที่แยกออกมา});4. วิธี AJAX ที่สกัด หน้านี้จะใช้วิธีนี้หลายครั้งและทั้งหมดจะถูกรวบรวมเนื่องจากข้อมูลของหน้านั้นได้มาจากพื้นหลังผ่าน AJAX และพื้นหลังจะส่งคืนการรวบรวมรายการ
// วิธีการแยกฟังก์ชั่น ajax function ajaxfunction (หน้า, arg, chipssort, fontval) {$. ajax ({type: 'post', url: '/admin/receptionchips/showlist', // ที่อยู่ URL ที่ร้องขอ ข้อมูล: {หน้า: หน้า, เรียงลำดับ: arg, chipssort: chipsort, fontval: fontval}, ประเภทข้อมูล: 'json', contentType: 'แอปพลิเคชัน/x-www-form-urlencoded; CommonFunction (data);}});}3. มีรหัสไม่มากนัก
// วิธีการแยกฟังก์ชั่นการสะกดคำสตริง Commonfunction (ข้อมูล) {$ ('#projectList') ค้นหา ("li") ลบ (); สำหรับ (var i = 0; i <data.length; i ++) {/***** เป็นแกนหลักของการแบ่งแยกหาก (data.length> 0) {// ตั้งค่าหน้าหน้า var var = data [0] .padingNum; // หมายเลขหน้าทั้งหมด $ ('#totalPage'). val (pading); var page = $ ('#jiazai') id = 'currentpageno'> "+หน้า+" </b>/"+pading+" "); $ ('#span_number'). html (" ทั้งหมด "+pading+" หน้าเพื่อ <อินพุต type = 'text' id = 'input_number' class = 'page-txtbox'/> onclick = 'indexpage (-2)'/goods/ajaxQueryGoodslist.do.html ',' ',' goodslistcontainer ',' "+pading+" ', listpagecallback);' class = 'page-btn'/> ")} else {$ ('#countpage'). html (" <b id = 'currentpageno'> "+0+" </b>/"+0+" "); href = "javascript: void (0);" var nowpage = $ ('#jiazai'). val (); // หน้าปัจจุบัน // หนึ่งสองสามห้าห้าข้างหน้า <br> // รหัสต่อไปนี้ดูลำบากมากขึ้น แต่ก็ไม่ยากที่จะเข้าใจว่ามันเป็นรหัสเดียวกันทั้งหมด ) {$ ('#one'). ข้อความ (1); $ ('#one'). attr ('href', 'javascript: pagenum (' '+1+'); '); $ ('#สอง ') ข้อความ (2); $ ('#สอง ') (3); $ ('#สาม'). attr ('href', 'JavaScript: pagenum ("'+(3)+'");'); $ ('#ห้า') ข้อความ (4); $ ('#ห้า') ttr ('href', 'javascript: pagenum ("'+(4)+'");'); $ ('#fore') ข้อความ (5); $ ('#fore') ข้อความ (5); $ ('#fore') e '). attr (' href ',' JavaScript: pagenum ("'+(5)+'"); '); $ ('#ห้า '). parent (). แสดง (); $ ('#fore '). parent (). แสดง (); owpage) -2); $ ('#one'). attr ('href', 'javaScript: indexpage ("'+(number (nowpage) -2)+'");'); $ ('#สอง') ข้อความ (NOWPAGE) -1); $ ('#สอง') +(หมายเลข (NowPage) -1)+'");'); $ ('#สาม') ข้อความ (NowPage); $ ('#สาม'). attr ('href', 'javaScript: indexpage ("'+(nowpage)+');') จำนวนหน้าทั้งหมดถ้า (หมายเลข (NowPage) +1> pading) {$ ('#ห้า'). parent (). ซ่อน (); $ ('#fore'). parent (). ซ่อน ();} else {$ (#ห้า '). parent (). show (); $ (#ห้า') owpage) +1); $ ('#ห้า'). attr ('href', 'javaScript: indexpage ("'+(จำนวน (ตอนนี้) +1)+'");');} // ตัดสินว่าหน้าสองของหน้าถัดไปเกินกว่าจำนวนหน้าทั้งหมดหรือไม่ lse {$ ('#fore'). parent (). show (); $ ('#fore'). ข้อความ (หมายเลข (ตอนนี้) +2); $ ('#fore'). attr ('href', 'javascript: indexpage ("'+(จำนวน nowpage) +2)+'); และซ่อนถ้า (pading == 0) {$ ('#one'). parent (). hide (); $ ('#สอง'). parent (). hide (); $ ('#สาม'). parent (). hide (); $ ('#ห้า'). parent (). ซ่อน () if (pading == 1) {$ ('#shouye'). ซ่อน (); $ ('#weiye'). ซ่อน (); $ ('#one'). parent (). ซ่อน (); $ ('#สอง'). พาเรนต์ ( ) .hide (); $ ('#สาม'). parent (). hide (); $ ('#ห้า'). parent (). hide (); $ ('#fore'). parent (). hide ();} อื่น if (pading == 2) {$ ('#one'). parent (). show (); $ ('#two'). parent (). show (); $ ('#สาม'). parent (). hide (); $ ('#ห้า'). parent (). ซ่อน () if (pading == 3) {$ ('#one'). parent (). show (); $ ('#two'). parent (). show (); $ ('#สาม'). parent (). show (); $ ('#ห้า'). parent (). ซ่อน () if (pading == 4) {$ ('#one'). parent (). show (); $ ('#two'). parent (). show (); $ ('#สาม'). parent (). show (); $ ('#ห้า'). parent (). show (); $ ('#fore'). ) .parent (). show (); $ ('#two'). parent (). show (); $ ('#สาม'). parent (). show (); $ ('#ห้า'). parent (). show (); $ ('#fore'). parent (). show ();} // A '). แต่ละ (ฟังก์ชั่น () {$ (this) .parent (). RemoveClass ("ปัจจุบัน"); ถ้า ($ (นี้) .Text () == NowPage) {$ (นี่) .parent (). addClass ("ปัจจุบัน");}}); 500); // ในที่สุด, เพิ่ม 1 $ ('#jiazai'). val (หมายเลข (bianlaing)+number (1)); -โอเคหน้าเสร็จแล้วที่นี่ หากคุณต้องการใช้มันอาจใช้เวลาสักครู่เพื่อทำความเข้าใจรหัสของฉัน ในความเป็นจริงรหัสไม่ยาก ฉันใช้มันเป็นเวลาสองชั่วโมงในการเขียน เพียงแค่อ่านมันทีละบรรทัดและเพิ่มความคิดเห็นด้วยตัวคุณเอง รับผลงานชิ้นนี้และมันจะเสร็จภายในครึ่งชั่วโมง!