[jQuery DataTable] table paging 적용

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

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

 

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

DataTables example - Server-side processing

 

1. 필요한 css와 js 적용

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

<!-- css files for DataTables -->
<link rel="stylesheet" href="../../plugins/datatables-bs4/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="../../plugins/datatables-responsive/css/responsive.bootstrap4.min.css">
<link rel="stylesheet" href="../../plugins/datatables-buttons/css/buttons.bootstrap4.min.css">
 
<!-- javascript files for DataTables & Plugins -->
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-responsive/js/dataTables.responsive.min.js"></script>
<script src="../../plugins/datatables-responsive/js/responsive.bootstrap4.min.js"></script>
<script src="../../plugins/datatables-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.bootstrap4.min.js"></script>
<script src="../../plugins/jszip/jszip.min.js"></script>
<script src="../../plugins/pdfmake/pdfmake.min.js"></script>
<script src="../../plugins/pdfmake/vfs_fonts.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.html5.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.print.min.js"></script>
<script src="../../plugins/datatables-buttons/js/buttons.colVis.min.js"></script>

2. html table 작성

<table id="table" >
    <thead>
        <tr>
            <th>Group Code</th>
            <th>Name</th>
            <th>Used Yes/No</th>
            <th>Delete Yes/No</th>
            <th>Create Date</th>
        </tr>
    </thead>
    <!-----------------------
    
     table ajax return data 
        
    ------------------------>
    <tfoot>
        <tr>
            <th>Group Code</th>
            <th>Name</th>
            <th>Used Yes/No</th>
            <th>Delete Yes/No</th>
            <th>Create Date</th>
        </tr>
    </tfoot>
</table>

 

3. DataTable 적용을 위한 javascript

var orderColumn = [ "GRP_CD", "GRP_NM", "USE_YN", "DEL_YN", "CRT_DT" ];   // 정렬조건의 컬럼명
 
$('#table').DataTable({
    // "scrollY" : 300,
    // "scrollCollapse" : true, // 일정높이 이상 시 Y스크롤 추가
    "paging" : true,
    "searching" : false,
    "info" : true,
    "autoWidth" : false,
    "responsive" : true,
    "lengthChange" : true,          // 페이지 조회 시 row를 변경할 것인지
    // "pageLength" : 15,           // lengthChange가 false인 경우 조회 row 수
    "lengthMenu" : [ 10, 20, 50 ],  // lengthChange가 true인 경우 선택할 수 있는 값 설정
    "ordering" : true,
    "columns" : [ {                 // 테이블에 맵핑할 리턴 파라미터명 순서
        "data" : "grpCd"
    }, {
        "data" : "grpNm"
    }, {
        "data" : "useYn"
    }, {
        "data" : "delYn"
    }, {
        "data" : "crtDt"
    } ],
    "processing" : true,
    "serverSide" : true,        // serverside 사용 여부
    "ajax" : {
        url : "/ajax/getPageList",
        data : function(d) {
            // d.page = $('#table').DataTable().page.info().page + 1;    // 페이지 번호, DataTable().page.info().page은 0임
            // d.pageSize = $('#table').DataTable().page.len();            // 페이지 사이즈, 한 페이지에 몇개의 row인지
            // d.orderBy = orderColumn[$('#table').DataTable().order()[0][0]];        // 정렬조건 컬럼명
            // d.orderCondition = $('#table').DataTable().order()[0][1];            // 오름 또는 
        },
    },
// "dom" : 'Bfrtip',        // 버튼 추가
// "buttons" : [
// "copy"
// , {
// extend : 'csv',
// charset : 'UTF-8',
// bom : true,
// }
// , "excel"
// , "pdf"
// , "print"
// , "colvis"
// ],
});

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

pdfmake 한글 깨짐

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

pdf.zip

4.78MB

 

 

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

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

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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

DataTables Serverside processing 개발 예제

 

 

 

# 관련글

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

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