JQueryEsayUI的datagrid分页

1. jsp页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<%@ 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="width:100%;height:99%;"><br>    <!-- 注意:绑定的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="width:50px;padding-left:20px;">
                    <span>姓名:</span>
                  </td>
                  <td>
                    <input type="text" id="userName" name="userName" class="" style="width:120px;" >
                  </td>
               </form>
                 <td class="" style="width: 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)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$("#tableId").datagrid({
    border:0,
    width: '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: '部门', width:100, align : 'center'},
             { field: 'userName', title: '姓名', width:100, align : 'center'},
         ]
    ],
    columns: [
        [
             { field: 'absenCount', title: '旷工(次)', width:60, align : 'center',
                 styler : function(value) {
                     if(value>0){
                         return 'background-color:rgb(239,200,72);font-weight:bold;';
                     }
                    }
             },
             { field: 'latecount', title: '迟到(次)', width:60, align : 'center',
               styler : function(value) {
                  if(value>0){
                     return 'background-color:rgb(239,200,72);font-weight:bold;';
                  }
                }
             } ,
             { field: 'leaveCount', title: '早退(次)', width: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. 后台数据的处理:

1
2
3
4
5
6
7
8
9
10
11
12
13
//接受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);<br>//数据返回<br>PrintWriter pw = null;<br>pw = response.getWriter();<br>pw.print(jsonObject);

  

  

posted @   达摩院的BLOG  阅读(211)  评论(0编辑  收藏  举报
编辑推荐:
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
阅读排行:
· 终于决定:把自己家的能源管理系统开源了!
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 实现windows下简单的自动化窗口管理
· 【C语言学习】——命令行编译运行 C 语言程序的完整流程
点击右上角即可分享
微信分享提示