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,代码如 ...
随机推荐
- 【习题 4-9 UVA - 815】Flooded!
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 题目很迷啊. 不会出现盆地? 可以理解为一条线. 从左往右高度上升的一座座山. 然后V升的水从最左边的山倒进去. 然后问你最后海拔多 ...
- Feign 负载均衡
一.是什么 Feign 是一个声明式 WebService 客户端.使用 Feign 能让编写 Web Service 客户端更加简单,他的使用方法是定义一个接口,然后在上面添加注解.同时也支持 JA ...
- ACDream - Power Sum
先上题目: Power Sum Time Limit: 20000/10000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) S ...
- javaScript面向对象继承方法经典实现
转自原文javaScript面向对象继承方法经典实现 JavaScript的出现已经将近20多年了,但是对这个预言的褒贬还是众说纷纭.很多人都说JavaScript不能算是面向对象的变成语言.但是Ja ...
- WIN7通过批处理开启/禁用无线网卡
哥比較懒,直接上步骤: 1.看自己的电脑是否有devcon.exe 这个软件,能够直接在WINDOWS文件夹的SYSTEM32文件夹下面搜索.也能够通过命令行RUN-----------CMD---- ...
- 项目PMO工作
算起来.这是第一次以项目PMO人员的身份參与项目,尽管非常可惜没有从头參与,也没有參与到项目结束,仅仅有短短的两个月.但对项目PMO也可略窥一斑.如今就当个流水账写一写吧. 进项目组的时候,是中 ...
- Codeforces Round #253 (Div. 1)-A,B
A题: 由题意可知,最多翻10次就能够(事实上8次就够了).那么我们就用状态压缩表示状态. 对于某种状态,假设某一位为0,那么代表这一位不翻,否则代表这一位翻. 对于某一种翻的状态: 假设牌中有G3, ...
- HDU-5310-Souvenir(C++ && 简单数学题)
Souvenir Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 262144/262144 K (Java/Others) Total ...
- windows XP下Python2.7包管理工具安装-setuptool，pip、distribute、nose、virtualenv
在Python开发中为了对项目进行管理和调试.必须安装一些特定的软件包.据说业内这个叫做yak shaving-做一个非常酷非常绚丽的Python项目之前,必须做的一些枯燥无味的准备工作.本文介绍了s ...
- margin 百分比是按參照物来计算滴 不知道吧?
<style> #demo{ margin: 0 auto; width: 1000px; height: 500px; background: #eee; overflow: hidde ...