1、效果图
设置了排序的列出现一个上下三角
2、/employee/index.jsp支持
如图所示,将需要设置排序的列添加sortable="true"属性。
3、BaseQuery后台支持
下图可以看到,在我们发出排序请求时,传的参数为sort和order,这和我们在BaseQuery中设置的排序字段不一致,需要进行兼容设置。
//添加兼容属性代码
4、BaseQuery完整代码
package com.xuxusheng.aisell.query;
/*
* 公共的查询条件
* 父类:公共的代码,可扩展性强,统一管理
* */
import org.apache.commons.lang3.StringUtils;
import org.springframework.data.domain.Sort;
import org.springframework.data.jpa.domain.Specification;
public abstract class BaseQuery {
//当前页
private int currentPage = 1;
//每页条数
private int pageSize = 10;
//排序方式
private String orderByType ="ASC" ;
//排序字段
private String orderByName;
//该方法由子类实现
public abstract Specification createSpecification();
//拿到排序的数据
public Sort createSort() {
if (StringUtils.isNotBlank(orderByName)) {
//利用三目判断排序方式
Sort sort = new Sort("ASC".equals(orderByType.toUpperCase()) ? Sort.Direction.ASC : Sort.Direction.DESC, orderByName);
return sort;
}
return null;
}
public String getOrderByType() {
return orderByType;
}
public void setOrderByType(String orderByType) {
this.orderByType = orderByType;
}
//兼容EasyUI排序方式
public void setOrder(String order) {
this.orderByType = order;
}
public String getOrderByName() {
return orderByName;
}
//兼容EasyUI排序名字
public void setOrderByName(String orderByName) {
this.orderByName = orderByName;
}
public void setSort(String sort) {
this.orderByName = sort;
}
public int getCurrentPage() {
return currentPage;
}
//解决jpa当前页从0开始的兼容问题
public int getCurrentPage2() {
return currentPage - 1;
}
public void setCurrentPage(int currentPage) {
this.currentPage = currentPage;
}
//兼容分页page
public void setPage(int page) {
this.currentPage = page;
}
public int getPageSize() {
return pageSize;
}
public void setPageSize(int pageSize) {
this.pageSize = pageSize;
}
//兼容分页rows
public void setRows(int rows) {
this.pageSize = rows;
}
@Override
public String toString() {
return "BaseQuery{" +
"currentPage=" + currentPage +
", pageSize=" + pageSize +
", orderByType='" + orderByType + '\'' +
", orderByName='" + orderByName + '\'' +
'}';
}
}
5、/employee/index.jsp完整代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="/WEB-INF/views/head.jsp" %>
<html>
<head>
<title>Title</title>
<%--引入当前页面对应的js文件--%>
<script src="/js/model/employee.js"></script>
</head>