Rumah hujung hadapan web tutorial js EasyUi datagrid melaksanakan paging_jquery jadual

EasyUi datagrid melaksanakan paging_jquery jadual

May 16, 2016 pm 04:14 PM
easyui penomboran

1. Mula-mula perkenalkan fail css dan js easyui

2. Js yang perlu ditulis di meja hadapan

Salin kod Kod adalah seperti berikut:

//Data sumber
fungsi Async(action,args,callback){
$.ajax({
url: tindakan ,
taip:"POST",
​dataType:"json",
Tamat masa: 10000,
​data: args,
Kejayaan: fungsi(data){
jika(panggilan balik){
​ panggil balik(data);
}
}
});
}
//Ikat data dan tetapkan halaman
fungsi BingData(pid,args,action,callback){
Async(tindakan,args,fungsi(data){
if(data!=null&&data.list!=null){
var _dataCount=data.size;//Jumlah bilangan item
var _data=data.list;//data
jika(panggilan balik){
panggil balik(_data);
}
$(pid).datagrid('loadData', _data);
$(pid).datagrid('getPager').penomboran({
beforePageTeks: 'th',
afterPageText: 'Halaman {halaman}',
displayMsg: 'Pada masa ini memaparkan {dari} - {kepada} rekod, sejumlah {total} rekod',
pageSize: args.pageSize,
jumlah: _dataCount,
pageNombor: args.pageIndex,
pageList:args.pageList,
onSelectPage: fungsi (Nombor halaman, Saiz halaman) {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData(pid, args, action,null);
},
onRefresh: fungsi (Nombor halaman, Saiz halaman) {
args.pageIndex = pageNumber;
args.pageSize = pageSize;
BingData(pid, args, action,null);
}
});
}
});
}
//Sirikan borang menjadi objek
$.fn.serializeObject = function(){
var obj = {};
$.each( this.serializeArray(), function(i,o){
var n = o.name, v = o.value;
obj[n] = obj[n] === tidak ditakrifkan v
: $.isArray( obj[n] ) ? : [ obj[n], v ];
});
kembalikan JSON.stringify(obj);
};
//Lebar
fungsi fixWidth(peratus){
pulangkan document.body.clientWidth * peratus ;
}
//Tamatkan pengeditan
fungsi endEdit(vid){
vid = "#" vid;
var tb=$(vid);
var rows = tb.datagrid('getRows');
untuk ( var i = 0; i < rows.length; i ) {
tb.datagrid('endEdit', i);
}
}
fungsi GetData(obj){
var url = contextPath '/fundRetreatVoucher/fundBatchRetreatVoucherQuery.htm';//action path
var args={};
args.pageIndex=1;//Indeks halaman
args.pageSize=10;//Kapasiti halaman
if(obj!=null){ //Bentuk objek bersiri
args.obj=obj;
}
BingData("#tab",args,url,null);
}
fungsi getTab(){
GetData();
var tb=$('#tab');
tb.datagrid({
tajuk: 'Hasil pertanyaan kumpulan pemulangan dana',
belang: benar,
fitColumns: benar, //Saiz lajur penyesuaian
nombor baris: benar,
nowrap: true, //Tetapkan kepada benar, apabila panjang data melebihi lebar lajur, ia akan dipintas secara automatik
belang: benar,
width:fixWidth(0.99),
ketinggian:'430',
singleSelect:true,
loadMsg: 'Pemuatan data...',
lajur:[[
{field:'interfaceInfoCode',title:'Fund Channel Code',width:fixWidth(0.3),align: "center"},
{field:'retreatBatchCode',title:'Funds return batch number',width:fixWidth(0.2),editor:'text',align: "center"},
                                                                                                                                                                                                                                                                                    {field:'totalMoney',title:'total amount',width:fixWidth(0.1),align:'right',editor:'text',align: "center"},
{field:'def2',title:'Operation',width:fixWidth(0.3),editor:'text',align:'right',align: "center",
formatter:function(nilai,baris,indeks){
  var vcode =row.retreatBatchCode;
  var e = 'Butiran   var d = 'Audit lulus   var f = 'Penolakan audit   kembali e d f;
  }}
]],
onLoadSuccess:function(data){
​jika (data.total == 0) {
}
},
Penomboran: benar,
pageIndex:1,//Indeks halaman
Saiz halaman:10,//Kapasiti halaman
Senarai halaman: [10,15,20]
})
}

