转easyui datagrid 前台分页的实现
easyui datagrid 前台分页的实现java采用的版本
使用easyui分页，有后台服务器端实现和前台浏览器端实现。服务器端实现按规定的格式返回数据就可以了，前台实现需要写js来实现。
代码如下：
关键代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
function
pagerFilter(data){
if
(
typeof
data.length ==
'number'
&&
typeof
data.splice ==
'function'
){
// 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var
dg = $(
this
);
var
opts = dg.datagrid(
'options'
);
var
pager = dg.datagrid(
'getPager'
);
pager.pagination({
onSelectPage:
function
(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination(
'refresh'
,{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid(
'loadData'
,data);
}
});
if
(!data.originalRows){
data.originalRows = (data.rows);
}
var
start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var
end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return
data;
}
|
完整的Demo
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>客户端分页demo</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"http://www.jeasyui.com/easyui/themes/bootstrap/easyui.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"http://www.jeasyui.com/easyui/themes/icon.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"http://www.jeasyui.com/easyui/demo/demo.css"
>
<
script
type
=
"text/javascript"
src
=
"http://www.jeasyui.com/easyui/jquery-1.8.0.min.js"
></
script
>
<
script
type
=
"text/javascript"
src
=
"http://www.jeasyui.com/easyui/jquery.easyui.min.js"
></
script
>
</
head
>
<
body
>
<
h2
>客户端分页dem</
h2
>
<
div
class
=
"demo-info"
>
<
div
class
=
"demo-tip icon-tip"
></
div
>
<
div
></
div
>
</
div
>
<
div
style
=
"margin:10px 0;"
></
div
>
<
table
id
=
"dg"
title
=
"Client Side Pagination"
style
=
"width:700px;height:300px"
data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<
thead
>
<
tr
>
<
th
field
=
"inv"
width
=
"80"
>Inv No</
th
>
<
th
field
=
"date"
width
=
"100"
>Date</
th
>
<
th
field
=
"name"
width
=
"80"
>Name</
th
>
<
th
field
=
"amount"
width
=
"80"
align
=
"right"
>Amount</
th
>
<
th
field
=
"price"
width
=
"80"
align
=
"right"
>Price</
th
>
<
th
field
=
"cost"
width
=
"100"
align
=
"right"
>Cost</
th
>
<
th
field
=
"note"
width
=
"110"
>Note</
th
>
</
tr
>
</
thead
>
</
table
>
<
script
>
function getData(){//模拟数据
var rows = [];
for(var i=1; i<=80000; i++){
var amount = Math.floor(Math.random()*1000);
var price = Math.floor(Math.random()*1000);
rows.push({
inv: 'Inv No '+i,
date: $.fn.datebox.defaults.formatter(new Date()),
name: 'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note: 'Note '+i
});
}
//console.log(JSON.stringify(rows));
return rows;
}
function pagerFilter(data){
if (typeof data.length == 'number' && typeof data.splice == 'function'){ // 判断数据是否是数组
data = {
total: data.length,
rows: data
}
}
var dg = $(this);
var opts = dg.datagrid('options');
var pager = dg.datagrid('getPager');
pager.pagination({
onSelectPage:function(pageNum, pageSize){
opts.pageNumber = pageNum;
opts.pageSize = pageSize;
pager.pagination('refresh',{
pageNumber:pageNum,
pageSize:pageSize
});
dg.datagrid('loadData',data);
}
});
if (!data.originalRows){
data.originalRows = (data.rows);
}
var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
var end = start + parseInt(opts.pageSize);
data.rows = (data.originalRows.slice(start, end));
return data;
}
$(function(){//加载数据
$('#dg').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
});
</
script
>
</
body
>
</
html
>
|