DataTables sliding 기능 구현

DataTables 를 사용하면서 테이블 column 칸에 데이터 양이 많아 모두 보여줄 수 없을 때

sliding 기능을 사용한다.

 

DataTables Columns 설정

table = $('#manager-usedHistory-table').DataTable({
    dom : "Bfrtip",
    paging : false,
    searching : false,
    buttons : [],
    language:eval(datatable_lang),
    processing: true,
    columns: [
        ...이하생략
        {
            data:	null, className: "text-center",
            //defaultContent: "<button id=\"+slider_button\" type='button' class='btn btn-primary details-control'>"+/*[[#{manager.usedhistory.list.view.content}]]*/ ""+"</button>",
            render: function(data){
                return "<button id=\""+data.al_seq+"_slider_button\" type='button' class='btn btn-primary details-control'>"+/*[[#{manager.usedhistory.list.view.content}]]*/ ""+"</button>"
            }

        },
    ],
    columnDefs: [
        ...이하생략
        { title: /*[[#{manager.usedhistory.list.desc}]]*/ "", targets: 8 },
    ],
    data: /*[[${historyList}]]*/ ""
});

위는 DataTables 의 옵션 설정 및 columns 옵션을 통해 data 설정을 한다.

아래처럼 각 행마다 "내용보기"라는 버튼을 생성했으며, 버튼 클릭 시 행 아래에 데이터를 보여줄 수 있는

공간이 생긴다.

아래 처럼 "내용보기" 버튼 클릭 시 이벤트 URL 과 이벤트 내용을 보여준다.

 

"내용보기" 버튼 클릭 이벤트 설정

$('#manager-usedHistory-table tbody').on('click', 'td button.details-control', function () {
    const tr = $(this).closest('tr');
    const row = table.row( tr );
    const rowData = row.data();

    if ( row.child.isShown() ) {
        $("#"+rowData.al_seq+"_slider_button").text(/*[[#{manager.usedhistory.list.view.content}]]*/ "");
        $("#"+rowData.al_seq+"_slider_button").removeClass("btn_hide");
        $("#"+rowData.al_seq+"_slider_button").addClass("btn-primary");

        $('#slider', row.child()).slideUp( function () {
            row.child.hide();
            tr.removeClass('shown');
        });

    }else {
        $("#"+rowData.al_seq+"_slider_button").text(/*[[#{manager.usedhistory.list.view.hide}]]*/ "");
        $("#"+rowData.al_seq+"_slider_button").removeClass("btn-primary");
        $("#"+rowData.al_seq+"_slider_button").addClass("btn_hide");

        row.child( formatTable(row.data()), 'no-padding' ).show();
        tr.addClass('shown');
        $('#slider', row.child()).slideDown();
    }
});

 

$('#manager-usedHistory-table tbody').on('click', 'td button.details-control', function () { ... }

td 태그 아래 button의 details-control class 의 이벤트 핸들러이다.

DataTables columns 설정하면서 button 생성할 때 설정한 details-control class 이다.

 

const tr = $(this).closest('tr');

const row = table.row( tr );
if ( row.child.isShown() ) { ... }

row 는 DataTables, child 의 isShown() 메서드를 통해서 Child 하위 데이터가 보여지고 있는지 여부를 체크한다.

 

$("#"+rowData.al_seq+"_slider_button").text(/*[[#{manager.usedhistory.list.view.content}]]*/ ""); $("#"+rowData.al_seq+"_slider_button").removeClass("btn_hide"); $("#"+rowData.al_seq+"_slider_button").addClass("btn-primary");

$("#"+rowData.al_seq+"_slider_button").text(/*[[#{manager.usedhistory.list.view.hide}]]*/ "");
$("#"+rowData.al_seq+"_slider_button").removeClass("btn-primary");
$("#"+rowData.al_seq+"_slider_button").addClass("btn_hide");

해당 내용은 버튼 클릭했을 때 "내용보기" 와 "숨기기" 로 버튼 명 및 색깔 CSS 를 변경하기 위해 사용한다.

 

 

$('#slider', row.child()).slideUp( function () { row.child.hide(); tr.removeClass('shown'); });
$('#slider', row.child()).slideDown();

slideUp() 메서드와 slideDown() 메서드를 통해 하위 데이터를 보여주거나 숨김처리를 한다.