jQuery MiniUI 前台分页
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>DataGrid 数据表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href="../demo.css" rel="stylesheet" type="text/css" />
<script src="../../scripts/boot.js" type="text/javascript"></script>
</head>
<body>
<h1>Client Pagination 客户端分页</h1>
<div id="datagrid1" class="mini-datagrid" style="width:600px;height:280px;" idField="id" pageSize="10" multiSelect="true"
>
<div property="columns">
<div type="indexcolumn"></div>
<div type="checkcolumn"></div>
<div field="loginname" width="120" headerAlign="center" vtype="required;email" autoEscape="true" allowSort="true">员工帐号</div>
<div field="age" width="100" allowSort="true" >年龄</div>
<div field="gender" width="100" allowSort="true" align="center" headerAlign="center">性别</div>
<div field="country" width="100" headerAlign="center" >国家</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
mini.parse();
var grid = mini.get("datagrid1");
// 分页填充细节处理
function fillData(pageIndex, pageSize, dataResult, grid) {
var data = dataResult.data, totalCount = dataResult.total;
var arr = [];
var start = pageIndex * pageSize, end = start + pageSize;
for (var i = start, l = end; i < l; i++) {
var record = data[i];
if (!record) continue;
arr.push(record);
}
grid.setTotalCount(totalCount);
grid.setPageIndex(pageIndex);
grid.setPageSize(pageSize);
grid.setData(arr);
}
// 监听分页前事件，阻止后自行设置当前数据和分页信息
grid.on("beforeload", function (e) {
e.cancel = true;
var pageIndex = e.data.pageIndex, pageSize = e.data.pageSize;
fillData(pageIndex, pageSize, dataResult, grid);
});
// 获取所有数据和总记录数 { total: 100, data: [...] }
var dataResult = null;
$.ajax({
url: 'data.txt',
dataType: 'text',
async: false,
success: function (text) {
dataResult = mini.decode(text);
}
});
// 第一次设置
fillData(0, grid.getPageSize(), dataResult, grid);
</script>