使用Struts2和jQuery EasyUI实现简单CRUD系统(七)——数据分页处理
上篇完毕多选删除的功能之后,接下来就是做分页功能了。曾经的分页是一个麻烦的问题。并且数据量巨大的时候,直接把这些元素取出来显然速度较慢,所以取一定区间的数据还是高效的。
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvaWFpdGk=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" height="492" width="698" />
之前自己写分页的时候,分页的界面当然是自己做的,用了ejui之后。真的方便了许多。方便到什么程度了。
<table id="dg" title="My Users" class="easyui-datagrid"
style="width: 700px; height: 500px" url="list_ej" toolbar="#toolbar"
rownumbers="true" fitColumns="true" >
<thead>
<tr>
<!-- 这样的写法也是能够的
<th field="id" width="50">id</th>
<th field="name" width="50">name</th>
<th field="password" width="50">password</th> -->
<th field="ck" checkbox="true"></th>
<th data-options="field:'id',width:'200px'">id</th>
<th data-options="field:'name',width:'200px'">name</th>
<th data-options="field:'password',width:'200px',align:'right'">password</th>
</tr>
</thead>
</table>
仅仅须要在属性里面加入:
pagination="true" pageNumber ="1"
pagination是在底部显示分页工具栏。pageNumber是原始的显示的页数。第几页。
难点在于后台数据要怎么传过去。
在没和后台正确处理页数和每页显示的数据数的关系时,是所有显示的。可是选择页面数的时候ejui还是会正确地帮你跳到详细的页数。但这显然不是我们想要的。
后面在思路上就卡住了。我要怎么将分页栏的数据传到action里面呢?
解决的方法是,直接由rows和page属性。分别相应一页显示的数据条数和当前页数,仅仅须要在action里面声明为全局变量,并写出相应的get和set方法。
public class ControlAction extends ActionSupport{
private int rows;
private int page;
public int getRows() {
return rows;
}
public void setRows(int rows) {
this.rows = rows;
}
public int getPage() {
return page;
}
public void setPage(int page) {
this.page = page;
}
拿到之后容易处理。我们能够写一个封装的方法将拿到的页数和条数。对数据库操作并转换为json串。
public String list_ej(){
ActionContext ctx=ActionContext.getContext();
String result="";
result= PageUtil.getPage(page, rows);
try {
// ServletActionContext.getResponse().getWriter().println(JSONArray.fromObject(list));
ctx.put("json", result);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
return "success";
}
PageUtil.java
package util; import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.ArrayList;
import java.util.List; import net.sf.json.JSONArray;
import net.sf.json.JSONObject; public class PageUtil {
public static String getPage(int pagenumber,int rows){
String result = "";
int count = 0;
int number = 0;
Connection c = ConnectToSQL.getConn();
Statement st = ConnectToSQL.getSt(c);
List<User> list = new ArrayList<User>();
try {
ResultSet countrs = st.executeQuery("select count(*) from user");
countrs.next();
//
//System.out.println(countrs.getInt(1));
count = countrs.getInt(1);
} catch (SQLException e1) {
e1.printStackTrace();
}
if(count%rows==0){
number =count/rows;
}else{
number = count/rows+1;
}
//
//System.out.println(number);
try {
int index = 0;
if(pagenumber-1>0){
index = (pagenumber-1)*rows-1;
}
ResultSet rs = st.executeQuery("select * from user limit "+index+","+rows); while(rs.next()){
User u = new User();
u.setId(rs.getInt("userid"));
u.setName(rs.getString("username"));
u.setPassword(rs.getString("password"));
list.add(u);
}
} catch (SQLException e) {
e.printStackTrace();
} //这个把list看成数组,用json格式输出 仅仅是输出list
List<User> o = JSONArray.fromObject(list); //无需字符串拼接
//String result = "{\"total\":"+count+",\"rows\":"+s+"}"; //接下来的是吧整个对象转json格式 对象有两个属性 total和rows属性 而rows里面又是一个数组
JSONObject jo = new JSONObject();
jo.put("total", count);
jo.put("rows", list);
result = jo.toString();
return result;
}
}
ejui和struts2好用在哪里呢,ejui仅仅须要接受到所有的数据条数和当前页的数据就是rows:后面的json数据,它会自己主动填充到DataGrid中。
{"total":5,"rows":[{"id":1277,"name":"df2","password":"123"},
{"id":1278,"name":"45ty","password":"123"},
{"id":1279,"name":"sdfy","password":"123"},
{"id":1280,"name":"345356","password":"p"},
{"id":1281,"name":"werwer","password":"twer"}]}
而一旦ejui的rows和page改变,
一旦你选择page和rows,是通过ajax将数据传递过去,然后DataGrid局部刷新。
它有会把參数传递给url,而struts本身通过get和set方法定义这两个属性之后又能取到这两个值,所以很方便。
也很强大,界面美观。
这个简单的CRUD系统功能大体完毕,可是显然自己在JSON和EasyUI的掌握方面还不熟悉。
这个还是要多练练。
项目github地址:https://github.com/iaiti/EasyUI-Struts2.git
将java代码和jsp页面代码分离。新建了分支version2.0。
使用Struts2和jQuery EasyUI实现简单CRUD系统(七)——数据分页处理的更多相关文章
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(转载汇总)
使用Struts2和jQuery EasyUI实现简单CRUD系统(一)——从零开始,ajax与Servlet的交互 使用Struts2和jQuery EasyUI实现简单CRUD系统(二)——aja ...
- 使用Struts2和jQuery EasyUI实现简单CRUD系统(五)——jsp,json,EasyUI的结合
这部分比較复杂,之前看过自己的同学开发一个选课系统的时候用到了JSON,可是一直不知道有什么用.写东西也没用到.所以没去学他.然后如今以这样的怀着好奇心,这是做什么用的,这是怎么用的.这是怎么结合的心 ...
- 闲来无事做了一个项目,内有redis,EasyUI样式简单应用,七层分页查询,API跨域。
<link href="~/jquery-easyui-1.5.3/themes/default/easyui.css" rel="stylesheet" ...
- jQuery EasyUI 应用 – 创建 CRUD 应用(表格)
jQuery EasyUI 应用 - 创建 CRUD 应用 本节介绍如何创建CRUD应用. CRUD分别是指在做计算处理时的增加(Create).读取查询(Retrieve).更新(Update)和删 ...
- jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
- 雷林鹏分享:jQuery EasyUI 表单 - 过滤下拉数据网格
jQuery EasyUI 表单 - 过滤下拉数据网格 下拉数据网格(Combogrid)组件和下拉框(Combobox)组件的共同点是,除了都具有下拉面板以外,它们都是基于数据网格(Datagrid ...
- (转)扩展jquery easyui datagrid 之动态绑定列和数据
本文转载自:http://blog.csdn.net/littlewolf766/article/details/7336550 easyui datagrid 不支持动态加载列,上次使用的方法是自己 ...
- Struts2第十一篇【简单UI标签、数据回显】
Struts2UI标签 Sturts2为了简化我们的开发,也为我们提供了UI标签-也就是显示页面的标签-.. 但是呢,Struts2是服务端的框架,因此使用页面的标签是需要在服务器端解析然后再被浏览器 ...
- Jquery EasyUI +Ajax +Json +一般处理程序 实现数据的前台与后台的交互 --- 善良公社项目
经过上一篇博客,本节主要是来看实现的功能是后台的数据通过json数据传过来,前台修改的数据再传回数据库之后页面再次更新table中的数据: 图示: 实例:前台的代码 <%--表格显示区--%&g ...
随机推荐
- 紫书 习题 10-44 UVa 11246 ( 容斥原理)
把k的倍数的删去(k, 2k, 3k--),但是k^2不应该删去,因为k已经删去,所以不存在某个数乘上k之后为k^2 所以k^2可以留下,然后因为有k^2,所以k^3就是k^2的k倍,所以k^3要删去 ...
- Http协议简介【转】
HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...
- MyBatis自动生成代码之generatorConfig配置文件及其详细解读
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE generatorConfiguratio ...
- 60.浅谈nodejs中的Crypto模块
转自:https://www.cnblogs.com/c-and-unity/articles/4552059.html node.js的crypto在0.8版本并没有改版多少,这个模块的主要功能是加 ...
- css 浮动 绝对定位 和 相对定位
html是按照文件流(文档流)的方式加载的,但是全部是文档流的话,很多好看的样式是实现不了的,所以出现了浮动,相对定位,绝对定位的概念. 一.首先,按照文档流和非文档流来分类: ①文档流:就是按照上下 ...
- AIX设备四种状态
AIX设备四种状态: Undefined(未定义):表示系统无法识别该设备,也就是系统无法找到该设备.(驱动无法识别) Defined(定义):表示系统可以识别设备,信息保存在ODM,但是系统不能使用 ...
- android图像处理系列之五--给图片添加边框(中)
前面一篇讲到给图片加边框的方式,只能给图片加一些有规则的边框,如果想加一些比较精美的效果,就有点麻烦了.下面就给出解决这个问题的思路. 思路是:一些比较精美的花边图片我们是很难用代码控制,就目前本人水 ...
- Dcloud课程9 天气小助手如何实现
Dcloud课程9 天气小助手如何实现 一.总结 一句话总结:调用天气的接口,如果网上找不到好用的,而如果仅仅是测试,那就自己写一个简单的接口就可以了. 1.dcloud中的css样式怎么调? 和网页 ...
- mobx项目创建 + mobx项目流程代码
一. 安装mobx 1. react 安装并 reject抽离配置 1. 全局安装 create-react-app 这个脚手架 npm/cnpm i create-react-app -g yarn ...
- 前端项目中常用es6知识总结 -- Promise逃脱回调地狱
项目开发中一些常用的es6知识,主要是为以后分享小程序开发.node+koa项目开发以及vueSSR(vue服务端渲染)做个前置铺垫. 项目开发常用es6介绍 1.块级作用域 let const 2. ...