Datatables Ajax 예제

예제부터 보겠습니다.

<table class="table" id = "table_1">
    <thead>
        <tr>
            <th>번호</th>
            <th>이름</th>
            <th>나이</th>
            <th>주소</th> 
        </tr>
    </thead>
</table>    

우선 HTML로 thead까지만 작성해줍니다.

다음으로 Jquery 소스입니다.

var d_table = $('#table_1').DataTable({
    "columnDefs": [{
        "defaultContent": "-",
        "targets": "_all"
      }],
    pageLength: 10,
    bPaginate: true,
    responsive: true,
    processing: true,
    ordering: true,
    bServerSide: true,
    searching: false,
   "sAjaxSource": "/user/search_user?num=@",
    columns: [
    { data: 'num'},
     { data: 'name' },
     { data: 'age' },
     { data: 'address' }
       ]
});

각 설명을 하겠습니다.

2~ 5번째 줄 : ajax로 데이터가 날라오면서 list를 뿌려주는데 각 컬럼에서 만약 값이 없으면 오류가 납니다.

즉 값이 없으면 ' - ' 로 대체해줘서 뿌려줍니다.

6번째 줄 : 기본 페이지 길이는 10

7번째 줄 : 페이징을 활성화

8~9번, 11번째 줄 : ajax 통신을 하기 위한 필수 입력으로 알고있습니다. 8번째 줄은 안해도 될 것 같습니다.

12번째 줄 : 검색 비활성화로 설정

*13번째 줄(중요) : 서버쪽 요청 url입니다. user?num=@에서 @을 한 이유는 처음 화면 시 데이터를 안 뿌려주기 위해서 입니다.

14~ 17번째 줄 위에 th에 해당하는 각각의 컬럼들을 정의

저는 spring boot를 써서 서버 쪽 소스는

@RequestMapping(value = "/search_user", produces="text/plain;charset=UTF-8")
    public @ResponseBody String search_user(@ModelAttribute("user") user){
        List<user> search_user =  user_service.search_user(user);
        int totalCount = user_service.search_user_count(user);
 
        wrapperVO vo = new wrapperVO();
 
        vo.setAaData(search_user);
        vo.setiTotalRecords(totalCount);
        vo.setiTotalDisplayRecords(totalCount);
 
        Gson ojb = new GsonBuilder().setDateFormat("yyyy-MM-dd").create();
        
        return ojb.toJson(vo);
 
    }

produces="text/plain;charset=UTF-8 꼭 설정해주셔합니다.

@ModelAttribute("user") user 로 검색 조건을 받습니다.

List형태로 검색조건에 맞는 결과를 담아줍니다.

totalCount는 검색조건에 맞는 리스트의 카운트값을 담습니다.

wrapperVO 는 ajax로 리턴받을 타입을 묶어줘야합니다.

아래는 wrapperVO 소스입니다.

public class wrapperVO {
    private List<?> aaData;
    private int iTotalRecords;
    private int iTotalDisplayRecords;
    //getter setter 선언
}

List<?> 로 선언한 이유는 어떤 타입이 들어올지 모르기때문에 ?로 선언하였습니다.

다시 위로 올라와 vo.setAaData 는 화면에 뿌려질 List입니다.

vo.setiTotalRecoreds랑 vo.setiTotalDisplayRecords는 totalCount를 넣어줍니다.

각각의 변수들은 Datatables에서 공식적으로 지원하는 변수 이름인 것 같네요.

Gson으로 선언해준 이유는 Datatables를 Gson 타입으로 알아먹더라구요.

이렇게하면 페이징처리와 ajax로 Datatables 리스트를 뿌려주는 예제였습니다.

sql은 당연히 페이징처리가 된 쿼리여야합니다. sql문이 궁금하신 분은 댓글 달아주세요 ^^