easyUI 数据表格客户分页

来源：互联网发布：刘德华救歌迷知乎编辑：程序博客网时间：2024/06/05 10:23

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>Client Side Pagination in DataGrid - jQuery EasyUI Demo</title>
<linkrel="stylesheet"type="text/css"href="../../themes/default/easyui.css">
<linkrel="stylesheet"type="text/css"href="../../themes/icon.css">
<linkrel="stylesheet"type="text/css"href="../demo.css">
<scripttype="text/javascript"src="../../jquery.min.js"></script>
<scripttype="text/javascript"src="../../jquery.easyui.min.js"></script>
</head>
<body>
<h2>Client Side Pagination in DataGrid</h2>
<p>This sample shows how to implement client side pagination in DataGrid.</p>
<divstyle="margin:20px0;"></div>
<tableid="dg"title="Client Side Pagination"style="width:700px;height:300px"data-options="
rownumbers:true,
singleSelect:true,
autoRowHeight:false,
pagination:true,
pageSize:10">
<thead>
<tr>
<thfield="inv"width="80">Inv No</th>
<thfield="date"width="100">Date</th>
<thfield="name"width="80">Name</th>
<thfield="amount"width="80"align="right">Amount</th>
<thfield="price"width="80"align="right">Price</th>
<thfield="cost"width="100"align="right">Cost</th>
<thfield="note"width="110">Note</th>
</tr>
</thead>
</table>
<script>
function getData(){
var rows=[];
for(var i=1; i<=800; 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(newDate()),
name:'Name '+i,
amount: amount,
price: price,
cost: amount*price,
note:'Note '+i
});
}
return rows;
}
function pagerFilter(data){
if(typeof data.length=='number'&&typeof data.splice=='function'){// is array
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>

0 0