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,代码如 ...
随机推荐
- QT5.4.1在ARM开发板上不能显示汉字
在linux下正常的程序,移植到ARM上,中文不能显示.网上好多介绍,一头雾水.查看其中话题是关于中文显示的(http://www.qtcn.org/bbs/simple/?t55852.html). ...
- 炒了8年的概念，到底该如何理解DevOps这个词？
什么是DevOps及误区 DevOps概念从2009年提出已有8个年头.可是在8年前的那个时候,为什么DevOps没有迅速走红呢?即便是在2006年Amazon发布了ECS,微软在2008年和2010 ...
- Spring Boot 定时任务单线程和多线程
Spring Boot 的定时任务: 第一种:把参数配置到.properties文件中: 代码: package com.accord.task; import java.text.SimpleDat ...
- MySQL Workbench常用快捷键及修改快捷键的方法
常用快捷键: 1.执行整篇sql脚本:[Ctrl]+[Shift]+[Enter] 2.执行当前行:[Ctrl]+[Enter] 3.注释/取消注释:[Ctrl]+[/] 4.格式化sql语句(美化s ...
- 50套html站点模板，涵盖非常多行业，各种类型html站点，各种行业html站点模板下载
50套html站点模板,涵盖非常多行业,各种类型html站点.各种行业html站点模板下载 所以模板都在共享文件中面QQ群 139639813 ,快下载吧.
- D 分组背包
<span style="color:#3333ff;">/* ---------------------------------------------------- ...
- c19---指针和字符串
// // main.c // 指针和字符串 // // Created by xiaomage on 15/6/14. // Copyright (c) 2015年 xiaomage. All ri ...
- SRV记录用来标识某台服务器使用了某个服务，常见于微软系统的目录管理——深入的话需要去折腾Azure Active Directory
SRV记录 SRV记录 什么情况下会用到SRV记录? [SRV记录用来标识某台服务器使用了某个服务,常见于微软系统的目录管理] SRV记录的添加方式 A.主机记录处格式为:服务的名字.协议的类型 例如 ...
- Jsoup的简单的使用示例
利用Jsoup中的相关方法实现网页中的数据爬去,本例子爬去的网页为比较流行的programmableweb中的mashup描述内容,然后为数据库中存在的mashup添加相应的描述. package c ...
- BZOJ 1485 卡特兰数 数学
思路: 通过打表观察 这是个卡特兰数 但是它mod的数不是质数 怎么办呢 把所有数分解质因数好了 线性筛出mindiv 顺着mindiv分解质因数 复杂度$O(nlogn)$ //By Sirius ...