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优雅的处理日志
我们可以通过以下3种方式可以很优雅配置logging日志: 1)使用Python代码显式的创建loggers, handlers和formatters并分别调用它们的配置函数: 2)创建一个日志配置文 ...
- Java红黑树详谈
定义 红黑树的主要是想对2-3查找树进行编码,尤其是对2-3查找树中的3-nodes节点添加额外的信息.红黑树中将节点之间的链接分为两种不同类型,红色链接,他用来链接两个2-nodes节点来表示一个3 ...
- Centos7 linux 卸载自带安装的jdk 并yum自动安装jdk1.8
一:卸载系统自带安装的JDK 注:本文参考了< 使用CentOS7卸载自带jdk安装自己的JDK1.8> 通过xshell工具成功连接安装好的虚拟机之后可通过 rpm -qa | g ...
- Windows 批处理大全（附各种实例）
Windows 批处理大全(附各种实例) 2009年07月19日 21:31:00 阅读数:2552 批处理文件是无格式的文本文件,它包含一条或多条命令.它的文件扩展名为 .bat 或 .cmd.在命 ...
- verilog-产生axis数据流
首先这是产生aixs数据流的代码 `timescale 1ps/1ps `default_nettype none module axis_switch_0_example_master #( ) ( ...
- LeetCode（103）： 二叉树的锯齿形层次遍历
Medium! 题目描述: 给定一个二叉树,返回其节点值的锯齿形层次遍历.(即先从左往右,再从右往左进行下一层遍历,以此类推,层与层之间交替进行). 例如:给定二叉树 [3,9,20,null,nul ...
- python(5):scipy之numpy介绍
python 的scipy 下面的三大库: numpy, matplotlib, pandas scipy 下面还有linalg 等 scipy 中的数据结构主要有三种: ndarray(n维数组), ...
- cf1073c 二分+二维前缀和
#include<bits/stdc++.h> using namespace std; #define maxn 200005 char s[maxn]; ][maxn]; map< ...
- SSM框架接收处理安卓端的json数据
最近项目上与安卓端做JSON数据交互,使用的SSM框架,刚开始的时候感觉很简单,想着不就是把安卓端的JSON数据封装为Bean类对象吗? 于是就这样写了 可是这样一直报400,百度原因是因为请求url ...
- win（64位）环境下oracle11g的安装方法
将压缩文件解压到一个目录中,该目录结构如下: 安装步骤(摘自网络): 1.进入数据库解压目录,双击其中的“setup.exe”文件,稍等片刻出现如下“配置安全更新“界面,取消“我希望通过My Orac ...