ก่อนอื่นให้ดูที่การเรนเดอร์การใช้งาน หากคุณคิดว่ามันไม่เลวโปรดดูรหัสการใช้งาน
ข้อมูลข้างต้นอยู่ด้านล่าง
วิธีใช้
1 นำเข้า CSS ของ Bootstrap
<link rel = "stylesheet" href = "css/v3/bootstrap.min.css">
2 นำเข้า jQuery
<script src = "js/jQuery-1.10.1.min.js" type = "text/javascript"> </script>
3 นำเข้าตารางเพจปลั๊กอิน ltable.js
<script src = "js/ltable.js" type = "text/javascript"> </script>
4 เพิ่มแท็ก HTML และกำหนดค่าเป็น ID
<!-ตาราง-> <div id = "d"> </div> <!-pagination-> <div id = "u"> </div>
5 รับข้อมูล
ที่นี่รับข้อมูลจำลองของไฟล์ JSON ผ่าน AJAX
Intatable (data) เป็นวิธีการเริ่มต้นตารางและการเพจ
$ .ajax ({url: "json/data.json", ประเภท: "Get", ประเภทข้อมูล: "JSON", ความสำเร็จ: ฟังก์ชั่น (data) {inittable (data);}, ข้อผิดพลาด: ฟังก์ชั่น (e) {แจ้งเตือน ("ข้อผิดพลาดในการรับข้อมูล");}});6 เริ่มต้นตาราง
เริ่มต้นตารางก่อนในวิธีการเริ่มต้น
var obj = data; var mytable = $. ltable ('#d', {data: obj.list // json data, ชื่อเรื่อง: ["userid", "ชื่อผู้ใช้", "รหัสผ่าน", "userrolename", "สถานะ", "ปุ่ม uplick = 'updft (รหัส) ชื่อ: ["userId", "ชื่อผู้ใช้", "รหัสผ่าน", "ชื่อสิทธิ์", "สถานะ", "_ opt"], tid: "userId", ช่องทำเครื่องหมาย: "userId"});คำอธิบายรหัส
6.1 วิธีการเริ่มต้น
$ .ltable ('id', {ข้อมูล, ชื่อ, ชื่อ, tid, chechbox});
6.2 คำอธิบายแอตทริบิวต์
ID: บล็อกเติมที่เลือกโดยหน้า
ข้อมูล: ข้อมูล JSON ปรากฏบนหน้า
ชื่อเรื่อง: ฟิลด์ที่สอดคล้องกับข้อมูลสำหรับแต่ละคอลัมน์ของตาราง
ชื่อ: แถวแรกของตารางแสดงฟิลด์
TID: ค่าคีย์ที่สอดคล้องกันของแต่ละบรรทัด (สามารถละเว้นได้)
ช่องทำเครื่องหมาย: ค่าที่สอดคล้องกับช่องทำเครื่องหมาย (สามารถละเว้นได้)
6.3 คำอธิบายช่องทำเครื่องหมาย
เปิดใช้งานเมื่อเพิ่มแอตทริบิวต์ chechbox init
ชื่อกล่องกาเครื่องหมาย = "ids"
รับเมธอดคอลัมน์ที่เลือก: $ .ltable.getCheckBoxIDS () ตัวอย่างค่าคืน "1,2,3,4"
6.4 คำแนะนำในการดำเนินการ
เมื่อชื่อแอตทริบิวต์ = _OPT ส่วนหัวของตารางจะเปลี่ยนตำแหน่ง "การดำเนินการ" โดยอัตโนมัติ
ชื่อแอตทริบิวต์ที่สอดคล้องกันสามารถเพิ่มปุ่มและการดำเนินการอื่น ๆ
ตัวอย่าง: "<button onclick = 'updf (id)'> แก้ไข </button>"
วิธีการคลิกคือ updf () ID พารามิเตอร์คือฟิลด์ที่สอดคล้องกันของแอตทริบิวต์ TID
7 เริ่มต้นการปนเปื้อน
จากนั้นส่วนการปนเปื้อน
$ .lpaging ('#U', // ID ที่สอดคล้องกัน {PAGENUMBER: OBJ.PAGENUMBER // หมายเลขหน้าปัจจุบัน, TotalPage: OBJ.TOTALPAGE // หมายเลขหน้าทั้งหมด, นับจำนวน: 5 // จำนวนหน้าแสดง dataurl);}});คำอธิบายรหัส
7.1 วิธีการเริ่มต้น
$ .lpaging ('id', {pagenumber, TotalPage, countsize, count, OnPageChange (NUM), InputSearch});
7.2 คำอธิบายวิธีการใช้งาน
ID: บล็อกเติมที่เลือกโดยหน้า
Pagenumber: หมายเลขหน้าปัจจุบัน
TotalPage: จำนวนหน้าทั้งหมด
Countsize: จำนวนหน้าแสดง (สามารถละเว้นได้ 5 ค่าเริ่มต้น)
นับ: จำนวนข้อมูลทั้งหมด
OnPageChange (NUM): ส่งคืนเหตุการณ์คลิก
InputSearch: ไม่ว่าจะแสดงกล่องอินพุตแบบสอบถาม Boolean Default False
getInputVal (): ส่งคืนหมายเลขในกล่องอินพุต
8 รหัสทั้งหมด
<! doctype html> <html> <head> <meta charset = "utf-"> <meta http-equiv = "x-ua ที่เข้ากันได้" เนื้อหา = "IE = edge"> <title> </title> id = "d"> </div> <!-pagination-> <div id = "u"> </div> </body> <script src = "js/jQuery -... min.js" type = "text/javaScript"> </script> <script src = "js/ltable.js dataurl = ""; // เริ่มต้นหน้าเริ่มต้น (, pagesize, ""); // ajax ได้รับฟังก์ชันข้อมูล initPage (num, ps, url) {$. ajax ({url: "json/data.json", พิมพ์: "get", // type: "post", // data: "userinfovo.pageid ="+num+"& userinfovo.pagecount ความสำเร็จ: ฟังก์ชั่น (data) {inittable (data);}, ข้อผิดพลาด: ฟังก์ชั่น (e) {console.log (e) การแจ้งเตือน ("ข้อผิดพลาดการได้มาของข้อมูล");}});} // เริ่มต้นตารางและฟังก์ชั่นข้อมูลที่ไม่เหมาะสม obj = data; // tablemyTable = $. ltable ('#d', {data: obj.list // json data, ชื่อเรื่อง: ["userid", "ชื่อผู้ใช้", "รหัสผ่าน", "userrolename", "สถานะ", "ปุ่ม uplick = 'uptflete ชื่อ: ["userId", "ชื่อผู้ใช้", "รหัสผ่าน", "ชื่อสิทธิ์", "สถานะ", "_ opt"], TID: "userId", ช่องทำเครื่องหมาย: "userId"}); // myTable.getCheckBoxids (); // รับค่าที่เลือกโดยช่องทำเครื่องหมาย // page $ .lpaging ('#u', // ส่วนประกอบ id {pagenumber: obj.pagenumber // หมายเลขหน้าปัจจุบัน, TotalPage: obj.totalpage // หมายเลขหน้าทั้งหมด {initPage (num, pagesize, dataurl);}});} // แก้ไขวิธีการฟังก์ชัน updf (id) {แจ้งเตือน ("แก้ไข:"+id);} // ลบฟังก์ชั่นวิธีการ Delf (id) {แจ้งเตือน ("ลบ:"+id);Wulin.com แนะนำหัวข้อที่เกี่ยวข้องกับ bootstrap:
ทักษะการใช้งานส่วนประกอบ bootstrap
สรุปความรู้ที่เกี่ยวข้องกับ bootstrap
ด้านบนเป็นคำอธิบายโดยละเอียดของปลั๊กอินแบบฟอร์ม bootstrap3 และปลั๊กอินเพจปลั๊กอินที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!