配置环境：
<!-- EasyUI样式表 -->
<link rel="stylesheet" type="text/css" href="themes/default/easyui.css" />
<link rel="stylesheet" type="tsxt/css" href="themes/icon.css" />
<!-- EasyUI-js -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
注意：EasyUI的class样式基本都以easyui-开头
布局（
Layout
）
布局容器有5个区域：北、南、东、西和中间。中间区域面板是必须的，边缘的面板都是可选的。每个边缘区域面板都可以通过拖拽其边框改变大小，也可以点击折叠按钮将面板折叠起来。布局可以进行嵌套，用户可以通过组合布局构建复杂的布局结构。
<div id="divID"
class="easyui-layout" data-options="fit:true"
>
<!-- 北边区域 -->
<div
data-options
="region:'north',href:'contact.html'"
style="height: 70px;">
<h1 style="text-align: center;">jQuery-EasyUI组件</h1>
</div>
<!-- 南边区域 -->
<div
data-options="region:'south'"
style="height: 70px;">
<h5 style="text-align: center;">xxx公司版权所有</h1>
</div>
<!-- 西边区域 -->
<div
data-options="region:'west',title:'西边',iconCls:'icon-add'"
style="width: 230px;">
这是西边的内容
</div>
<!-- 东边区域 -->
<div
data-options="region:'east',title:'东边',iconCls:'icon-ok'"
style="width: 230px;">
这是东边的内容
</div>
<!-- 中间区域 -->
<div
data-options="region:'center',title:'中间'"
>
这是中间的内容
</div>
</div>
注意：标红为easyUI特有属性
方法调用
$
(
"#divID"
).
layout
(
'collapse'
,
'north'
);
注意：其中
$
(
"#divID"
)为选择要修改的标签对象,layout为需要操作的组件名，括号中为方法名以及对谁使用该方法
分页
<div id="pp" class="
easyui-pagination"
data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"></div>
<!--动态添加分页属性-->
<script>
$(function(){
$("#pid").pagination({
total:2000,
pageSize:10,
<!--由onSelectPage事件可以得到当前为第几页与每页多少条数据
-->
onSelectPage:function(pageNumber, pageSize){
//alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);
},
onChangePageSize:function(pageSize){
alert('pageSize:'+pageSize);
}
});
});
</script>
注意：特殊颜色为easyui分页专属属性
servlet中代码
//设置请求数据编码
request.setCharacterEncoding("utf-8");
//接受页面传入的页号
String pageNumber = request.getParameter("page");
//调用服务层获取当前页的数据
BgService bg = new BgService();
Page page = bg.show(Integer.valueOf(pageNumber));//得到Page对象
//转换为json
Map<String,Object> map = new HashMap<String, Object>();
map.put("total",page.getTotalCount());
map.put("rows", page.getList());
//把Page返回页面
PrintWriter writer = response.getWriter();
writer.write(JsonUtil.map2json(map));
writer.close();
注意：Servlet通过异步请求到jsp中时，数据为json，并使用response.getWriter().write(JsonUtil.map2json(map))方法,数据层则使用rownum进行分页