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); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】博客园携手 AI 驱动开发工具商 Chat2DB 推出联合终身会员
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· ASP.NET Core - 日志记录系统(二)
· .NET 依赖注入中的 Captive Dependency
· .NET Core 对象分配(Alloc)底层原理浅谈
· 聊一聊 C#异步 任务延续的三种底层玩法
· 敏捷开发:如何高效开每日站会
· 终于决定:把自己家的能源管理系统开源了!
· C#实现 Winform 程序在系统托盘显示图标 & 开机自启动
· 了解 ASP.NET Core 中的中间件
· 实现windows下简单的自动化窗口管理
· 【C语言学习】——命令行编译运行 C 语言程序的完整流程