DataTables 기본 생성

DataTables 기본 생성

728x90

엄청난 삽질 후 드디어 데이터를 가져와서 출력해본다.

serverSide 방식.

jsp body 부분 script부분

코드는 간단(?)하다.

DataTables의 특성상 따로 tbody 부분은 생성하지 않아도 자동으로 생성된다.

이유는 스크립트에서 tbody에 들어 갈 컬럼을 정해주기 때문.

여기서 내가 삽질한 부분은 분명히 json 형식으로 데이터를 요청했고 data로 맞추어서 보냈는데

인식을 못하는 것이였다.

문제점은 processing : true와 serverSide : true를 해주는 것으로 해결했다.

또 다른 유의사항 : 컨트롤러에서 데이터를 보낼때 retrun 값을 data로 보내야한다.(라고 하는데... 난 일단 잘되서 메모해둠)

데이터 보내는 컨트롤러임

성공한 모습

데이터 출력 모습 

기본 데이터를 Json 방식으로 가져오는 것은 여기서 다루지 않음.

jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> Title <%-- --%> num title content id date hit $(document).ready(function () { $('#testTable').DataTable({ processing: true, severSide: true, ajax: { url: '/dataTables', dataSrc: '' }, columns: [ {data: "num"}, {data: "title"}, {data: "content"}, {data: "id"}, {data: "date"}, {data: "hit"} ] }); }); <%----%> <%-- $(document).ready( function () {--%> <%-- $('#testTables').DataTable();--%> <%-- });--%> <%----%>

controller

@Controller public class DataTablesController { @Autowired BoardService boardService; /** * 데이터 요청시 전송 * @param boardDto * @return */ @ResponseBody @RequestMapping(value = "/dataTablesData") public List dataTables(BoardDto boardDto) { List data = boardService.dataTables(boardDto); System.out.println(data); return data; } /** * 기본 DataTablesView * @return */ @RequestMapping(value = "/dataTables") public String test() { return "DataTables/dataTables"; } }

아래는 참고사이트

https://stackoverflow.com/questions/34287402/datatables-cannot-read-property-length-of-undefined#

여기는 DataTables 홈페이지의 option

https://datatables.net/manual/options

728x90

from http://210one2.tistory.com/326 by ccl(A) rewrite - 2021-11-19 16:27:32