스프링부트로 datatables사용해서 ajax로 디비값을 테이블에 출력하려 합니다. 그런데 MVC구조가 문제인지 에러가 뜹니다.

Question

DataTables warning: table id=datatables1 - Ajax error. For more information about this error, please see http://datatables.net/tn/7 화면 처음 들어가면 이렇게 뜨고요 소스들 첨부하겠습니다. 선배님들 부탁드리겠습니다. xml 소스 view(jsp) 소스 var ajaxData = ""; var rowData; //Initialize Select2 Elements $(".select2").select2(); //Money Euro $("[data-mask]").inputmask(); ////////////// //Date picker ////////////// // 일간 $('#dateDay').datepicker({ autoclose : true, format : "yyyy-mm-dd", language : "kr" }).datepicker("setDate", 'today'); // 월간 $('#dateMonth').datepicker({ autoclose : true, startView : "months", minViewMode : "months", format : "yyyy-mm", language : "kr" }).datepicker("setDate", new Date()); // 연간 $('#dateYear').datepicker({ autoclose : true, startView : "years", minViewMode : "years", format : "yyyy", language : "kr" }).datepicker("setDate", new Date()); //datepicker 설정 $('#dateCondition') .change( function() { if ($('#dateCondition option:selected').val() == 'dateAll') { $('#dateAll').show(); $('#dateDay').hide(); $('#dateMonth').hide(); $('#dateYear').hide(); } else if ($('#dateCondition option:selected') .val() == 'dateDay') { $('#dateAll').hide(); $('#dateDay').show(); $('#dateMonth').hide(); $('#dateYear').hide(); } else if ($('#dateCondition option:selected') .val() == 'dateMonth') { $('#dateAll').hide(); $('#dateDay').hide(); $('#dateMonth').show(); $('#dateYear').hide(); } else if ($('#dateCondition option:selected') .val() == 'dateYear') { $('#dateAll').hide(); $('#dateDay').hide(); $('#dateMonth').hide(); $('#dateYear').show(); } else { alert("dateCondition error"); } ; }); /* DataTables 초기 설정 */ var table = $('#datatables1').DataTable({ //data: ajaxData, ajax : { "url" : "/main/dataTablesAjax1.do", "type" : "POST", //"data": { // "searchCondition" : $("#searchCondition").val() // ,"searchKeyword" : $("#searchKeyword").val() //} "data" : function(d) { d.searchCondition = $("#searchCondition").val(); d.searchKeyword = $("#searchKeyword").val(); d.dateCondition = $("#dateCondition").val(); d.dateAll = $("#dateAll").val(); d.dateDay = $("#dateDay").val(); d.dateMonth = $("#dateMonth").val(); d.dateYear = $("#dateYear").val(); } }, "columnDefs" : [ { "targets" : "_all", "className" : "text-center" } ], "columns" : [ { "data" : "useNum" }, { "data" : "usedDong" }, { "data" : "usedHo" }, { "data" : "usedDate" }, { "data" : "usedUse" } ], "lengthChange" : false, "searching" : false, "ordering" : true, "info" : true, "pagingType" : "full_numbers", "scrollX" : true, "order" : [ 1, 'asc' ] });serviceimpl @Service("usedSherchService")@Transactional(propagation = Propagation.REQUIRED)public class UsedSherchServiceImpl implements UsedSherchService { @Autowired private UsedSherchDAO usedSherchDAO; @Override public List useSerch(UsedSherchVO vo) throws Exception { List listuseSerch = null; listuseSerch = usedSherchDAO.useSerch(); return listuseSerch; } } service public interface UsedSherchService { public List useSerch(UsedSherchVO vo) throws Exception; } dao@Mapper@Repository("usedSherchDAO")public interface UsedSherchDAO { public List useSerch() throws DataAccessException;} controllerimple @Override @RequestMapping(value = "/main/usedSherch.do", method = RequestMethod.GET) public ModelAndView listusedSherch(HttpServletRequest request, HttpServletResponse response) throws Exception { UsedSherchVO vo = new UsedSherchVO(); List resultList = usedSherchService.useSerch(vo); ModelAndView mav = new ModelAndView("/main/usedSherch"); mav.addObject("resultTable", resultList); System.out.println(" /main/usedSherch.do: vo"+vo); return mav; } // 메인 테이블 조회 @Override @RequestMapping(value = "/main/dataTablesAjax1.do", method=RequestMethod.POST) public ModelAndView dataTablesAjax1( @RequestParam Map commandMap ,@ModelAttribute("usedShearchVO")UsedSherchVO vo ) throws Exception{ ModelAndView mav = new ModelAndView(); mav.setViewName("jsonView"); System.out.println("dataTablesAjax commandMap : "+commandMap); System.out.println("dataTablesAjax vo : "+vo); List resultList = usedSherchService.useSerch(vo); System.out.println("resultList : "+resultList); // dataTables에 넘겨줄 모델의 키는 data로 지정해야 함. mav.addObject("data", resultList); System.out.println(mav); return mav; } controller public interface UsedSherchController{ public ModelAndView listusedSherch(HttpServletRequest request, HttpServletResponse response) throws Exception; public ModelAndView dataTablesAjax1(Map commandMap, UsedSherchVO vo)throws Exception; } 이상입니다.

tteakuk · Answer

http://blog.naver.com/PostView.nhn?blogId&#61;software705&logNo&#61;220951565082

와신상담 · Answer

tteakuk 님 감사합니다. 태그해주신 페이지 참고해서 보고있는데 제가 느끼기엔 문제가 없는거같은데 값을 못읽어 오네요 . mav에 vo값도 다 들어갔다고 로그도 나오고하는데ㅠㅠ 무튼 참고해주신 페이지로 좀더 확인해 보겠스빈다.

hhj · Answer

dataTablesAjax1의 메소드에 &#64;ResponseBody 어노테이션 추가해주시고 리턴값을 List<UsedSherchVO>로 바꾸시고 resultList를 그대로 리턴해주세요.

와신상담 · Answer

hhj 감사합니다 주신답으로 실행결과 결과값은 json으로 전송되나 제가 사용하는 라이브러리는 리텁값의 뷰네임이 'data'여야만 하는 라이브러리라 resultList를 맵에 담아 맵 이름을 data로 전송하여 해결했습니다!!

스프링부트로 datatables사용해서 ajax로 디비값을 테이블에 출력하려 합니다. 그런데 MVC구조가 문제인지 에러가 뜹니다.

4개의 답변

#helpme 목록