คำอธิบายโดยละเอียดเกี่ยวกับตัวอย่างการใช้งานของการควบคุมหน้าเค้าโครง

เมื่อพัฒนาเรามักจะพบกับปัญหาการออกหน้าโดยเฉพาะอย่างยิ่งสำหรับโปรแกรมเมอร์แบ็คเอนด์ แต่ปัญหานี้ไม่สามารถแก้ไขได้ดังนั้นเราจึงพบการควบคุมการปนเปื้อนและบันทึกไว้เพื่อการใช้งานในอนาคต

นี่คือตัวอย่างง่ายๆที่ใช้ในเว็บไซต์ทางการ:

 // ต่อไปนี้จะแสดงให้เห็นถึงหน้าแบบอะซิงโครนัส $ .getJson ('ทดสอบ/demo1.json', {curr: 6}, ฟังก์ชั่น (res) {// คำขอจากหน้า 6. รูปแบบ JSON ที่ส่งคืนสามารถกำหนดเลย์เอาต์ได้โดยพลการ id = "page1"> </div> หน้า: res.pages, // จำนวนหน้าทั้งหมดที่ได้รับผ่านพื้นหลัง Curr: 6, // เริ่มต้นการกระโดดหน้าปัจจุบัน: ฟังก์ชั่น (e) {// การโทรกลับหลังจากทริกเกอร์หน้า $ .getJson ('test/demo1.json' โดยทั่วไปแล้วคุณไม่จำเป็นต้องเขียน // render vair = document.getElementById ('view1'); - -

เอฟเฟกต์การแบ่งหน้าพื้นฐานจะออกมา

หากคุณต้องการเอฟเฟกต์ที่งดงามอื่น ๆ โปรดแก้ไขซอร์สโค้ด

มาพูดถึงเรื่องนี้ก่อนถ้ามีผลกระทบของการปนเปื้อน

ก่อนอื่นให้อ้างถึงเค้าโครงควบคุม js

<script type = "text/javascript" src = "/lib/laypage/laypage.js"> </script>

ปลั๊กอินดาวน์โหลดที่อยู่:

ตอนนี้มาดูการกำหนดค่าปลั๊กอิน:

 ฟังก์ชั่น searchJoinMemberInfopage () {var ccid = parseInt ($ ("#hid_ccid"). val (), 10); var saveKey = $ ("#targetKey"). val (); VAR PAGESIZE = 10; // ต่อไปนี้จะใช้ jQuery.ajax เป็นตัวอย่างในการสาธิตหน้าแบบอะซิงโครนัส $ .getJson ('/มือถือ/ajaxhandler/questionajax.aspx? action = getRedisJoinMemberInformationByid', {ประเภท: 2, ccid: ccid, หน้า รูปแบบ JSON ที่ส่งคืนสามารถกำหนดเค้าโครงโดยพลการ ({cont: 'page1', // container. ค่ารองรับชื่อ ID, วัตถุ DOM ดั้งเดิมและวัตถุ jQuery [ถ้าคอนเทนเนอร์คือ]: <div id = "page1"> </div> หน้า: clultize://///// 3, // ข้ามหมายเลขของหน้าแสดงอย่างต่อเนื่องข้าม: จริง // ไม่ว่าจะเปิดหน้ากระโดดก่อน: 'หน้าแรก', // หากไม่แสดงให้ตั้งค่าเท็จสุดท้าย: 'หน้าสุดท้าย', // ถ้าไม่แสดงให้ตั้งค่าเท็จ // ก่อนหน้า: '<', // ถ้าไม่แสดง $ .getJson ('/mobile/ajaxhandler/questionajax.aspx? action = getRedisJoinMemberInformationById', {ประเภท: 2, CCID: CCID, PageIndex: E.Curr, // หน้าปัจจุบัน: PAGESIZE, SAVEKEY: SAVEKEY}, ฟังก์ชั่น (res) เพื่อเขียน // var view = document.getElementById ('usertable');

/mobile/ajaxhandler/questionajax.aspx?action=getRedisJoinMemberInformationById แสดงที่อยู่อะซิงโครนัสที่ส่งคืนข้อมูลที่จะแสดงและจำนวนหน้า พิมพ์:

2, CCID: CCID, PageIndex: 1, PageSize: Pagesize, SaveKey: SaveKey เป็นพารามิเตอร์ที่ต้องใช้ในแบบอะซิงโครนัส

Packagdata (res); ฟังก์ชั่นนี้แยกวิเคราะห์ข้อมูลที่ส่งคืนและแสดงผล

usertable คือโหนด DOM ที่ใช้ในการแสดงข้อมูลที่ส่งคืนและหน้า 1 เป็นโหนด DOM ที่ใช้ในการแสดงปุ่มสำหรับจำนวนหน้า

ตอนนี้ดูเอฟเฟกต์:

จริงๆแล้วมันง่ายมากและนี่ก็ทำให้การแสดงบรรยากาศสมบูรณ์

ขอบคุณสำหรับการอ่านของคุณและฉันหวังว่าคุณจะยังคงให้ความสนใจกับเนื้อหาที่น่าตื่นเต้นมากขึ้นจาก Wulin.com