บทความนี้แบ่งปันปัญหาของการแบ่งหน้าแบบ Bootstrap-table สำหรับการอ้างอิงของคุณ เนื้อหาเฉพาะมีดังนี้
คำถามที่ 1: เซิร์ฟเวอร์ไม่สามารถรับค่าฟอร์มได้ไม่มีปัญหากับ QueryString แต่ request.form ไม่สามารถรับค่าได้
วิธีแก้ปัญหา: นี่เป็นปัญหาของ AJAX รหัสต้นฉบับใช้ AJAX ดั้งเดิม 1 สามารถแก้ไขได้โดยการอ่านไฟล์สตรีม 2 หากคุณต้องการใช้วิธีการ request.form ให้ตั้งค่า contentType: "แอปพลิเคชัน/x-www-form-urlencoded", "
ชอบ
$ ('##tablelist'). bootstraptable ({วิธี: 'โพสต์', url: "", ความสูง: $ (หน้าต่าง) .Height ()-200, ลาย: จริง, ประเภทข้อมูล: "JSON", pagination: true, "queryParamstype": "ขีด จำกัด "คำถามที่ 2. ตั้งค่าพารามิเตอร์ที่ส่งไปยังเซิร์ฟเวอร์
วิธี:
ฟังก์ชั่น queryparams (พารามิเตอร์) {return {pagesize: params.limit, pagenumber: params.pagenumber, ชื่อผู้ใช้: 4};} $ ('#tablelist'). bootstraptable ({วิธี: 'โพสต์', url: "" ความสูง: $ (หน้าต่าง) QueryParams: QueryParamsคำถามที่ 3. ข้อมูลหน้าเว็บไม่สามารถเรียกคืนได้ในพื้นหลัง
แก้ปัญหา:
1SET ใน QueryParams
2 แก้ไขไฟล์ต้นฉบับในไฟล์ bootstrap-table.minjs เป็น
"จำกัด " === this.options.queryparamstype && (e = {ขีด จำกัด : e.pagesize, pagenumber: e.pagenumber,
การแก้ไข bootstrap-table.js ก็โอเคเช่นกัน
if (this.options.queryparamstype === 'limit') {params = {search: params.searchtext, sort: params.sortname, order: params.sortorder}; ถ้า (this.options.pagination) {params.limit = this.options.pages (this.options.pagenumber - 1);}}กำหนดค่า "queryparamstype": "ขีด จำกัด "
ทั้งหมด
<script type = "text/javascript"> $ (เอกสาร) .ready (function () {$ ('#tablelist'). bootstraptable ({วิธี: 'post', url: "getCompappylist", ความสูง: $ (หน้าต่าง) FALSE, ContentType: "Application/X-WWW-FORM-URLENCODED", PAGESIZE: 10, PAGENUMBER: 1, ค้นหา: FALSE, // อย่าแสดงกล่องค้นหา search Collumns: FALSE, // อย่าแสดงกล่องดรอปทาวน์ (เลือกคอลัมน์ที่แสดง) Responsehandler, คอลัมน์: [{ฟิลด์: 'companyid', ช่องทำเครื่องหมาย: true}, {ฟิลด์: 'qq', ชื่อ: 'qq', ความกว้าง: 100, จัดตำแหน่ง: 'center', valign: 'กลาง', sortable: false}, {field: 'companyname', ชื่อ: ResponseHandler (res) {if (res.isok) {var result = b64.decode (res.resultValue); var resultstr = $ .parsejson (res); return {"rows": resultstr.items, "Total": ResultStr.totalitems}; queryParams (params) {return {pagesize: params.limit, pagenumber: params.pagenumber, ชื่อผู้ใช้: 4};} </script>คำถามที่ 4. คำถามค้นหาอีกครั้งหลังจากการเพจ
วิชาบังคับก่อน: ฟังก์ชั่นการค้นหาและเพจที่กำหนดเองเช่นฟังก์ชั่นของการค้นหาชื่อผลิตภัณฑ์
ปรากฏการณ์: เมื่อค้นหาตุ๊กตาพองได้ส่งคืน 100 ระเบียนและหันไปที่หน้า 5 ในเวลานี้ค้นหาแท่งการนวดมี 200 ข้อมูลและผลลัพธ์ควรเป็นบันทึกในหน้าแรก แต่การแสดงผลจริงเป็นผลลัพธ์ในหน้าห้า นั่นคือหลังจากค้นหาอีกครั้ง pagenumber ไม่เปลี่ยนแปลง
วิธีแก้ปัญหา: เพียงรีเซ็ตตัวเลือก
การค้นหาฟังก์ชั่น () {$ ('#tablelist'). bootstraptable ({pagenumber: 1, pagesize: 10});}หากคุณยังต้องการเรียนรู้อย่างลึก
ข้างต้นเป็นเรื่องเกี่ยวกับบทความนี้ฉันหวังว่ามันจะเป็นประโยชน์กับการเรียนรู้ของทุกคน