สรุปสองวิธีของการแบ่งหน้าง่ายๆ

DataGrid ของ EasyUi รองรับการปนเปื้อนฝั่งเซิร์ฟเวอร์ แต่มีข้อมูลอย่างเป็นทางการน้อยกว่า ต่อไปนี้สรุปกลไกการปนเปื้อนของเซิร์ฟเวอร์สองด้านของ DataGrid หนึ่งคือ กลไกเริ่มต้นของ DataGrid และอีกอย่างคือ การใช้ AJAX เพื่อรับข้อมูลและเติม DataGrid ซึ่งสามารถใช้งานได้ตามสถานการณ์

1: ใช้กลไกเริ่มต้น DataGrid

หลังเวที:

 สาธารณะ jsonResult getquestionunit () {// easyi dataGrid ตัวเองจะผ่านแถวและหน้า int pageSize = Convert.toint32 (คำขอ ["แถว"]); int pagenum = Convert.toint32 (คำขอ ["หน้า"]); var dal = ใหม่ qsquestionunitdal (); var questionunits = dal.getList ("", pagenum -1, pageSize); // ค่าที่ส่งคืนไปยังเบื้องหน้าจะต้องมีทั้งหมดและแถว var easyUiPages = พจนานุกรมใหม่ <สตริงวัตถุ> (); EasyUiPages.add ("ทั้งหมด", quustionunits.firstordefault () == null? 0: questionunits.firstordefault (). reqcount); EasyUiPages.add ("แถว", คำถาม); กลับ JSON (EasyUiPages, JsonRequestBehavior.Allowget); } frontend: (function () {(function () {('#dgd'). dataGrid ({pagenumber: 1, // url: "@viewbag.domain/paper/getquestionunit? arg1 = xxx", คอลัมน์: [{field: ]], pagination: true, rownumbers: true, pagelist: [3, 6]}); var p = ('#dgd'). dataGrid ('getPager'); ('#dgd'). dataGrid ('getPager'); {หน้า} หน้า ', displaymsg:' total {total} data ',});});

คุณต้องวาง ('#DGD') วิธี DataGrid ไปที่

 $ (function () {});

หากคุณพยายามเรียก ('#DGD') วิธี DataGrid ผ่านวิธี JS อื่น ๆ คุณจะไม่ได้รับผลการเพจที่ถูกต้อง

อย่างที่คุณเห็น URL บรรทัดในรหัส JS ข้างต้นได้รับการแสดงความคิดเห็น หากเราไม่จำเป็นต้องดำเนินการอื่นและเราวางแผนที่จะสอบถามข้อมูลทันทีที่โหลดหน้าเว็บเราไม่สามารถแสดงความคิดเห็นรหัสได้ อย่างไรก็ตามบ่อยครั้งบางครั้งพารามิเตอร์ URL เช่นค่าของ ARG1 จำเป็นต้องดำเนินการบางอย่างบนอินเทอร์เฟซจากนั้นรับผ่านรหัส JS ในเวลานี้ URL ควรให้ความเห็นและมอบหมายให้สถานที่อื่น ๆ เช่น:

 var step1ok = function () {$ ('#dgd'). dataGrid ({url: "@viewbag.domain/paper/getquestionunit? arg1 = xxx",});};

ในรหัสด้านบนเราสามารถสันนิษฐานได้ว่าปุ่มในอินเทอร์เฟซถูกคลิกและวิธีการ step1ok ถูกเรียกจากนั้นข้อมูลจะถูกสอบถามไปยัง URL และนำเสนอไปยัง UI

สอง: ใช้ AJAX เพื่อรับข้อมูลและเติม DataGrid

หากเราต้องการติดตามความยืดหยุ่นมากขึ้นเราไม่สามารถใช้กลไกเริ่มต้นของ DataGrid นั่นคือระบุ URL เพื่อรับข้อมูล แต่ใช้ AJAX เพื่อรับข้อมูลและเติม DataGrid ด้วยวิธีนี้คุณยังต้องวาง ('#DGD')

 $ (function () {});

รหัสพื้นหลังยังคงไม่เปลี่ยนแปลง แต่การคลิกปุ่มและวิธีการเรียกใช้ step1ok จะกลายเป็น:

 var step1ok = function () {.messager.progress (ชื่อ: ′Pleasewaiting′, msg: ′loadingdata ... ′, ข้อความ: การประมวลผล ..... ′); varp = .messager.progress (ชื่อ:′ pleasewaiting ′, msg:′ loadingdata ... $ (p) .pagination ({onSelectPage: ฟังก์ชั่น (pagenumber, pagesize) {Alert ('onSelectPage pagenumber:' + pagenumber + ', pageize:' + pagesize); getData (pagenumber, หน้า);}}); getData

เมื่อมีการเรียกการโทรครั้งแรกข้อมูล 3 ชิ้นในหน้าแรกจะได้รับ:

 getData (1,3);

จากนั้นเราจะเห็นได้ว่าในเวลาเดียวกันเรายังได้สร้างโปรเซสเซอร์เวลาสำหรับเหตุการณ์ onSelectPage ของการแบ่งหน้าดังนั้นเมื่อหน้าเป็นวันอื่นเราจะไปที่:

getData (pagenumber, pagesize);

นอกจากนี้เนื่องจากเราข้ามกลไกดั้งเดิมของ DataGrid สำหรับการปนเปื้อนเราจึงนำหน้าปกของเราเอง $ .Messager.Progress แล้วเปิดฝาครอบในความสำเร็จของ AJAX

วิธี getData มีดังนี้:

 var getData = function (หน้า, แถว) {.ajax ({type: "post", url: "@viewbag.domain/paper/getquestionunit", ข้อมูล: "page =" + page + "& rows =" + rows, ข้อผิดพลาด: ฟังก์ชั่น url: "@viewbag.domain/paper/getquestionunit", ข้อมูล: "หน้า =" + หน้า + "& rows =" + แถว, ข้อผิดพลาด: ฟังก์ชั่น (xmlhttprequest, textstatus, errorthrown) {แจ้งเตือน (textstatus); //.each(Data,function(i,Item)//alert(item);/ /);

ข้างต้นเป็นคำอธิบายที่สมบูรณ์ของสองวิธีของการเพจการแบ่งหน้าง่าย ๆ แนะนำให้คุณรู้จักโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณต้องการทราบข้อมูลเพิ่มเติมโปรดใส่ใจกับเว็บไซต์ Wulin.com!