JQueryEsayUI的datagrid分页
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="width: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="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)
$("#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. 后台数据的处理:
//接受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);