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);
JQueryEsayUI的datagrid分页的更多相关文章
- EasyUI的datagrid分页
EasyUI的datagrid分页 前台代码: <script type="text/javascript"> $(function () { //查询 search( ...
- WPF之 DataGrid分页
接着上一篇WPF之 DataGrid数据绑定,继续讲述WPF中DataGrid分页. 由于分页经常用到,就做了一个自定义控件,由于当时的局限性,只支持DataTable数据源,不过木关系,网上很多其他 ...
- jquery easyui datagrid 分页详解
由于项目原因,用了jquery easyui 感觉界面不错,皮肤样式少点,可是官网最近打不开了,资料比较少,给的demo没有想要的效果,今天在用datagrid 做分页显示的时候,折腾了半天,网上的资 ...
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
- easyui datagrid分页
datagrid分页设置 pagination="true" 貌似是不行的! 只是显示分页工具栏 没有达到分页效果 前端 $(function (){ var p = $('#d ...
- EasyUI 中datagrid 分页。
注释:datagrid分页搞了好几天才完全搞好,网上没完全的资料.明天晚上贴代码. 睡觉.
- jquery easyui datagrid 分页实现---善良公社项目
接着上篇文章,接下来给大家分享分页的实现,分页其实多多少少见过很有几种,框架中带的图片都特别的好看,会给用户以好的使用效果,具体实现,需要自己来补充代码: 图示1: 通常情况下页面数据的分页显示分成真 ...
- WPF DataGrid分页功能实现代码
在Silverlight中DataGrid分页可以结合DataPager控件很容易实现,但是在WPF中没有类似的,需要手动实现这样一个控件: 1.创建一个UserControl,DP.xaml,代码如 ...
随机推荐
- Spring学习总结（2）——Spring的常用注解
本文汇总了Spring的常用注解,以方便大家查询和使用,具体如下: 使用注解之前要开启自动扫描功能 其中base-package为需要扫描的包(含子包). ? 1 <context:compon ...
- dancing links 题集转自夏天的风
POJ3740 Easy Finding [精确覆盖基础题] HUST1017 Exact cover [精确覆盖基础] HDOJ3663 Power Stations [精确覆盖] Z ...
- Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射，获取到该注解的属性值，从而去做一些运行时的逻辑处理
1.Column注解的的RetentionPolicy的属性值是RUTIME,这样注解处理器可以通过反射,获取到该注解的属性值,从而去做一些运行时的逻辑处理 2. 自定义注解: 使用@interfac ...
- 原型设计模式prototype-构造js自己定义对象
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- HDU 1429--胜利大逃亡(续)【BFS && 状态压缩】
胜利大逃亡(续) Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total S ...
- Linux GDB程序调试工具使用简单介绍
GDB概述 GDB是GNU开源组织公布的一个强大的UNIX下的程序调试工具.也许,各位比較喜欢那种图形界面方式的,像VC.BCB等IDE的调试,但假设你是在UNIX平台下做软件,你会发现GDB这个调试 ...
- 新手git: ssh: connect to host localhost port 22: Connection refused
由于gitlab上要git pull或者git clone,可是每次都出现这个问题.之前偶尔出现这个问题.可是仅仅是偶尔.这是为什么呢?然后就開始搜索网上的解决方式了. 这个问题搜索网上非常多答案.可 ...
- Windows 7下Git SSH 创建Key【待解决？】
1.在桌面右键,git bash here 2.检查本机是否有ssh key设置 $ cd ~/.ssh 或cd .ssh 如果没有则提示: No such file or directory:此时需 ...
- IOS 动态库问答
- Kinect for Windows SDK v2.0 开发笔记 (十五) 手势帧
(转载请注明出处) 使用SDK: Kinect for Windows SDK v2.0 public preview1409 同前面,由于SDK未完毕,不附上函数/方法/接口的超链接. 这次最 ...