jQuery EasyUI教程之datagrid应用(二)
上次写到了让数据库数据在网页datagrid显示,我们只是单纯的实现了显示,仔细看的话显示的信息并没有达到我们理想的效果,这里我们丰富一下:
上次显示的结果是这样的
点击查看上篇:jQuery EasyUI教程之datagrid应用(一)

这里不难发现生日的格式是毫秒(long型数据),并不是我们想要的年月日的格式,那我们就修改一下
我们在js中写入格式时间的方法,并在生日一列用formatter来调用方法格式时间,
//格式化时间
//把long型日期转为想要类型
function getDate(date)
{
//得到日期对象
var d = new Date(date) ; //得到年月日
var year = d.getFullYear() ;
var month = (d.getMonth()+ 1) ;
var day = d.getDate() ; //封装
var tt = year+"-"+(month<?"0"+month: month)+"-"+(day<10?"0"+day:day) ; return tt ;
}

此时,我们在查看页面,我们就发现生日栏变成我们想要的结果了

接下来就是分页了,原理 :datagrid有分页功能,我们只要把分页打开就好,当发送请求时,他会自己传递两个参数到Servlet,我们接受下再传递给dao,Hibernate也提供了分页功能,我们一结合就好了,
1.我们现在dao层修改下上次的代码,将参数传递过去
//查询联系人
public List<Phone> showAll(int page, int rows)
{
init() ; List<Phone> list = null ; String hql = "from Phone where 1=1 " ; list = se.createQuery(hql)
.setMaxResults(rows)
.setFirstResult((page - 1) * rows )
.list() ; destroy(); return list;
}
2.并且还要增加一个查询总数的方法
这里我们要查询总数,值得注意的是我们这用的是Object类型的List集合
//获取联系人记录条数
public int getTotal()
{
init() ; int rtn = 0 ; List<Object> list = null ; String hql = "select count(1) from Phone where 1=1 " ; list = se.createQuery(hql).list() ; if(list != null && list.size() > 0 )//判断获取的集合非空及长度
{
rtn = Integer.parseInt(list.get(0).toString()) ;//给变量rtn赋值
} destroy(); return rtn;
}
3.接下来我们再在service层修改下我们的方法,将记录的条数添加进去
public String getPageJSON(int page, int rows)
{
String rtn = "{\"total\":0,\"rows\":[ ]}";//定义变量并初始化JSON格式的结果集 PageJSON<Phone> pjson = new PageJSON<Phone>() ;//封装Rate类 int total = new PhoneDAO().getTotal() ; if(total > 0)
{
List<Phone> list = new PhoneDAO().showAll(page, rows) ;//定义List集合并赋值 String json_list = JSONArray.toJSONString(list) ; //将List集合转为JSON集合 /*
* 通过set方法给实例化的对象赋值
*/
pjson.setRows(list);
pjson.setTotal(total); rtn = JSONArray.toJSONString(pjson) ; //将对象JSON类型的数组
} return rtn ; //返回JSON类型的结果集
}
4.最后我们在修改下Servlet的doGet方法
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//转码
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html");
//接收请求
//1每页行数
String rows = request.getParameter("rows") ;
//2页码
String page = request.getParameter("page") ;
if(rows != null && page != null)//非空判断
{
int rowss = Integer.parseInt(rows) ;//类型转换
int pagess = Integer.parseInt(page) ;//类型转换
String json_list = new PhoneService().getPageJSON(pagess, rowss) ;//方法调用
response.getWriter().write(json_list) ;
}
else
{
response.getWriter().write("{\"total\":0,\"rows\":[ ]}") ;
}
}
到这里我们的分页功能就实现了。
下篇datagrid增删改
jQuery EasyUI教程之datagrid应用(二)的更多相关文章
- jQuery EasyUI教程之datagrid应用(三)
今天继续之前的整理,上篇整理了datagrid的数据显示及其分页功能 获取数据库数据显示在datagrid中:jQuery EasyUI教程之datagrid应用(一) datagrid实现分页功能: ...
- jQuery EasyUI教程之datagrid应用(一)
最近一段时间都在做人事系统的项目,主要用到了EasyUI,数据库操作,然后抽点时间整理一下EasyUI的内容. 这里我们就以一个简洁的电话簿软件为基础,具体地说一下datagrid应用吧 datagr ...
- jQuery EasyUI教程之datagrid应用
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- jQuery EasyUI教程之datagrid应用-1
一.利用jQuery EasyUI的DataGrid创建CRUD应用 对网页应用程序来说,正确采集和管理数据通常很有必要,DataGrid的CRUD功能允许我们创建页面来列表显示和编辑数据库记录.本教 ...
- jQuery EasyUI教程之datagrid应用-2
二.DataGrid的扩展应用 上一份教程我们创建的一个CRUD应用是使用对话框组件来增加或编辑用户信息.本教程将教你如何创建一个CRUD 数据表格(datagrid). 为了让这些CRUD功能正常工 ...
- jQuery EasyUI API - Grid - DataGrid [原创汉化官方API]
最近在学习jQuery EasyUI,发现中文的文档好少,部分文档不错但它是鸟语的,为了大家也为了自己学习吧,汉化做一下笔记. 有没有说清楚的,或者翻译不正确的地方还请大家谅解指出.. 由于工作时间原 ...
- 关于Jquery EasyUI中的DataGrid服务器端分页随记
一.关于DataGrid的分页和排序参数 对于分页参数不需要用户指定,程序在AJAX请求的时候会带上分页和排序需要的参数 每页显示条数:rows 当前页:page 排序字段:sort [multiS ...
- 【Jquery EasyUI + Servlet】DataGrid,url请求带中文出现乱码的解决方案
demo.jsp: <% String name = "乱码"; %> $(function(){ $('#dg').datagrid({ url: 'DemoServ ...
- jQuery基础教程之is()方法和has() 方法
is()方法 —— 用于筛选 语法: jQueryObject.is( expr )返回值: is()函数的返回值为Boolean类型.true或者false.只要其中至少有一个元素符合给定的表达式就 ...
随机推荐
- [Android Tips] 24. Gradle listing project dependencies
./gradlew app:dependencies or install this Android Studio Plugin https://github.com/rholder/gradle-v ...
- js实现文件上传
js function UpladFile() { var fileObj = document.getElementById("filetes").files[0]; // 获取 ...
- maven打包日志输出优化-去掉泛型与过时的警告
pom.xml配置 1.使用eclipse编译 <!-- Eclipse编译代码时,使用的是自带的JDT(Java Development Tools), 而Maven默认使用的是JAVA_HO ...
- ExtJs combobox模糊匹配
下拉列表模糊查询(重要代码): listeners : { beforequery : function(e) { var combo = e.combo; if(!e.forceAll){ var ...
- node 异步编程
node 异步编程 我了解到的node异步编程可分成: 1.回调函数 2.pub/sub模式(发布/订阅模式) 3.promise 4.generator 5.async await 一.直接回调函数 ...
- java 文件上传
java 上传文件 如果不依赖框架的话 要利用 Apache 中几个jar文件来处理 1. 给表单设置enctype属性,其值为 "multipart/form-data" ...
- 学习笔记:MySQL数据库初步 概念
数据库 什么是数据库,数据库就是对大量信息进行管理的高效的解决方案,按照数据结构来组织.存储和管理数据的载体.而我们常说的数据库可以分为关系型和非关系型数据库. 关系型数据库 这里说的关系型数据库,是 ...
- Zend框架设置数据库连接编码为utf8三种方法
第一种:$conn['host'] = '127.0.0.1';$conn['username'] = '56_' . $tenant['tenant'];$conn['password'] = $t ...
- 一个可拖拽的DIV框框
http://codepen.io/lrelia/pen/bEyLB 使用了JQuery UI库, draggable来自于JQuery UI库
- Vitrualbox虚拟机网络设置
来自http://www.douban.com/group/topic/15558388/ VirtualBox的提供了四种网络接入模式,它们分别是: 1.NAT 网络地址转换模式(NAT,Netwo ...