<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>dojo表格分页</title>
<link rel=stylesheet href="../dojoroot/dojox/grid/tests/enhanced/support/common.css"/>
<style type="text/css">
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
padding-right: 10em;
}
.title {
text-align: center;
margin: 1em;
}
#grid {
width: 100em;
height: 30em;
}
#API-btn-grp {
margin: 1em;
}
</style>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js" data-dojo-config="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript" src="../dojoroot/dijit/tests/_testCommon.js"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require("dojox.grid.enhanced.plugins.Pagination");
dojo.require("dojo.parser");
var layout = [{
cells: [
{ field: "id", name:"Identity", datatype:"number", width: 4},
{ field: "Genre", name:"Genre", datatype:"string", width: 10},
{ field: "Artist", name:"Artist", datatype:"string", width: 10},
{ field: "Year", name:"Year", datatype:"string", width: 2.5},
{ field: "Album", name:"Album", datatype:"string", width: 10},
{ field: "Name", name:"Name", datatype:"string", width: 8},
{ field: "Length", name:"Length", datatype:"string", width: 4},
{ field: "Track", name:"Track", datatype:"number", width: 3},
{ field: "Composer", name:"Composer", datatype:"string", width: 12},
{ field: "Download Date", name:"Download Date", datatype:"date", width: 12},
{ field: "Last Played", name:"Last Played", datatype:"time", width: 6},
{ field: "Heard", name: "Checked", datatype:"boolean", width: 6}
]
}];
var plugins = {
pagination: {
pageSizes: [10, 15, 20, 25,30], //每页可以显示10/15/20/25/30条记录
description: true, //每页显示的记录从多少到多少，共多少条记录（true：显示，false：不显示）
sizeSwitch: true, //显示每页显示多少条记录（中间部分 10|15|20|25|30）（true：显示，false：不显示）
pageStepper: true, //显示首页、上一页、下一页、尾页按钮和页数（true：显示，false：不显示）
gotoButton: true, //显示跳转按钮（向上的箭头）（true：显示，false：不显示）
maxPageStep: 10, //最大页数跨度
position: "bottom", //分页插件默认的位置，bottom：表格下方，top：表格上方
defaultPage: 1, //默认显示第几页
defaultPageSize: 15 //每页显示的记录数
}
};
</script>
<script type="text/javascript" src="data.js"></script>
</head>
<body class="claro">
<div id="gridContainer">
<span id="jsonStore"
url="data.json"
data-dojo-id="jsonStore"
data-dojo-type="dojo/data/ItemFileWriteStore"
>
</span>
<table id="gridData" query="{ id: '*' }"
store="jsonStore"
data-dojo-type="dojox/grid/EnhancedGrid">
<thead>
<tr>
<th field="name" name="国家"></th>
<th field="type" name="洲"></th>
</tr>
</thead>
</table>
<div id="grid" dojoType="dojox.grid.EnhancedGrid" store="test_store[0]" structure="layout" plugins="plugins" summary="A customized grid summary"></div>
</div>
</body>
</html>