무인도

목표는 대량 데이터에 대해서 페이지 화면 단위로 사용하기 위한 용도다.

(참고로 AdminLte3의 템플릿을 기반으로 한 내용이다.)

# jQuery DataTable Server Side의 기본정보 : https://datatables.net/examples/data_sources/server_side

1. 필요한 css와 js 적용

몇개는 사용하지 않을 수도 있는 내용이나, 우선 DataTable의 기능을 다 쓴다는 가정하에 작성 하였다.

2. html table 작성

3. DataTable 적용을 위한 javascript

1) 15번 라인의 columns는 리턴 파리미터명에 대한 것으로 html의 thead, tfoot에 작성한 순서와 맞춰 맵핑해 준다.

2) 27번 라인 serverSide는 true여야 한다.

3) 31~34라인은 서버쪽 소스를 수정하지 않기 위해 내가 추가한 부분이다.

해당 부분을 제외하면 아래 URL 셈플과 같이 서버에 요청한다.

URL 셈플 : /ajax/getPageList?draw=1&columns[0][data]=grpCd&columns[0][name]=&columns[0][searchable]=true&columns[0][orderable]=true&columns[0][search][value]=&columns[0][search][regex]=false&columns[1][data]=grpNm&columns[1][name]=&columns[1][searchable]=true&columns[1][orderable]=true&columns[1][search][value]=&columns[1][search][regex]=false&columns[2][data]=useYn&columns[2][name]=&columns[2][searchable]=true&columns[2][orderable]=true&columns[2][search][value]=&columns[2][search][regex]=false&columns[3][data]=delYn&columns[3][name]=&columns[3][searchable]=true&columns[3][orderable]=true&columns[3][search][value]=&columns[3][search][regex]=false&columns[4][data]=crtDt&columns[4][name]=&columns[4][searchable]=true&columns[4][orderable]=true&columns[4][search][value]=&columns[4][search][regex]=false&order[0][column]=0&order[0][dir]=asc&start=0&length=10&search[value]=&search[regex]=false&_=1617172835689

* 31~34라인에 사용한 api 정보

https://datatables.net/reference/api/page.info()

https://datatables.net/reference/api/page.len()

https://datatables.net/reference/event/order

4) 37~49라인은 테이블 상단에 아래와 같이 버튼을 넣어줄 수 있다.

주의할 점은 버튼 기능의 데이터 범위는 페이지 조회시 조회한 데이터 정보 만큼이다. (serverside는 보이는 라인만큼)

테스트 해 보니 기본 csv와 pdf에서 한글이 깨지고 있다.

(1) csv는 다른 버튼과 같이 {} 없이 "csv"를 사용하면 깨지므로 위와 같이 사용한다. 

* csv 한글깨짐 현상 정보 : https://datatables.net/forums/discussion/37150/buttons-export-to-csv-doesnt-seem-to-take-charset-setting-into-account

(2) pdf는 해당되는 플러그인 파일을 변경해 주면된다.

* pdf 한글깨짐 현상 정보 : http://blog.naver.com/PostView.nhn?blogId=rosijin&logNo=221322270984&parentCategoryNo=&categoryNo=4&viewDate=&isShowPopularPosts=false&from=postView

* 혹시 링크가 사라지면 아래 파일 사용

4. 응답 파라미터에 맞춰 서버에서 리턴

예시와 같이 리턴 파라미터를 작성해 주면 자동으로 페이징을 적용한다.

원래 내 의도는 서버쪽의 응답을 수정하지 않고 javascript단에서 서버의 리턴 내용을 수정하여 DataTable에 끼워 넣고 싶었으나 몇가지 원하는 정보가 들어가지 않았다.

그런데 메뉴얼 대로 서버의 응답을 만들었더니 잘 적용되고 있다.

# 요청, 응답 파라미터를 잘 정리해 둔 블로그가 있어 링크 추가 : https://www.leafcats.com/63 

# 관련글

[jQuery DataTable] work page reload : https://deonggi.tistory.com/101

[jQuery DataTable] row click event : https://deonggi.tistory.com/102