<!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>
jQuery MiniUI 前臺分頁
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
three | 光源掃描，波動牆效果
效果 光源掃描 波動牆 實現 1. 創建一個點光源，動態修改頂點座標 // 創建一個點光源 this._pointlight = new THREE.PointLight('red') th