使用ajax实现多个查询条件功能以及下拉分页
2018-8月18日
1.效果图：
2.前台html
οnkeydοwn="if(event.keyCode==13) return searchEnter()">
《！--多条件组合查询》
价 格
- data-value="1-100000" class="price-cls">
href="javascript:;">全部
- data-value="1-4999" class="price-cls">
href="javascript:;">5000以下
- data-value="5000-10000" class="price-cls">
href="javascript:;">5000-10000元
- data-value="10000-20000" class="price-cls">
href="javascript:;">10000-20000元
- data-value="20000-30000" class="price-cls">
href="javascript:;">20000-30000元
- data-value="30000-100000" class="price-cls">
href="javascript:;">30000以上
居室
- data-value="" class="bedroom-cls">
href="javascript:;">全部
- data-value="1" class="bedroom-cls">
href="javascript:;">1居
- data-value="2" class="bedroom-cls">
href="javascript:;">2居
- data-value="3" class="bedroom-cls">
href="javascript:;">3居
- data-value="4" class="bedroom-cls">
href="javascript:;">4居
- data-value="5" class="bedroom-cls">
href="javascript:;">4居以上
面积
- data-value="1-1000" class="square-cls">
href="javascript:;">全部
- data-value="1-49" class="square-cls">
href="javascript:;">50m²以下
- data-value="50-80" class="square-cls">
href="javascript:;">50m²-80m²
- data-value="80-110" class="square-cls">
href="javascript:;">80m²-110m²
- data-value="90-110" class="square-cls">
href="javascript:;">90m²-110m²
- data-value="110-150" class="square-cls">
href="javascript:;">110m²-150m²
- data-value="150-200" class="square-cls">
href="javascript:;">150m²-200m²
- data-value="201-1000" class="square-cls">
href="javascript:;">200m²以上
//页面数据显示区域
//TODO使用ajax填充数据区域
3.前台js
var query1=null;
var query2=null;
var query3=null;
var query4=null;
var page=0;//定义全局分页参数
$(document).ready(function() {
//点击区域查询条件
$('.city-cls').click(function() {
query1 = $(this).text();
searchByCondition(query1,query2,query3,query4);
})
$('.area-cls').click(function() {
query1 = "-"+$(this).text();
searchByCondition(query1,query2,query3,query4);
})
//点击价格查询条件
$('.price-cls').click(function() {
query2 = $(this).attr('data-value');
searchByCondition(query1,query2,query3,query4);
})
//点击居室查询条件
$('.bedroom-cls').click(function() {
query3 = $(this).attr('data-value');
searchByCondition(query1,query2,query3,query4);
})
//点击面积查询条件
$('.square-cls').click(function() {
query4 = $(this).attr('data-value');
searchByCondition(query1,query2,query3,query4);
})
//页面加载初始化数据
searchByCondition(query1,query2,query3,query4);
//页面下拉框滑到底部触发该事件
$('.tab-content').scroll(function() {
var height = $('.tab-content').height();
var scrollHeight = $('.tab-content')[0].scrollHeight;
var scrollTop = $('.tab-content').scrollTop();
if (scrollTop + height >= scrollHeight) {
page++;
searchByCondition1(query1, query2, query3, query4, page)
}
})
})
})
function searchByCondition(query1,query2,query3,query4){
page = 0;
$('.tab-content').scrollTop(0);
$.ajax({
type : 'post',
url : 'search',
cache : false, // 禁用缓存
data : {
city: query1,
price : query2,
jushi : query3,
sequre:query4,
page:page
},
success : function(data) {
console.log(data);
var list=data.contents.data;
var str="";
var tal="";
tal+='
for(var i=0;i
str+='
str+=' '+'
'+'
str+='
'+item.roomName+'
'+''+item.cityName+item.areaName+'
'+'
'+item.tips+'
'+''+'¥'+item.rental+'元/月
}
$("#btn-tal").html(tal);
$("#roomList").html(str);
}
});
}
function searchByCondition1(query1, query2, query3, query4, page) {
$.ajax({
type : 'post',
url : 'search',
cache : false, // 禁用缓存
data : {
city : query1,
price : query2,
jushi : query3,
sequre : query4,
page : page
},
success : function(data) {
console.log(data);
var list = data.contents.data;
var str = "";
var tal = "";
for (var i = 0; i < list.length; i++) {
var item = list[i];
str += '
str += ' ' + '
'
+ '
str += '
'
+ (item.roomName === null ? "" : item.roomName) + '
'
+ (item.cityName === null ? "" : item.cityName)
+ (item.areaName === null ? "" : item.areaName) + '
'
+ (item.tips === null ? "" : item.tips) + '
+ '
'
+ (item.rental === null ? "" : '¥' + item.rental + '元/月')
+ '
}
$("#btn-tal").append(tal);
$("#roomList").append(str);
}
});
}
//普通检索
function searchByCommon(query) {
$.ajax({
type : 'post',
url : 'searchCommon',
cache : false, // 禁用缓存
data : {
query : query,
page : 0
},
success : function(data) {
var list = data.contents.data;
var str = "";
var tal = "";
tal += '
+ '套
for (var i = 0; i < list.length; i++) {
var item = list[i];
str += '
str += ' ' + '
'
+ '
str += '
'
+ (item.roomName === null ? "" : item.roomName) + '
'
+ (item.cityName === null ? "" : item.cityName)
+ (item.areaName === null ? "" : item.areaName) + '
'
+ (item.tips === null ? "" : item.tips) + '
+ '
'
+ (item.rental === null ? "" : '¥' + item.rental + '元/月')
+ '
}
$("#btn-tal").html(tal);
$("#roomList").html(str);
}
});
}
function searchByKey(query) {
if (!query) {
window.location.href = '/map.html';
return;
}
window.location.href = '/map-k' + query + '.html';
}
//按回车就会查询
function searchEnter() {
var query = $('#id_keywords').val();
searchByCommon(query);
}
4.后台控制器代码
@PostMapping("search")
@ResponseBody
public Map
Integer page) {
TblRooms entity = new TblRooms();
SearchCondition searchCondition = new SearchCondition();
searchCondition.setPrice(price);
searchCondition.setJushi(jushi);
searchCondition.setSequre(sequre);
// 区域
if (StringUtils.isNotEmpty(city)) {
if (city.equals("全部")) {
entity.setCityName("");
} else {
if (city.contains("-")) {
String[] s = city.split("-");
entity.setAreaName(s[1]);
} else {
entity.setCityName(city);
}
}
}
// 价格
if (StringUtils.isNotEmpty(searchCondition.getPrice())) {
if (searchCondition.getPrice().contains("-")) {
String[] str = searchCondition.getPrice().split("-");
searchCondition.setPre_begin(str[0]);
searchCondition.setPre_end(str[1]);
entity.setRentalBegin(new BigDecimal(searchCondition.getPre_begin()));
entity.setRentalEnd(new BigDecimal(searchCondition.getPre_end()));
} else {
entity.setRental(new BigDecimal(searchCondition.getPrice()));
}
}
// 居室
if (StringUtils.isNotEmpty(searchCondition.getJushi())) {
entity.setBedroom(Integer.parseInt(searchCondition.getJushi()));
}
// 面积
if (StringUtils.isNotEmpty(searchCondition.getSequre())) {
if (searchCondition.getSequre().contains("-")) {
String[] str = searchCondition.getSequre().split("-");
entity.setSquareBegin(new BigDecimal(str[0]));
entity.setSquareEnd(new BigDecimal(str[1]));
} else {
entity.setSquare(new BigDecimal(searchCondition.getSequre()));
}
}
Integer limit = Consts.PAGE_SIZE;
PageRequest pageRequest = PageRequest.of(page, limit, Direction.DESC, "id");
Map
datas = tblRoomsService.findAll(entity, pageRequest);
Map
map.put("contents", datas);
return map;
}
@PostMapping("searchCommon")
@ResponseBody
public Map
Integer limit = Consts.PAGE_SIZE;
TblRooms entity = new TblRooms();
entity.setKeyword(query);
PageRequest pageRequest = PageRequest.of(page, limit, Direction.DESC, "id");
Map
datas = tblRoomsService.findAll(entity, pageRequest);
Map
map.put("contents", datas);
return map;
}
5.查询条件类
public class SearchCondition {
private String area;// 区域
private String price;// 价格
private String jushi;// 居室
private String sequre;// 面积
private String pre_begin;// 开始价格
private String pre_end;// 结束价格
6.业务层代码
@Override
public Map
Page
return dealQueryResult(page);
}
private Specification
return new Specification
@Override
public Predicate toPredicate(Root
List
list.add(cb.equal(root.get("locked").as(Boolean.class), false));
if (StringUtils.isNotBlank(entity.getKeyword())) {
list.add(cb.or(cb.like(root.get("cityName").as(String.class), "%" + entity.getKeyword() + "%"),
cb.like(root.get("areaName").as(String.class), "%" + entity.getKeyword() + "%"),
cb.like(root.get("subways").as(String.class), "%" + entity.getKeyword() + "%"),
cb.like(root.get("roomName").as(String.class), "%" + entity.getKeyword() + "%")
));
}
if (StringUtils.isNotBlank(entity.getCity())) {
list.add(cb.equal(root.get("city").as(String.class), entity.getCity()));
}
if (StringUtils.isNotBlank(entity.getCityName())) {
list.add(cb.equal(root.get("cityName").as(String.class), entity.getCityName()));
}
if (StringUtils.isNotBlank(entity.getAreaName())) {
list.add(cb.equal(root.get("areaName").as(String.class), entity.getAreaName()));
}
if (StringUtils.isNotBlank(entity.getSubways())) {
list.add(cb.like(root.get("subways").as(String.class), "%" + entity.getSubways() + "%"));
}
if (StringUtils.isNotBlank(entity.getSite())) {
list.add(cb.like(root.get("site").as(String.class), "%" + entity.getSite() + "%"));
}
if (entity.getDepositBegin() != null) {
list.add(cb.greaterThanOrEqualTo(root.get("deposit").as(BigDecimal.class), entity.getDepositBegin()));
}
if (entity.getDepositEnd() != null) {
list.add(cb.lessThanOrEqualTo(root.get("deposit").as(BigDecimal.class), entity.getDepositEnd()));
}
if (entity.getSquareBegin() != null) {
list.add(cb.greaterThanOrEqualTo(root.get("square").as(BigDecimal.class), entity.getSquareBegin()));
}
if (entity.getSquareEnd() != null) {
list.add(cb.lessThanOrEqualTo(root.get("square").as(BigDecimal.class), entity.getSquareEnd()));
}
if (entity.getRentalBegin() != null) {
list.add(cb.greaterThanOrEqualTo(root.get("rental").as(BigDecimal.class), entity.getRentalBegin()));
}
if (entity.getRentalEnd() != null) {
list.add(cb.lessThanOrEqualTo(root.get("rental").as(BigDecimal.class), entity.getRentalEnd()));
}
if (StringUtils.isNotBlank(entity.getFacing())) {
list.add(cb.equal(root.get("facing").as(String.class), entity.getFacing()));
}
if (entity.getBedroom() > 0) {
if (entity.getBedroom() >= 5) {
list.add(cb.greaterThanOrEqualTo(root.get("bedroom").as(Integer.class), entity.getBedroom()));
// list.add(cb.ge(root.get("bedroom").as(Integer.class),
// entity.getBedroom()));
} else {
list.add(cb.equal(root.get("bedroom").as(Integer.class), entity.getBedroom()));
}
}
if (StringUtils.isNotBlank(entity.getGroupName())) {
list.add(cb.equal(root.get("groupName").as(String.class), entity.getGroupName()));
}
if (StringUtils.isNotBlank(entity.getRoomType())) {
list.add(cb.equal(root.get("roomType").as(String.class), entity.getRoomType()));
}
if (StringUtils.isNotBlank(entity.getGroupName())) {
list.add(cb.equal(root.get("groupName").as(String.class), entity.getGroupName()));
}
if (entity.getStatus() != null) {
list.add(cb.equal(root.get("status").as(Byte.class), entity.getStatus()));
}
if (!entity.getStatusList().isEmpty()) {
list.add(root.get("status").as(Byte.class).in(entity.getStatusList()));
}
if (StringUtils.isNotBlank(entity.getFurnid())) {
String[] furnIds = StringUtils.split(entity.getFurnid(), ",");
List
for (String furnId : furnIds) {
pres.add(cb.like(root.get("furnid").as(String.class), "%" + furnId + "%"));
}
list.add(cb.and(pres.toArray(new Predicate[] {})));
}
Predicate[] p = new Predicate[list.size()];
return cb.and(list.toArray(p));
}
};
}
private Map
List
for (TblRooms entity : page.getContent()) {
list.add(entity);
}
return UtilPublic.toModelMap(list, page.getTotalElements(), page.getTotalPages());
}