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,代码如 ...
随机推荐
- 【Codeforces 229B】Planets
[链接] 我是链接,点我呀:) [题意] [题解] 设dis[i]表示到达i号传送器的最早时刻. 显然,虽然有那么多的出发时刻的限制,但我们还是越早到越好的. 因为你到得越早,出发的时间肯定不会比到达 ...
- （9）使用JdbcTemplate【从零开始学Spring Boot】
整体步骤: (1) 在pom.xml加入jdbcTemplate的依赖: (2) 编写DemoDao类,声明为:@Repository,引入JdbcTemplate (3) 编写DemoS ...
- js setTimeout函数
最近在看JS DOM编程艺术,在第十章的动画里面有个setTimeout函数的例子中涉及了很多的引号,研究了好大一会才看明白,综合网上各个大神的解释和自己的理解,其原理是这样的: 首先看下程序源代码: ...
- 洛谷 P1535 游荡的奶牛
P1535 游荡的奶牛 题目描述 Searching for the very best grass, the cows are travelling about the pasture which ...
- installed jre指向jdk而非jre位置&
1.eclipse菜单 - Window - Preferences- Java - Installed JREs 将配置的JRE定位到JDK,例如JRE home:D:\Program Files ...
- Windows下搭建ffmpeg+VS2008开发环境详细教程【转】
本文转载自:http://www.voidcn.com/article/p-vxdntdgc-bkq.html 由于个人是从事音视频开发相关的工作,所以也把自己的一些过程写下来,方便大家以及自己查看, ...
- hdoj--1083--Courses（最大匹配）
Courses Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total ...
- Dvwa安装，配置（Linux）
文章演示使用系统:CenTOS7 一:搭建LAMP环境 使用XAMPP安装部署,下载地址:https://www.apachefriends.org/download.html 1.1:赋予账号对XA ...
- ComboxBox控件、checklistbox控件和listbox控件的组合开发
第一步:先创建一个WinForm窗体应用程序,按照下图所示的进行布局. 第二步:为ComboxBox控件.checklistbox控件和listbox控件和button控件设置属性 第三步:在代码中的 ...
- VS2015启动显示无法访问此网站
之前启动项目发生过几次,也忘了怎么解决了,今天记录一下:将应用文件夹下的vs目录删除,重新生成解决方案后,程序正常启动. 原文链接:https://blog.csdn.net/upi2u/articl ...