easyui+themeleaf 分页查询实现
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>订单列表</title>
<div th:replace="head"></div>
</head>
<body width="100%" height="100%" class="easyui-layout">
<div id="mydialog" style="display:none;padding:5px;width:400px;height:200px;" title="请输入退款金额">
退款金额：<input id="order_amount" style="height: 20px" type="text" class="easyui-validatebox" required="true"/>
</div>
<div id="addWin"></div>
<div data-options="region:'center'">
<div align="center" id="centerInfo">
分销商id:<input type="text" id="sellersId" class="easyui-textbox"/>
门店id:<input type="text" id="storeId" class="easyui-textbox"/>
开始时间：<input id="startTime" name="startTime" class="easyui-datetimebox" editable="false"/>
结束时间：<input id="endTime" name="endTime" class="easyui-datetimebox" editable="false"/>
状态：<select id="showStatus"><!--0未支付 1订单完成 10支付成功未发货-->
<option value="1" selected="selected">订单完成</option>
<option value="0">未支付</option>
<option value="10">支付成功未发货</option>
</select>
<input id="button" type="button" value="查询" class="easyui-linkbutton c4" style="width:90px;height: 26px"
onclick="Search()"/>
<input id="info" type="button" value="详情" class="easyui-linkbutton c4" style="width:90px;height: 26px"
onclick="info()"/>
<input value="微信退款" type="button" id="refund" class="easyui-linkbutton" style="width:90px;height: 26px"
onclick="refund()"/>
</div>
<table id="orderDetailListTable" style="width: 100%;height: 100%"></table>
</div>
</body>
<script th:inline="javascript">
//<![CDATA[
jQuery(document).ready(function () {
getLoad();
});
function getLoad() {
//加载数据网格
var param = {}
$('#orderDetailListTable').datagrid({
fitColumns: true,
striped: true,
method: 'get',
url: "orderDetail/orderDetailListInfo",
loadMsg: '数据加载中...',
emptyMsg: '暂无订单！',
rownumbers: true,
pagination: true,
pageNumber: 1,
pageList: [5, 10, 20, 25],
pageSize: 20,
queryParams: param,
singleSelect: true,
columns: [[
{field: 'sellersId', title: '分销商id', width: '3%', algin: 'center'},
{field: 'storeId', title: '门店id', width: '3%', algin: 'center'},
{
field: 'showStatus', title: '订单状态', width: '5%', align: 'center',
formatter: function (value) {
if (value == null || value == "") {
return "";
} else {//0未支付 1订单完成 10支付成功未发货
if (value == '0') {
return "未支付";
} else if (value == '1') {
return "订单完成";
} else if (value == '10') {
return "支付成功未发货";
}
}
}
},
{field: 'orderNo', title: '订单号', width: '10%', algin: 'center'},
{field: 'goodsId', title: '产品id', width: '7%', algin: 'center'},
{field: 'goodsName', title: '产品名称', width: '7%', algin: 'center'},
{
field: 'sellersCost', title: '分销商成本价(元)', width: '7%', align: 'center',
formatter: function (val) {
if (val != null)
return val.toFixed(2);
}
},
{
field: 'sellersCostTotal', title: '分销商总成本价(元)', width: '7%', align: 'center',
formatter: function (val) {
if (val != null)
return val.toFixed(2);
}
},
{
field: 'storeCost', title: '门店成本价(元)', width: '7%', align: 'center',
formatter: function (val) {
if (val != null)
return val.toFixed(2);
}
},
{
field: 'storeCostTotal', title: '门店总成本价(元)', width: '7%', align: 'center',
formatter: function (val) {
if (val != null)
return val.toFixed(2);
}
},
{field: 'buyCount', title: '订购数量', width: '4%', align: 'center'},
{
field: 'amountRealpay', title: '支付总价', width: '4%', align: 'center',
formatter: function (val) {
if (val != null)
return val.toFixed(2);
}
},
{field: 'openid', title: '订购人openid', width: '6%', align: 'center'},
{
field: 'createTime', title: '订购时间', width: '10%', align: 'center',
formatter: function (value) {
if (value == null || value == "") {
return "";
} else {
var unixTimestamp = new Date(value);
return unixTimestamp.Format("yyyy-MM-dd hh:mm:ss");
}
}
},
{
field: 'payTime', title: '支付时间', width: '10%', align: 'center',
formatter: function (value) {
if (value == null || value == "") {
return "";
} else {
var unixTimestamp = new Date(value);
return unixTimestamp.Format("yyyy-MM-dd hh:mm:ss");
}
}
}
]], }) } // 新增
function addUpSells() {
var $win;
$win = $('#addWin').window({
title: '新增门店',
href: "upSellStore/storeAddView/",
width: 720,
height: 550,
shadow: true,
modal: true,
iconCls: 'icon-add',
closed: true,
minimizable: false,
maximizable: false,
collapsible: false
}); $win.window('open');
}
function isEmpty(obj) {
return obj == null || obj == '' || obj == 'undefined';
}
//条件查询
function Search() {
var startTime = $("#startTime").datetimebox('getValue');
var endTime = $("#endTime").datetimebox('getValue');
var showStatus = $("#showStatus").val();
if (!isEmpty(startTime) && !isEmpty(endTime) && startTime > endTime) {
$.messager.alert("错误提示", "开始日期不能大于结束日期", "error")
return;
}
var grid = $('#orderDetailListTable');
var curPageNum = grid.datagrid('getPager').data("pagination").options.pageNumber;
var rows = grid.datagrid('getPager').data("pagination").options.pageSize; var sellersId = $("#sellersId").val();
var storeId = $("#storeId").val();
alert(storeId);
if (!isEmpty(sellersId) && !isEmpty(storeId)) {
$.messager.alert("错误提示", "分销商id和门店id只能输入一个", "error")
return;
}
var isSearch;//查询时是否含有门店id
if (isEmpty(sellersId)) {
isSearch = 0;
} else {
isSearch = 1;
}
$('#orderDetailListTable').datagrid('options').queryParams = {
'startTime': startTime,
'endTime': endTime,
"page": curPageNum,
"rows": rows,
"sellersId": sellersId,
"storeId": storeId,
"showStatus": showStatus,
"isSearch": isSearch
};
$('#orderDetailListTable').datagrid('reload');
/* var param = {
'startTime': startTime,
'endTime': endTime,
"page": curPageNum,
"rows": rows,
"sellersId": sellersId,
"storeId": storeId,
"showStatus": showStatus,
"isSearch": isSearch
}
$.post("orderDetail/orderDetailListInfo", param, function (data) {
$("#orderDetailListTable").datagrid('loadData', data);//加载本地数据，旧的行将被移除;下一页导致查询条件丢失；
})*/
}
//微信退款
function refund() {
var order_no = '';
//审核该选中用户
var rows = $('#orderDetailListTable').datagrid('getSelections');
if (rows.length < 1) {
$.messager.alert('操作提示', '请选择一条订单');
return false;
} else {
order_no = rows[0].orderNo;
}
$("#order_amount").val(rows[0].amountRealpay);
$('#mydialog').show();
$('#mydialog').dialog({
buttons: [{
text: '提交',
iconCls: 'icon-ok',
handler: function () {
var amount = $("#order_amount").val() * 1; if (isEmpty(amount)) {
$.messager.alert('操作提示', '金额不能为空');
return false;
}
if (isNaN(amount)) {
$.messager.alert('操作提示', '请输入正确的金额');
return false;
}
if (amount > rows[0].amountRealpay * 1) {
$.messager.alert('操作提示', '退款金额大于支付金额');
return false;
}
MaskUtil.mask("正常处理，请稍等。。。");
$.ajax({
url: 'orderDetail/applyRefund',
data: {
"order_no": order_no,
"refund_amount": $("#order_amount").val()
},
type: 'post',
cache: false,
dataType: 'json',
success: function (data) {
if (data.resultCode == "00") {
MaskUtil.unmask();
$.messager.alert('操作提示', '成功提交退款申请，请等待财务审核');
$('#mydialog').dialog('close');
$("#order_amount").val('');
$('#ListTable').datagrid('reload');
} else if (data.resultCode == "111") {
MaskUtil.unmask();
$.messager.alert(data.resultMsg);
$('#mydialog').dialog('close');
$("#order_amount").val('');
$('#ListTable').datagrid('reload');
} else {
MaskUtil.unmask();
$.messager.alert('操作提示', '操作失败，请联系管理员');
$('#mydialog').dialog('close');
$("#order_amount").val('');
$('#ListTable').datagrid('reload');
}
},
error: function () {
MaskUtil.unmask();
$.messager.alert('操作提示', '操作失败，请联系管理员');
$('#mydialog').dialog('close');
$("#order_amount").val('');
}
});
}
}, {
text: '取消',
handler: function () {
$('#mydialog').dialog('close');
$("#order_amount").val('');
}
}]
});
} //订单详情
function info() {
var a = $('#orderDetailListTable').datagrid('getSelected');
if (!a) {
$.messager.alert('提示', "请选择一条订单");
} else {
var $win;
$win = $('#addWin').window({
title: '订单详情',
href: "orderDetail/orderInfoView?id=" + a.id,
width: 720,
height: 550,
shadow: true,
modal: true,
iconCls: 'icon-edit',
closed: true,
minimizable: false,
maximizable: false,
collapsible: false
});
$win.window('open');
}
}
//]]>
</script>
</html>
需要导入pagehelper相关jar包。
<dependency>
<groupId>com.github.pagehelper</groupId>
<artifactId>pagehelper</artifactId>
<version>4.1.1</version>
</dependency>
后台代码controller：
/**
* 加载订单列表信息
*
* @param page
* @param rows
* @return
*/
@RequestMapping("/orderDetailListInfo")
@ResponseBody
public EUDataGridResult orderDetailListInfo(@RequestParam(required = false, defaultValue = "1") Integer page,
@RequestParam(required = false, defaultValue = "10") Integer rows,
@RequestParam(value = "startTime", required = false) String startTime,
@RequestParam(value = "endTime", required = false) String endTime,
@RequestParam(value = "sellersId", required = false) Integer sellersId,
@RequestParam(value = "storeId", required = false) Integer storeId,
@RequestParam(value = "showStatus", required = false) Integer showStatus,
@RequestParam(value = "isSearch", required = false, defaultValue = "0") Integer isSearch
) {
Map<String, Object> param = new HashMap<>();
param.put("startTime", startTime);
param.put("endTime", endTime);
param.put("sellersId", sellersId);
param.put("storeId", storeId);
param.put("showStatus", showStatus);
param.put("isSearch", isSearch);//为1时是查询门店为null的情况；
EUDataGridResult result = sqrOrderDetailService.findByPage(param, page, rows);
return result;
}
service层：
public EUDataGridResult findByPage(Map<String, Object> param,int page, int rows) {//分页处理
PageHelper.startPage(page, rows);
List<SqrOrderDetailVo> list = sqrOrderDetailMapper.findByPageByMap(param);//查询对象实体集合
//创建一个返回值对象
EUDataGridResult result = new EUDataGridResult();
result.setRows(list);
//取记录总条数
PageInfo<SqrOrderDetailVo> pageInfo = new PageInfo<>(list);
result.setTotal(pageInfo.getTotal());
return result;
}
分页返回对象：
import java.util.List; /**
* Created by admin on 2017/11/30.
*/
public class EUDataGridResult { private long total;//数据总条数
private List<?> rows;//对象集合 public long getTotal() {
return total;
}
public void setTotal(long total) {
this.total = total;
}
public List<?> getRows() {
return rows;
}
public void setRows(List<?> rows) {
this.rows = rows;
}
}
easyui+themeleaf 分页查询实现的更多相关文章
- SpringMVC+MyBatis+EasyUI 实现分页查询
user_list.jsp <%@ page import="com.ssm.entity.User" %> <%@ page pageEncoding=&quo ...
- Struts2与easyui分页查询
easyui里面分页查询:在easyui框架里面已经进行一些分装,所以我们只要进行后台分页查询即可 web.xml和struts.xml文件的配置的就不需要我多说了,和分页前代码一样,不需要更改: 需 ...
- 一个共通的viewModel搞定所有的分页查询一览及数据导出（easyui + knockoutjs + mvc4.0)
前言 大家看标题就明白了我想写什么了,在做企业信息化系统中可能大家写的最多的一种页面就是查询页面了.其实每个查询页面,除了条件不太一样,数据不太一样,其它的其实都差不多.所以我就想提取一些共通的东西出 ...
- 商品分页查询 ego-prc 实现-easyui
使用 easyui 的 DataGrid 控件实现商品的分页查询,DataGrid 控件提交分页所需要的 page 和rows 参数,后台响应包含总记录数 total 和需要显示的商品对象的集合 ro ...
- EasyUi+Spring Data 实现按条件分页查询
Spring data 介绍 Spring data 出现目的 为了简化.统一 持久层 各种实现技术 API ,所以 spring data 提供一套标准 API 和 不同持久层整合技术实现 . 自己 ...
- EasyUI 之 DataGrid利用用拉姆达表达式实现分页查询
首先,我们在DataGrid的URL中加上我们要查询的条件:查询用户名不是“呵呵”的所有用户. <div> <table id="dg" class=&quo ...
- Node.js、express、mongodb 实现分页查询、条件搜索
前言 在上一篇Node.js.express.mongodb 入门(基于easyui datagrid增删改查) 的基础上实现了分页查询.带条件搜索. 实现效果 1.列表第一页. 2.列表第二页 3. ...
- [drp 5] pageModel的建立，实现分页查询
导读:之前做的分页,一直都是用的easy--UI分页,然后没有系统的整理过,就是知道传几个参数,然后云云.这次,从头到尾总结一下,了了我的这桩心愿.人事系统的重定向工作,一直刺激着我一定要总结总结这个 ...
- JAVAEE——BOS物流项目04：学习计划、datagrid、分页查询、批量删除、修改功能
1 学习计划 1.datagrid使用方法(重要) n 将静态HTML渲染为datagrid样式 n 发送ajax请求获取json数据创建datagrid n 使用easyUI提供的API创建data ...
随机推荐
- Python基础-入门之路PYTHON-包 相对导入&绝对导入
什么是包 包也是一种模块,但本质上就是一个文件夹 对于使用者而言 使用方式和模块没有任何区别 本质上就是一个文件夹 不同之处在于 多了一个__init__.py 叫包的初始化文件 import导入模块 ...
- Confluence 6 恢复一个站点有关使用站点导出为备份的说明
推荐使用生产备份策略.我们推荐你针对你的生产环境中使用的 Confluence 参考 Production Backup Strategy 页面中的内容进行备份和恢复(这个需要你备份你的数据库和 ho ...
- js中的 !! 和 ! 的区别
简单描述:看老大提交的代码,发现了一个事情,有一处是连着两个! 然后就把我弄纳闷了,果断找度娘,原来如此.上代码 代码: if(!!s && s.length > 0){ /* ...
- 《剑指offer》 树的子结构
本题来自<剑指offer> 树的子结构 题目: 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) 思路: 分两步走: 第一步:判断根节点,两个根节 ...
- tensorflow(3):神经网络优化(ema,regularization)
1.指数滑动平均 (ema) 描述滑动平均: with tf.control_dependencies([train_step,ema_op]) 将计算滑动平均与 训练过程绑在一起运行 train_o ...
- ubuntu下配置反向代理
1. 环境 ubuntu:Ubuntu 13.04 x86-64 apache2: 2.2.22-6ubuntu5.1 amd64 2. 配置 2.1 配置应用 增加监听端口 打开/etc/apac ...
- linux基础练习题（1）
Linux命令作业(关卡一) 练习题1 理解操作系统的作用,以及各种操作系统的不同 要求: 简述什么是OS 简述应用程序.硬件.OS的关系 列举出3种常见的操作系统 简述Ubuntu和Linux的关系 ...
- 005-Python字典
Python字典(dict) 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在花括号{}中: ...
- 007-Python函数-装饰器
函数回顾 1.函数可以当做一个参数赋值给另一个函数: def func(): print("in the func") def foo(x): x() foo(func) 输出: ...
- k3 Bos开发百问百答
K/3 BOS开发百问百答 (版本:V1.1) K3产品市场部 目录 一.基础资料篇__ 1 [摘要]bos基础资料的显示问题_ 1 [摘要]单 ...