Table Bootstrap เป็นปลั๊กอินตารางที่มีน้ำหนักเบาที่ใช้ AJAX เพื่อรับข้อมูลในรูปแบบ JSON การเติมเพจและการเติมข้อมูลนั้นสะดวกมากและรองรับความเป็นสากล เมื่อเร็ว ๆ นี้พื้นหลังที่ใช้ปลั๊กอินนี้เพื่อสร้างแอปพลิเคชันตารางเพื่อสรุป
1. วิธีใช้
คุณสามารถรับ JS Plug-ins, Style Sheets และ International Plug-ins ผ่าน CDN ที่จัดทำโดย YouPaiyun หรือดาวน์โหลดโดยตรงบนเว็บไซต์ทางการ ใส่ปลั๊กอิน JS ต่อไปนี้และสไตล์ลงในส่วนหัว HTML และใช้งาน
// style <link href = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.css" rel = "stylesheet"/> <สคริปต์ src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/bootstrap-table.min.js"> </script> // นานาชาติตารางภาษาจีน <สคริปต์ src = "http://cdn.bootcss.com/bootstrap-table/1.9.1/locale/bootstrap-table-zh-cn.min.js"> </script>
2. การกรอกข้อมูลตาราง
มีสองวิธีในการรับข้อมูลจากตาราง bootstrap หนึ่งคือการระบุแหล่งข้อมูลผ่านคุณสมบัติ data-url ของตาราง แต่เพื่อระบุ URL เมื่อเริ่มต้นตารางโดย JavaScript เพื่อรับข้อมูลดังแสดงในตัวอย่างต่อไปนี้
<table data-toggle = "table" data-url = "data.json"> <tead> ... </tead> </table> $ ('#ตาราง'). bootstraptable ({url: 'data.json'});วิธีที่สองในการส่งมอบวิธีแรกนั้นมีความยืดหยุ่นมากขึ้นเมื่อประมวลผลข้อมูลที่ซับซ้อน โดยทั่วไปวิธีที่สองใช้ในการกรอกข้อมูลตาราง
var $ table = $ ('#table'); $ table.bootstraptable ({url: "duobaoactivityList", ประเภทข้อมูล: "json", การแบ่งหน้า: จริง, // pagination singleselect: false, data-locale: "zh-us", // การค้นหาของจีน 'ชื่อกิจกรรม', ฟิลด์: 'ชื่อ', Align: 'center', valign: 'middle'}, {title: 'สถานะ', จัดตำแหน่ง: 'center', valign: 'กลาง',}, {title: 'จำนวนผู้เข้าร่วม', Field: 'การเข้าร่วม' 'starttime', Align: 'center',}, {title: 'การดำเนินการ', ฟิลด์: 'id', Align: 'center', formatter: function (value, row, {var e = '<a href = "#" mce_href = "#" onclick = "edit (/' + mce_href = "#" onclick = "del (/''+row.id+'/')"> ลบ </a> ';ฟิลด์ฟิลด์จะต้องสอดคล้องกับฟิลด์ที่ส่งคืนโดยเซิร์ฟเวอร์ก่อนที่ข้อมูลจะปรากฏขึ้น
3. การแบ่งหน้าและการค้นหา
เมื่อเพจจี่โต๊ะ bootstrap จะผ่านสองฟิลด์เพจไปยังแบ็กเอนด์: ขีด จำกัด และชดเชย อดีตแสดงถึงจำนวนของแต่ละหน้าค่าเริ่มต้นถึง 10 และหลังแสดงถึงการชดเชยของข้อมูลระหว่างการเพจ
เมื่อค้นหาช่องค้นหาจะถูกส่งผ่านไปยังแบ็กเอนด์ซึ่งระบุเนื้อหาการค้นหาที่เฉพาะเจาะจง
ข้อมูลที่ส่งคืนโดยฝั่งเซิร์ฟเวอร์ควรมีสองฟิลด์: หน้า (จำนวนหน้า) และทั้งหมด (ข้อมูลทั้งหมด) และส่วนหน้าควรแบ่งออกตามสองฟิลด์นี้
เอฟเฟกต์การแสดงผลสุดท้ายแสดงในรูปด้านล่าง:
ข้างต้นเป็นบทสรุปของการกรอกข้อมูลการใช้งานตารางและแอปพลิเคชันการปนเปื้อนใน bootstrap แนะนำให้คุณโดยโปรแกรมแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!