Bootstrap paginator paging ปลั๊กอินดาวน์โหลดที่อยู่:
โครงการดาวน์โหลด Visit ใน GitHub
1. นี่คือฟังก์ชั่น JS ที่จำเป็นต้องวางไว้บนหน้าเว็บที่จำเป็นต้องมีการแบ่งแยก:
<span style = "Font-Size: 14px;"> ฟังก์ชั่น Paging (หน้า) {$ .ajax ({type: "get", url: "$ {ctx}/api/v1/user/1/"+(หน้า 1)+"/5" $ .ajax ({ประเภท: "รับ", url: "$ {ctx}/api/v1/user/count/1", ข้อมูล: "json", ความสำเร็จ: ฟังก์ชั่น (msg) {var pages = math.ceil (msg.data/5); Bootstrapmajorversion: 3, CurrentPage: หน้า, // หน้าปัจจุบันหมายเลขปัจจุบัน: 5, // ปุ่มหลายปุ่มจะแสดงบนหน้า (5 LIS ถูกสร้างขึ้นใน UL) TotalPages: หน้า // จำนวนหน้าทั้งหมด} องค์ประกอบ BOOTSTRAPPAGINATOR (ตัวเลือก); } </span>หน้าหนังสือ:
<span style = "ตัวอักษรขนาด: 14px;"> <ul id = "pageul"> </ul> </span>
*มันถูกสร้างขึ้นโดยอัตโนมัติใน LI
2. สิ่งที่สำคัญที่สุดและสำคัญที่สุดคือการเปลี่ยนไฟล์แหล่งที่มา bootstrap-paginator.js ด้วยตัวคุณเอง ดังนี้:
<span style = "ตัวอักษรขนาด: 14px;"> onpageclicked: ฟังก์ชั่น (เหตุการณ์, ต้นฉบับ, ประเภท, หน้า) {// แสดงหน้าที่เกี่ยวข้องและดึงรายการที่สร้างขึ้นใหม่ที่เกี่ยวข้องกับหน้าคลิกก่อนสำหรับเหตุการณ์ส่งคืน var currenttarget = $ event.currentTarget); สวิตช์ (พิมพ์) {กรณี "แรก": currenttarget.bootstrappaginator ("showfirst"); เพจ (หน้า); หยุดพัก; // หน้าก่อนหน้ากรณี "prev": currenttarget.bootstrappaginator ("showprevious"); เพจ (หน้า); หยุดพัก; กรณี "ถัดไป": currenttarget.bootstrappaginator ("แสดง"); เพจ (หน้า); หยุดพัก; กรณี "สุดท้าย": currenttarget.bootstrappaginator ("Showlast"); เพจ (หน้า); หยุดพัก; กรณี "หน้า": currenttarget.bootstrappaginator ("แสดง", หน้า); เพจ (หน้า); หยุดพัก; }}, </span>*โทรไปที่เมธอดหน้า (หน้า) หลังจากสไตล์หน้าที่คุณคลิก พารามิเตอร์ในไฟล์แหล่งที่มาที่นี่มีอยู่แล้วดังนั้นส่งผ่านโดยตรง!
เอฟเฟกต์: เมื่อมีการเปลี่ยนแปลงรูปแบบให้ใช้ค่าหน้าของตัวควบคุมโดยตรงเพื่อส่งคำขอ AJAX! ในที่สุดการปนเปื้อนที่ปราศจากการรีเฟรชจะถูกนำมาใช้
ข้างต้นเป็นความรู้ที่เกี่ยวข้องที่แนะนำโดยตัวแก้ไขเพื่อรวมปลั๊กอิน Paginator Paginator กับ AJAX เพื่อให้ได้เอฟเฟกต์การปัดเยอะแยะแบบไดนามิกที่ปราศจากการรีเฟรช ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!