2 Belakang pentas

Salin kod Kod adalah seperti berikut:

int currentPage = request.getParameter("pageIndex") == null 1 : Integer.parseInt(request.getParameter("pageIndex"));
//Bilangan baris setiap halaman
int showCount = request.getParameter("pageSize") == null 10 : Integer.parseInt(request.getParameter("pageSize"));
// Entiti penomboran
String obj = request.getParameter("obj");
jika (StringUtils.notBlank(obj)) {
fundRetreatVoucher = JsonUtils.toObject(obj, FundRetreatVoucherParam.class); //Tukarkan objek json bersiri kepada entiti
}
keluar = response.getWriter();
Senaraikan frvs = fundRetreatVoucherService.findAllFundRetreatVoucher(halaman, fundRetreatVoucher);
int jumlah = fundRetreatVoucherService.findAllFundRetreatVoucher(getTotal(), fundRetreatVoucher).size();//data size
JSONObject json = new JSONObject();
json.put("list", frvs);//Data, kunci put di sini mestilah senarai. Jika ia ditukar, anda perlu menukar data dalam BingData
json.put("saiz", jumlah);
out.print(json);
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Pembangunan PHP: Bagaimana untuk melaksanakan pengisihan data jadual dan fungsi halaman Pembangunan PHP: Bagaimana untuk melaksanakan pengisihan data jadual dan fungsi halaman Sep 20, 2023 am 11:28 AM

Pembangunan PHP: Bagaimana untuk melaksanakan fungsi pengisihan data jadual dan halaman Dalam pembangunan web, memproses sejumlah besar data adalah tugas biasa. Untuk jadual yang perlu memaparkan sejumlah besar data, biasanya perlu melaksanakan fungsi pengisihan dan halaman untuk memberikan pengalaman pengguna yang baik dan mengoptimumkan prestasi sistem. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan fungsi pengisihan dan halaman data jadual, dan memberikan contoh kod khusus. Fungsi pengisihan melaksanakan fungsi pengisihan dalam jadual, membolehkan pengguna mengisih dalam tertib menaik atau menurun mengikut medan yang berbeza. Berikut ialah borang pelaksanaan

Bagaimana untuk membuat penomboran tersuai dalam CakePHP? Bagaimana untuk membuat penomboran tersuai dalam CakePHP? Jun 04, 2023 am 08:32 AM

CakePHP ialah rangka kerja PHP yang berkuasa yang menyediakan pembangun dengan banyak alat dan ciri berguna. Salah satu daripadanya ialah penomboran, yang membantu kami membahagikan sejumlah besar data kepada beberapa halaman, menjadikan penyemakan imbas dan manipulasi lebih mudah. Secara lalai, CakePHP menyediakan beberapa kaedah penomboran asas, tetapi kadangkala anda mungkin perlu mencipta beberapa kaedah penomboran tersuai. Artikel ini akan menunjukkan kepada anda cara membuat penomboran tersuai dalam CakePHP. Langkah 1: Cipta kelas penomboran tersuai Pertama, kita perlu mencipta kelas penomboran tersuai. ini

Menggunakan JavaScript untuk melaksanakan paparan halaman data jadual Menggunakan JavaScript untuk melaksanakan paparan halaman data jadual Jun 16, 2023 am 10:00 AM

