Datagrid Easyui mendukung pagination sisi server, tetapi ada lebih sedikit informasi resmi. Berikut ini merangkum dua mekanisme paginasi sisi server dari Datagrid. Salah satunya adalah mekanisme default datagrid , dan yang lainnya adalah menggunakan AJAX untuk mendapatkan data dan mengisi datagrid , yang dapat digunakan sesuai dengan situasi.
1: Gunakan mekanisme default datagrid
Backstage:
jSonResult publik getQuestionUnit () {// Easyi Datagrid itu sendiri akan melewati baris dan halaman int halaman = convert.toint32 (permintaan ["baris"]); int pagenum = convert.toint32 (permintaan ["halaman"]); var dal = qsquestionunitdal baru (); var questionUnits = dal.getList ("", pagenum -1, pagesize); // Nilai yang dikembalikan ke latar depan harus mencakup total dan baris var easyuipages = kamus baru <string, objek> (); easyUipages.add ("Total", QuestionUnits.firstordefault () == NULL? 0: QuestionUnits.firstordefault (). ReqCount); easyuipages.add ("baris", pertanyaan); return json (easyuipages, jsonrequestbehavior.allowget); } Frontend: (function () {(function () {('#dgd'). Datagrid ({pagenumber: 1, // url: "@viewbag.domain/paper/getQuestionunit? Arg1 = xxx", kolom: [{field: 'id', title: 'id', wid: 100}, '{{{{field:' id ', title:' id ', wid: 100},' {{{{field: 'id', title: 'ID', wid: 100 {100} ' ]], pagination: true, rownumbers: true, pagelist: [3, 6]}); var p = ('#dgd'). datagrid ('getpager'); ('#dgd'). datagrid ('getpager'); (pabah pompa ({beforepageText 'hal -hal'); {halaman} halaman ', displaymsg:' total {total} data ',});Anda perlu menempatkan ('#dgd'). Metode Datagrid untuk
$ (function () {});Jika Anda mencoba memanggil ('#dgd'). Metode Datagrid melalui metode JS lainnya, Anda tidak akan mendapatkan hasil paging yang benar.
Seperti yang Anda lihat, URL baris dalam kode JS di atas telah dikomentari. Jika kami tidak perlu melakukan operasi lain dan kami berencana untuk meminta data segera setelah halaman dimuat, kami tidak dapat mengomentari kode tersebut. Namun, seringkali, kadang -kadang, parameter URL, seperti nilai Arg1, perlu melakukan operasi tertentu pada antarmuka, dan kemudian mendapatkannya melalui kode JS. Pada saat ini, URL harus dikomentari dan ditugaskan ke tempat lain, seperti:
var step1ok = function () {$ ('#dgd'). datagrid ({url: "@viewbag.domain/paper/getQuestionunit? arg1 = xxx",});};Dalam kode di atas, kita dapat mengasumsikan bahwa tombol di antarmuka diklik dan metode Step1OK dipanggil, maka data akan ditanyai URL dan disajikan ke UI.
Dua: Gunakan AJAX untuk mendapatkan data dan mengisi datagrid
Jika kami ingin mengejar fleksibilitas yang lebih besar, kami tidak dapat menggunakan mekanisme default Datagrid, yaitu, tentukan URL untuk mendapatkan data, tetapi gunakan AJAX untuk mendapatkan data dan mengisi DataGrid. Dengan cara ini, Anda masih perlu menempatkan ('#dgd'). Metode Datagrid ke
$ (function () {});Kode latar belakang tetap tidak berubah, tetapi mengklik tombol dan memanggil metode Step1OK menjadi:
var step1ok = function () {.messager.progress (judul: ′ liveewaiting ′, msg: ′ loadingdata ... ′, teks: ′ pemrosesan ..... ′); varp = .messager.progress (judul: ′ pleasewaiting ′, msg: ′ loadingdata ... ′, teks: ′ pemrosesan ... ′ ′); msg: ′ datpon (′, ′: ′ ′ ′); msg: ′; $ (p) .pagination ({OnselectPage: function (pagenumber, pageSize) {alert ('OnselectPage Pagenumber:' + pagenumber + ', pagesze:' + pageSize); getData (pagenumber, pageSize);}}); getdata (1.3);Ketika panggilan pertama dipanggil, 3 lembar data di halaman pertama akan diperoleh:
getData (1,3);
Kemudian kita dapat melihat bahwa, pada saat yang sama, kami juga membuat prosesor waktu untuk acara pagination onSelectpage, sehingga ketika halaman adalah hari lain, kami akan pergi ke:
getData (pagenumber, halaman);
Selain itu, karena kami melewati mekanisme asli Datagrid untuk pagination, kami mengadopsi sampul kami sendiri $ .messager.progress, dan kemudian mengungkap sampul dalam keberhasilan Ajax.
Metode getData adalah sebagai berikut:
var getData = function (page, rows) { .ajax({ type: "POST", url: "@ViewBag.Domain/Paper/GetQuestionUnit", data: "page=" + page + "&rows=" + rows, error: function (XMLHttpRequest, textStatus, errorThrown) { alert(textStatus);.ajax({ type: "POST", URL: "@viewbag.domain/paper/getQuestionUnit", data: "page =" + page + "& rows =" + Baris, kesalahan: function (xmlHttprequest, textstatus, errorthrown) {waspada (textstatus) ;. Messager.progress ('tutup'); //.each(data,function(i,item)//alert(item);//) ;.each(data,function(i,item)//alert(item);//);.messager.progress('close ');Di atas adalah deskripsi lengkap dari dua metode pagination pagination paging yang diperkenalkan kepada Anda oleh editor. Saya harap ini akan membantu Anda. Jika Anda ingin tahu lebih banyak, harap perhatikan situs web Wulin.com!