easyui实现分页
主要参考官方的文档,欢迎评论
1、集成easyui,下面是我的引入方式,我引入到了head.html 每次只要引入该页面就可以了。
<!-- easyui样式支持 -->
<link rel="stylesheet" type="text/css" href="${basePath}/plugins/jquery-easyui-1.7.0/themes/default/easyui.css">
<!-- easyui图标支持 -->
<link rel="stylesheet" type="text/css" href="${basePath}/plugins/jquery-easyui-1.7.0/themes/icon.css">
<!-- 引入jquery -->
<script type="text/javascript" src="${basePath}/plugins/jquery-easyui-1.7.0/jquery.min.js"></script>
<!-- easyui功能支持 -->
<script type="text/javascript" src="${basePath}/plugins/jquery-easyui-1.7.0/jquery.easyui.min.js"></script>
<!-- easyui中文支持 -->
<script type="text/javascript" src="${basePath}/plugins/jquery-easyui-1.7.0/locale/easyui-lang-zh_CN.js"></script>
2、html页面
引入head.html
<head>
<title>厂区信息</title>
<#include "../include/head.html">
</head>
<body>
<table id="dg" title="厂区信息"></table>
<script>
$(function () {
init_datagrid();
});
function init_datagrid() {
//默认第一页,
var pageNumber = 1;
//每页显示10行
var pageSize = 10;
//表头字段
var arr_columns = dg_columns();
//datagrid名称
var title_name= "园区信息";
$("#dg").datagrid({
title: title_name,
url: '${basePath}/factory/datagrid',
method: 'post',
singleSelect: true,
remoteSort: true, //定义从服务器对数据进行排序。
pagination: true, //在DataGrid控件底部显示分页工具栏。
pageNumber: pageNumber,
pageSize: pageSize,
pageList: [5,10,15,20],
fitColumns:true,
columns: [arr_columns],
rownumbers: true,
loadMsg: '正在加载数据',
checkbox: true,
emptyMsg: '列表为空',
selectOnCheck: false,
checkOnSelect: false
});
}
function dg_columns() {
var arr = new Array();
arr.push({field: 'factoryCode', title: '厂区编码', width: $(this).width() * 0.5, align: 'center'});
arr.push({field: 'factoryName', title: '厂区名称', width: $(this).width() * 0.5, align: 'center'});
arr.push({field: 'factoryAddress', title: '厂区地址', width: $(this).width() * 0.5, align: 'center'});
arr.push({field: 'company', title: '所属公司', width: $(this).width() * 0.5, align: 'center'});
return arr;
}
</script>
</body>
写本页面时建议将init_datagrid()封装成一个通用方法,写入相应的参数,以实现方法的复用,减少代码的重复
3.java后台
注意前台需要接收的数据格式为:
{"total":8,"rows":[{"factoryCode":"E-01","factoryName":"111111","id":"1"},{"factoryCode":"E-02","factoryName":"222222","id":"2"}]}数据涉密顾不能贴出
所以我们的目的就是将查询出来的数据写成上述json格式
/**
* 加载easyuidatagrid 数据
* @param request
* @return
*/
@ResponseBody
@RequestMapping("/datagrid")
public JSONObject datagrid(HttpServletRequest request){
int pageNumber = Integer.parseInt(request.getParameter("page")); //获取当前页码,easyui默认传到后台
int pageSize = Integer.parseInt(request.getParameter("rows")); //获取每页显示多少行,easyui默认传到后台
int count = mdmFactoryInfoService.count();
List<MdmFactoryInfo> factoryList = mdmFactoryInfoService.selectPage(pageNumber*pageSize,(pageNumber-1)*pageSize);
System.out.println(CommonUtil.toGridJson(count,factoryList));
return CommonUtil.toGridJson(count,factoryList);
}
CommonUtil代码
/**
* 转为datagrid json
*/
public static JSONObject toGridJson(int totalCount, Object obj) {
if(null==obj){
JSONObject jsonResult = new JSONObject();
jsonResult.put("total",totalCount);
jsonResult.put("rows",new JSONArray());
return jsonResult;
}
if(!Collection.class.isAssignableFrom(obj.getClass())) {
JSONObject jsonResult = new JSONObject();
jsonResult.put("total", totalCount);
jsonResult.put("rows", new JSONArray());
return jsonResult;
}
String json = JSON.toJSONString(obj);
JSONObject jsonResult = new JSONObject();
jsonResult.put("total", totalCount);
jsonResult.put("rows", obj);
return jsonResult;
}
数据层我用的mybatis,这里主要注意的是要分页查询的sql,我用的是oracle。
分页查询sql
<select id="selectPage" parameterType="java.lang.Integer" resultMap="BaseResultMap">
SELECT * FROM ( SELECT ROWNUM rn , M.* FROM MDM_FACTORY M WHERE Rownum <= #{firstIndex,jdbcType=INTEGER}) WHERE rn > #{pageSize,jdbcType=INTEGER}
</select>
数据总量sql
<select id="count" parameterType="java.lang.String" resultType="java.lang.Integer">
select count(*) from MDM_FACTORY
</select>
以上结束后展示一下页面
以上有错误欢迎指正
easyui实现分页的更多相关文章
- EasyUI DataGrid分页数据绑定
记录东西感觉很痛苦,总结东西很痛苦,麻烦,不过为了下次的方便和知识的牢固以后要坚持总结. EasyUI DataGrid分页数据绑定 在解决方案中新建两个文件FormMain.aspx(html也可以 ...
- EasyUI datagrid 分页Json字符串格式
//EasyUI datagrid 分页Json字符串格式 //{"total":xx,"rows":[{...},{...}]} total:总数 rows: ...
- easyUI的分页,只显示第X 共Y页。改为显示 第X 页 共Y页
如下图,easyUI的分页,只显示第X 共Y页. 需求需要显示 第X 页 共Y页. 解决办法:在easyui-lang-zh_CN.js更改以下代码,即可.也就是在 “共{pages}页”前面加个 “ ...
- asp.net mvc easyui datagrid分页
提到 asp.net mvc 中的分页,很多是在用aspnetpager,和easyui datagrid结合的分页却不多,本文介绍的是利用easyui 中默认的分页控件,实现asp.net mvc分 ...
- easyUI datagrid 分页参数page和rows
Struts2获取easyUI datagrid 分页参数page和rows 用pageHelper分页时,只要是能够获取前台传来的两个参数page和rows基本就完成了很大一部分. 获取方法:定义两 ...
- EasyUI Datagrid 分页显示(客户端)
转自:https://blog.csdn.net/metal1/article/details/17536185 EasyUI Datagrid 分页显示(客户端) By ZYZ 在使用JQuery ...
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(8)-MVC与EasyUI DataGrid 分页
系列目录 前言 为了符合后面更新后的重构系统,文章于2016-11-1日重写 EasyUI Datagrid在加载的时候会提交一些分页的信息到后台,我们需要根据这些信息来进行数据分页再次返回到前台 实 ...
- EasyUI 页面分页
DAO package com.hanqi.dao; import java.util.ArrayList; import java.util.List; import org.hibernate.S ...
- JQuery easyui Datagrid 分页事件
easyui是Jquery中的一个轻量级UI插件,提供了一些诸如window.datagrid.button等控件.现在主要说说Datagrid中分页控件的使用. easyui中可以单独添加分页pag ...
- EasyUI DataGrid 分页实现示例
使用easyui可以很方便的开发web程序,这儿仅展示一个后台使用mvc来实现分页的示例,截图如下 示例代码如下 1. 创建模型类,代码如下 using System; using System.Co ...
随机推荐
- 实战web前端之:Bootstrap框架windows下安装与使用
Bootstrap是前端开发中比较受欢迎的框架,简洁且灵活.它基于HTML.CSS和JavaScript,HTML定义页面元素,CSS定义页面布局,而JavaScript负责页面元素的响应.Boots ...
- Genymotion Android模拟器Genymotion的安装和使用
Android模拟器Genymotion的安装和使用 by:授客 QQ:1033553122 环境: Win7 Genymotion 2.12.0 下载地址:http://download.canad ...
- 关于RecyclerView嵌套导致item复用异常,界面异常的问题
常规需求: 外层RecyclerView嵌套内层RecyclerView , 在上下滑动的时候会出现item数据以及view的显示异常. 解决办法: 1.重写 getItemViewType 方法 ...
- 2017-12-24 为新语言编写Visual Studio Code语法高亮插件
本文源码库: program-in-chinese/quan4-highlighter 语法高亮是一个开发环境的基本功能. 此文尝试为之前的"圈4"语言(详见编程语言试验之Antl ...
- PMBook - 以考PMP为项目,整理项目章程
一.以考PMP为项目,整理项目章程 二.PMBook 制定项目章程:输出 参考资料:<PMBook第六版> 作 者: Jackson0714 出 处:http://www.cnblogs. ...
- NuGet 手动清除缓存不起作用
问题 有时更新了一些内网的程序库/包,但仅仅是一些小的更改,不想增加版本号再推送到内网服务器.手动删除了 .nuget 文件夹下的相关包文件,但是使用 Visual Studio 重新构建的时候,其使 ...
- ASP.NET Core WebApi中使用FluentValidation验证数据模型
原文链接:Common features in ASP.NET Core 2.1 WebApi: Validation 作者:Anthony Giretti 译者:Lamond Lu 介绍 验证用户输 ...
- MATLAB程序:用FCM分割脑图像
MATLAB程序:用FCM分割脑图像 作者:凯鲁嘎吉 - 博客园http://www.cnblogs.com/kailugaji/ 脑图像基础知识请看:脑图像:FCM算法介绍请看:聚类——FCM:数据 ...
- 10分钟明白对偶建模法 / +Leampms的“主模型建模”和“对偶模型建模” 之 —— 三类最短路径问题
摘要 对偶模型建模是非常有独特的一种建模方式 —— 当问题本身要求指标极小的情况下,对偶模型表现为求极大.本文给出三种最短路径问题的线性规划/混合整数规划模型,其中的第三类最短路径问题采用对偶建模方法 ...
- confd+etcd实现高可用自动发现
Confd是什么 Confd是一个轻量级的配置管理工具. 通过查询后端存储,结合配置模板引擎,保持本地配置最新,同时具备定期探测机制,配置变更自动reload. 对应的后端存储可以是etcd,redi ...