Apabila data terus berkembang, paparan jadual menjadi lebih sukar. Selalunya, jumlah data dalam jadual adalah sangat besar sehingga ia menjadi lambat untuk dimuatkan dan pengguna perlu sentiasa menyemak imbas halaman untuk mencari data yang mereka inginkan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk merealisasikan paparan bernombor bagi data jadual, menjadikannya lebih mudah untuk pengguna mencari data yang mereka inginkan. 1. Buat jadual secara dinamik Untuk menjadikan fungsi paging lebih terkawal, jadual perlu dibuat secara dinamik. Dalam halaman HTML, tambahkan elemen jadual yang serupa dengan yang di bawah.

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Oct 20, 2023 pm 06:19 PM

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual? Dengan perkembangan Internet, semakin banyak laman web menggunakan jadual untuk memaparkan data. Dalam sesetengah kes di mana jumlah data adalah besar, data perlu dipaparkan dalam halaman untuk meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi halaman jadual dan menyediakan contoh kod khusus. 1. Struktur HTML Pertama, kita perlu menyediakan struktur HTML untuk mengehoskan jadual dan butang paging. Kita boleh menggunakan &lt;tab

Adakah easyui pemalam jquery? Adakah easyui pemalam jquery? Jul 05, 2022 pm 06:08 PM

easyui ialah pemalam jquery. easyui ialah pemalam antara muka UI bahagian hadapan berdasarkan JQuery, yang digunakan untuk membantu pembangun web dengan lebih mudah mencipta antara muka UI yang kaya dengan ciri dan cantik. easyui ialah rangka kerja yang menyokong halaman web HTML5 dengan sempurna, yang boleh membantu pembangun menjimatkan masa dan skala pembangunan web.

Penjelasan terperinci tentang prinsip pemalam paging MyBatis Penjelasan terperinci tentang prinsip pemalam paging MyBatis Feb 22, 2024 pm 03:42 PM

MyBatis ialah rangka kerja lapisan kegigihan yang sangat baik yang menyokong operasi pangkalan data berdasarkan XML dan anotasi Ia mudah dan mudah digunakan, dan juga menyediakan mekanisme pemalam yang kaya. Antaranya, pemalam paging adalah salah satu pemalam yang lebih kerap digunakan. Artikel ini akan menyelidiki prinsip pemalam paging MyBatis dan menggambarkannya dengan contoh kod khusus. 1. Prinsip pemalam paging MyBatis sendiri tidak menyediakan fungsi paging asli, tetapi anda boleh menggunakan pemalam untuk melaksanakan pertanyaan paging. Prinsip pemalam paging adalah terutamanya untuk memintas MyBatis

Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Oct 24, 2023 pm 01:10 PM

Cara menggunakan Layui untuk membangunkan halaman paparan data dengan fungsi paging Layui ialah rangka kerja UI bahagian hadapan yang ringan yang menyediakan komponen antara muka yang ringkas dan cantik serta pengalaman interaktif yang kaya. Semasa pembangunan, kita sering menghadapi situasi di mana kita perlu memaparkan sejumlah besar data dan melakukan paging. Berikut adalah contoh halaman paparan data dengan fungsi paging yang dibangunkan menggunakan Layui. Pertama, kita perlu memperkenalkan fail dan kebergantungan berkaitan Layui. Tambahkan kod berikut pada teg &lt;head&gt;

Amalan komponen Vue: pembangunan komponen halaman Amalan komponen Vue: pembangunan komponen halaman Nov 24, 2023 am 08:56 AM

Amalan komponen Vue: Pengenalan kepada pembangunan komponen halaman Dalam aplikasi web, fungsi halaman adalah komponen penting. Komponen paging yang baik hendaklah ringkas dan jelas dalam persembahan, kaya dengan fungsi, dan mudah untuk disepadukan dan digunakan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan rangka kerja Vue.js untuk membangunkan komponen halaman yang sangat boleh disesuaikan. Kami akan menerangkan secara terperinci cara membangunkan menggunakan komponen Vue melalui contoh kod. Teknologi tindanan Vue.js2.xJavaScript (ES6) HTML5 dan persekitaran pembangunan CSS3

See all articles