1. jsp页面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>damo</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<!-- JQeryEsayUI必须cs文件-->
<link id="easyuiTheme" rel="stylesheet" type="text/css" href="<%=basePath %>js/jquery-easyui-1.5.2/themes/metro/easyui.css">
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/jquery-easyui-1.5.2/themes/icon.css">
<style type="text/css">
</style>
<!-- JQeryEsayUI必须js文件-->
<script type="text/javascript" src="<%=basePath %>js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/jquery-easyui-1.5.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=basePath %>js/jquery-easyui-1.5.2/locale/easyui-lang-zh_CN.js"></script>
<!---->
<script type="text/javascript" src="<%=basePath %>js/damo.js"></script>
<script type="text/javascript">
var basePath = "<%=basePath%>";
</script>
</head>
<body style="100%;height:99%;">
<!-- 注意：绑定的searchBar的id分页必不可少 -->
<div id="searchBar" style="margin-top:2px;">
<table cellpadding="0" cellspacing="0">
<tbody>
<tr style="text-align:center;">
<form method="post" id="frm" name="frm">
<td style="50px;padding-left:20px;">
<span>姓名：</span>
</td>
<td>
<input type="text" id="userName" name="userName" class="" style="120px;" >
</td>
</form>
<td class="" style=" 30px; padding-left: 10px;">
<button class="" style="margin-left: 30px;" onclick="searchObj()">检索</button>
</td>
</tr>
</tbody>
</table>
</div>
<table id="tableId"></table>
</body>
</html>
2.damo.js( 前端页面对应J）
$("#tableId").datagrid({
border:0,
'100%',
height: 400,
method: "post",
url: basePath + "damo/damoCount.do",
idField: 'id',
fit: true,
async : false,
striped : false, // 隔行换色
rownumbers: false, // 显示行号列
singleSelect : true, // 选择单多行
remoteSort: false,
pagination: true, //分页栏
pageSize: 25,
pageList: [25,50,100],
toolbar:'#searchBar',
frozenColumns: [
[
{ field: 'departmentName', title: '部门', 100, align : 'center'},
{ field: 'userName', title: '姓名', 100, align : 'center'},
]
],
columns: [
[
{ field: 'absenCount', title: '旷工(次)', 60, align : 'center',
styler : function(value) {
if(value>0){
return 'background-color:rgb(239,200,72);font-weight:bold;';
}
}
},
{ field: 'latecount', title: '迟到(次)', 60, align : 'center',
styler : function(value) {
if(value>0){
return 'background-color:rgb(239,200,72);font-weight:bold;';
}
}
} ,
{ field: 'leaveCount', title: '早退(次)', 60, align : 'center',
styler : function(value) {
if(value>0){
return 'background-color:rgb(239,200,72);font-weight:bold;';
}
}
}
]
],
queryParams : {
startDate: startDate,
endDate: endDate,
userName: userName
}
});
3. 后台数据的处理：
//接受datagrid传过来的值
int page = request.getParameter("page") == null ? 1 : Integer.parseInt(request.getParameter("page"));//当前页
int rows = request.getParameter("rows") == null ? 25 : Integer.parseInt(request.getParameter("rows")); //每页显示行数
Integer count = 0;//总条数
Integer startcount = 0;//起始条数
Integer endCount = 0;//结束条数
startcount = ((page-1) * rows) + 1;
endCount = (page * rows);
JSONObject jsonObject = new JSONObject();
//必须返回total和rows，JQueryEsayUI会根据接收的total和rows自动去处理
jsonObject.put("total", count);
jsonObject.put("rows", list);
//数据返回
PrintWriter pw = null;
pw = response.getWriter();
pw.print(jsonObject);