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

╰+攻爆jí腚メ 2021-09-27 07:46 262阅读 0赞

2018-8月18日

**1.效果图：**

![70][]

![70 1][]

![70 2][]

![70 3][]

![70 4][]

![70 5][]

**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="请输入区域、小区名" οnkeydοwn="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());  
  \}

[70]: /images/20210923/108f451bb50a4a4fb364c9e84fe994be.png
[70 1]: /images/20210923/b9d8b2cd3e6644c2ac7a4f8bde189584.png
[70 2]: /images/20210923/8d16b01b42c9467b828aa05cec630405.png
[70 3]: /images/20210923/f685ea680c2b47fc8e2d0f5e54195d31.png
[70 4]: /images/20210923/7d8c5c83b4b34100812889e287c417b0.png
[70 5]: /images/20210923/c90e0316abf645208e9148040f1ba544.png