โครงการ ASP.NETMVC ล่าสุดต้องการการจำแนกประเภทของรายการข้อมูล นี่คือแบ็กเอนด์ที่พัฒนาขึ้นบนพื้นฐานของ bootstrap ดังนั้นฉันสงสัยว่า bootstrap มีปลั๊กอินเพจหรือฟังก์ชั่นเพจที่รองรับโดย jQuery เพื่อให้สไตล์แบ็กเอนด์เว็บไซต์โดยรวมสามารถรวมเป็นหนึ่งได้โดยไม่ต้องเขียนชุดฟังก์ชั่นเพจด้วยตัวคุณเอง
สิ่งแรกคือการดาวน์โหลด bootstrap paginator ดาวน์โหลดที่อยู่: ปลั๊กอิน bootstrap paginator paginator
ก่อนอื่นควรมีการแนะนำไฟล์ JS และ CSS เหนือมุมมอง มีสามไฟล์หลักคือ CSS, JQuery และไฟล์ JS ของ Paginator ฉันค้นหาออนไลน์และดูเหมือนว่า jQuery จะต้องเป็นเวอร์ชัน 1.8 หรือสูงกว่าฉันไม่เคยทดสอบด้วยตนเอง ดังนั้นการอ้างอิงไฟล์ของมุมมองคือ:
<link href = "css/bootstrap.css" rel = "stylesheet"> <script type = "text/javascript" src = "js/jquery-1.8.1.js"> </script> <script type = "text/javascript
จากนั้นฟังก์ชั่นการปนเปื้อนนั้นแน่นอนว่าการรีเฟรชในท้องถิ่นตาม AJAX เพื่อดึงดูดเราและแน่นอนว่าสิ่งนี้ต้องการการสนับสนุน JQuery ฉันเคยทำ paging easyui และคราวนี้มันควรจะแตกต่างกันเล็กน้อย
<script> $ (function () {var carid = 1; $ .ajax ({url: "/oa/การตั้งค่า/getDate", ข้อมูล: 'JSON', ประเภท: "โพสต์", ข้อมูล: "id =" + carid, ความสำเร็จ: ฟังก์ชั่น (ข้อมูล) {if (data! = null) $ ("#list"). ภาคผนวก ('table id = "data_table">'); $ ("#list"). ภาคผนวก ('<th> หมายเหตุ </th>'); $ ("#list"). ภาคผนวก ('<tbody>'); $ ("#list"). ภาคผนวก ('<td> หมายเหตุ </td>'); ); "> ลบ </button> '); $ ("#list "). ผนวก (' </td> '); $ ("#list "). ผนวก (' </tr> '); $ ("#list "). ภาคผนวก (' </tbody> '); $ ("list"). ภาคผนวก ('<td>' + item.message + '</td>'); Type) var currentPage = eval (" + data +") "). CurrentPage; "หน้าก่อนหน้า"; "page =" + หน้า, ความสำเร็จ: ฟังก์ชั่น (data1) {ถ้า (data1! = null) {$ .each (eval ("(" + data + ")"). list, ฟังก์ชั่น (ดัชนี, รายการ) {// transtraight json $ ("#list") $ ("#list"). ภาคผนวก ('<th> id </th>'); $ ("#list"). ภาคผนวก ('<th> หมายเหตุ </th>'); $ ("#list"). ภาคผนวก ('<td>' + item.name + '</td>'); $ ("#list"). ผนวก ('<ปุ่ม onclick = "แก้ไข (' + item.id + ');"> แก้ไข </button>'); $ ("#list"). ภาคผนวก ('</tr>'); $ ("#list"). ภาคผนวก ('</tr>');ในส่วนหลักของมุมมองมีสอง divs หนึ่งตัวสำหรับการนำเสนอรายการข้อมูลและอีกรายการหนึ่งสำหรับการวางการนำทางของหน้าการเลือก
<div> <label> รายชื่อแผนก </label> <hr/> <div id = "list"> </div> <div id = "ตัวอย่าง"> </div> </div>
วิธี getDate ในพื้นหลังเป็นเช่นนี้:
Public ActionResult getDate (int id, int? page) {int pageindex = หน้า ?? 1; // หน้าปัจจุบัน const int pagesize = 2; // สิ่งนี้ใช้เพื่อตั้งค่าจำนวนข้อมูลที่จะแสดงในแต่ละหน้า ขอแนะนำให้เขียนสิ่งนี้ลงใน web.config สำหรับการควบคุมทั่วโลก // รับข้อมูลแผนกที่จะแสดง ienumerable <model.qgoa_department> list = operatecontext.current.bllsession.iqgoa_departmentbll.getPagedList // รับจำนวนข้อมูล int rowCount = list.count (); // ผ่านการคำนวณจำเป็นต้องแบ่งหน้าออกเป็นหลายหน้า ข้อมูลที่น้อยกว่าหนึ่งหน้าจะถูกคำนวณตามหน้าหนึ่งถ้า (rowcount%pagesize! = 0) {rowcount = rowcount / pagesize + 1; } else {rowCount = rowCount / pagesize; } // แปลงเป็นรูปแบบ json var strresult = "{/" pagecount/":"+rowcount+",/" currentpage/":"+pageindex+",/" list/":"+jsonconvert.serializeObject (รายการ)+"}"; กลับ JSON (Strresult, JsonRequestBehavior.allowget); -วิธีนี้ยังคงมีข้อบกพร่องเล็กน้อยและสามารถเขียนได้อย่างสมบูรณ์แบบเช่นเดียวกับหน้าด้านบนสามารถแก้ไขได้ทั่วโลกโดยการอ่านไฟล์กำหนดค่า web.config ซึ่งสะดวกในการจัดการ นอกจากนี้สำหรับข้อมูลเช่นแอตทริบิวต์หน้า: หมายเลขหน้าหน้าปัจจุบันปริมาณข้อมูล ฯลฯ คุณสามารถสร้างคลาสเพื่อจัดเก็บข้อมูล หากโครงการของเว็บไซต์มีขนาดใหญ่ขึ้นมันจะสะดวกกว่าสำหรับเราที่จะเปลี่ยนรหัสของเราเอง
เอฟเฟกต์การแสดงผลสุดท้ายมีดังนี้:
หากคุณยังต้องการศึกษาในเชิงลึกคุณสามารถคลิกที่นี่เพื่อศึกษาและแนบ 3 หัวข้อที่น่าตื่นเต้นให้คุณ:
การสอนการเรียนรู้ bootstrap
การสอนการใช้งาน Bootstrap
การสอนการใช้งานปลั๊กอิน bootstrap
ด้านบนคือการใช้ปลั๊กอิน Paginator Paginator ที่ฉันแชร์กับคุณ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับคุณในการใช้งานปลั๊กอิน Bootstrap Paginator Paginator Paging