목록별로 검색조건 만들어서 ajax로 리스트 띄우기

목록별로 검색조건을 만들어서 검색 되게 하라는 과제!

$("#callOrder").click(function(){ //조회버튼 누를 때 실행  	
    if(start == "" || end == '' ){
        console.log("공백값입니다." );
        alert("날짜를 입력해주세요");
    }else{
    var searchSerial = $("#form1").serialize();
        $.ajax({
            url:"/companySearchList",
            method: "post",
            data: searchSerial,
            success : function(data) {			
            	$('#dataListDiv').html(data);
            },
        });
    }
});

자바스크립트에서 ajax로 /companySearchList를 불러준다 그러면 controller에서 넘어오는 data를 <div id="dataListDiv"> 로 공간을 만들어주고 그 자리에 html을 끼워넣어주면 완성!!

그런데 여기서 궁금점이 생겼었다.
원래 success: function(data)에서 data.companyTables로 if를 걸어서 리스트 결과가 없을 경우 조회데이터가 없는 테이블을 만들어 주려고 했는데 data.companyTables을 찾지 못했고, data에는 html만 들어가 있었다.
궁금해서 프로님께 여쭤본 결과!!

//검색 리스트 결과가 ajax로보여지는 페이지
@PostMapping("/companySearchList")
public ModelAndView companySearchList(@RequestParam(value = "startday") String start,
                                     @RequestParam(value = "endday") String end, 
                                     @RequestParam(value="siteName") String siteName,
                                     @RequestParam(value="companynm") String companynm,
                                     @RequestParam(value="siteStatus") String siteStatus,
                                     @RequestParam(value="siteCalculate") String siteCalculate,
                                     @RequestParam(value="siteProtocol") String siteProtocol,
                                     @RequestParam(value="siteUrlDetail") String siteUrlDetail,
                                     Model model) {

    ModelAndView mav= new ModelAndView("insert/companySearch");
    String resultCode = "0000";

    try {
        HashMap<String, Object> param = new HashMap<String, Object>();
        param.put("start", start);
        param.put("end", end);
        param.put("siteName", siteName);
        param.put("companynm", companynm);
        param.put("siteStatus", siteStatus);
        param.put("siteCalculate", siteCalculate);
        param.put("siteProtocol", siteProtocol);
        param.put("siteUrlDetail", siteUrlDetail);

        List<CompanyTable> companyTables= orderservice.selectSearchCompany(param);
        logger.debug("companyTable = {}",companyTables);

        if(companyTables.size()<1) {
            mav.setViewName("insert/nosearch");
        }else {
            mav.addObject("companyTables", companyTables);
            mav.setViewName("insert/searchList");
        }

        if(companyTables != null && companyTables.size()>=0) {
            resultCode="0000";
            mav.addObject("companyTables", companyTables);
        }else {
            resultCode = "9999";
        }
        model.addAttribute("resultCode", resultCode);

    } catch (Exception e) {

        logger.debug("companySearchList = {}",resultCode);
        mav.setViewName("insert/searchList");
        resultCode = "9999";
        model.addAttribute("resultCode", resultCode);
        return mav;

    }
    return mav;
}

이 controller에서 type을 ModelAndView로 하기 때문에 html로 넘어간다는 대답이었다!! 그래서 자바스크립트에서 companyTables의 데이터를 못받았던 것이었음!!! 완전 깨우침을 얻고 그럼 searchList에서 타임리프로 받은 데이터를 if로 해결해야 하나 고민했지만 그냥 쉽게 nosearch.html을 만들어서 companyTables.size() <1일 때 mav로 넘겨줬다!

그러면

검색 결과가 없다면 이렇게 검색 조건 밑으로 ajax를 통해 띵 하고 띄울 수 있고!
결과가 있다면!

이렇게 있는 데이터가 나온다!
css가,, 허허,, 부끄럽다 코드도 더러워서 부끄럽네 헿