使用ajax实现多个查询条件功能以及下拉分页

最新推荐文章于 2022-04-01 13:54:21 发布

原创最新推荐文章于 2022-04-01 13:54:21 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#工作任务

工作专栏收录该内容

44 篇文章

订阅专栏

2018-8月18日

1.效果图：

2.前台html

<div class=" row " style="padding:0 2% 0 7%;">
<div class="col-md-5 col-sm-5 col-xs-5 ">
<div class="input-group index-input pre-search">
<div class="col-md-10 col-sm-10 col-xs-10 pt0">

<input type="text" id="id_keywords" class="form-control" placeholder="请输入区域、小区名" onkeydown="if(event.keyCode==13) return searchEnter()">


</div>

《！--多条件组合查询》

//页面数据显示区域

<div id="myTabContent" class="tab-content">

<div class="tab-pane fade in active" id="home">
<ul id="roomList">
//TODO使用ajax填充数据区域
</ul>

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+='<div class="fl" id="btn-tal"><b>'+data.contents.total+'</b>套</div>'
   for(var i=0;i<list.length;i++){
       var item = list[i];
       str+='<li class="clearfix" roomid="100241047" lng="114.260571" lat="22.725271" title="东方明珠城龙岗龙城广场站家私家电全齐2房出租">'
           str+='<a class="big-alink clearfix" href=" \"/room/ \"+item.roomsn+\".html\" " target="_blank"> '+'<p class="hs-photo fl">'+'<img src="/upload/viewImg2/'+item.smallImg+' width="135" height="102" class="fl"></p>'
   str+='<div class="hs-info fl">'+'<p class="hs-info-name">'+item.roomName+'</p>'+'<p>'+item.cityName+item.areaName+'</p>'
   +'<p>'+item.tips+'</p>'+'<p class="hs-info-price">'+'¥'+item.rental+'元/月</p></div></a><li>'



   }
   $("#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 += '<li class="clearfix" roomid="100241047" lng="114.260571" lat="22.725271" title="东方明珠城龙岗龙城广场站家私家电全齐2房出租">'
str += '<a class="big-alink clearfix" href="/room/' + item.roomsn
+ '.html" target="_blank"> ' + '<p class="hs-photo fl">'
+ '<img src="/upload/viewImg2/' + item.smallImg
+ ' width="135" height="102" class="fl"></p>'
str += '<div class="hs-info fl">' + '<p class="hs-info-name">'
+ (item.roomName === null ? "" : item.roomName) + '</p>' + '<p>'
+ (item.cityName === null ? "" : item.cityName)
+ (item.areaName === null ? "" : item.areaName) + '</p>' + '<p>'
+ (item.tips === null ? "" : item.tips) + '</p>'
+ '<p class="hs-info-price">'
+ (item.rental === null ? "" : '¥' + item.rental + '元/月')
+ '</p></div></a><li>'

}
$("#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 += '<div class="fl" id="btn-tal"><b>' + data.contents.total
+ '</b>套</div>'
for (var i = 0; i < list.length; i++) {
var item = list[i];
str += '<li class="clearfix" roomid="100241047" lng="114.260571" lat="22.725271" title="东方明珠城龙岗龙城广场站家私家电全齐2房出租">'
str += '<a class="big-alink clearfix" href="/room/' + item.roomsn
+ '.html" target="_blank"> ' + '<p class="hs-photo fl">'
+ '<img src="/upload/viewImg2/' + item.smallImg
+ ' width="135" height="102" class="fl"></p>'
str += '<div class="hs-info fl">' + '<p class="hs-info-name">'
+ (item.roomName === null ? "" : item.roomName) + '</p>' + '<p>'
+ (item.cityName === null ? "" : item.cityName)
+ (item.areaName === null ? "" : item.areaName) + '</p>' + '<p>'
+ (item.tips === null ? "" : item.tips) + '</p>'
+ '<p class="hs-info-price">'
+ (item.rental === null ? "" : '¥' + item.rental + '元/月')
+ '</p></div></a><li>';
}
$("#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<String, Object> searchUnio(Model model, String city, String price, String jushi, String sequre,
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<String, Object> datas;
datas = tblRoomsService.findAll(entity, pageRequest);
Map<String, Object> map = new HashMap<String, Object>();
map.put("contents", datas);
return map;
}

@PostMapping("searchCommon")
@ResponseBody
public Map<String, Object> searchCommon(String query, Integer page) {
Integer limit = Consts.PAGE_SIZE;
TblRooms entity = new TblRooms();
entity.setKeyword(query);
PageRequest pageRequest = PageRequest.of(page, limit, Direction.DESC, "id");
Map<String, Object> datas;
datas = tblRoomsService.findAll(entity, pageRequest);
Map<String, Object> map = new HashMap<String, Object>();
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<String, Object> findAll(TblRooms entity, Pageable pageable) {
Page<TblRooms> page = roomsRepository.findAll(whereClause(entity), pageable);
return dealQueryResult(page);
}

private Specification<TblRooms> whereClause(final TblRooms entity) {
return new Specification<TblRooms>() {

@Override
public Predicate toPredicate(Root<TblRooms> root, CriteriaQuery<?> query, CriteriaBuilder cb) {
List<Predicate> list = new ArrayList<Predicate>();
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<Predicate> pres = new ArrayList<>();
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<String, Object> dealQueryResult(Page<TblRooms> page) {
List<TblRooms> list = new ArrayList<>();
for (TblRooms entity : page.getContent()) {
list.add(entity);
}
return UtilPublic.toModelMap(list, page.getTotalElements(), page.getTotalPages());
}