dataTables row selection(행 선택) 구현 예제

강력한 Jquery Grid plugin인 dataTables에서 행 선택을 구현해 보자.

row selection 기능을 구현하는 방법은 두 가지가 있다.

행 선택에 대한 스크립트를 직접 구현하는 방법과, datatables 확장 플러그인을 사용하는 방법이다.

확장 플러그인을 사용하게 되면 더 간단한 코드를 구현할 수 있고, 다양한 선택 옵션들을 쉽게 변경할 수 있지만 별도의 js와 css를 불러와야 하므로 기본보다 다소 무겁다.

하지만 해당 플러그인의 js와 css의 라인수가 많지 않기 때문에 속도나 데이터에 큰 차이가 없다. 때문에 훨씬 간단하게 코딩 가능하고 별도의 강력한 기능을 제공하는 extenstion 플러그인을 사용하는 것을 추천한다.

먼저 직접 코딩하여 구현하는 방법부터 알아보자.

$(document).ready(function() {
    var table = $('#userTable').dataTable({
                    //----중략----
                });
     
    //테이블의 tbody를 클릭하면 selected로 클래스를 토글하는 방식이다.
    $('#example tbody').on( 'click', 'tr', function () {
        $(this).toggleClass('selected');
    } );
 
} );

테이블의 tbody의 tr을 클릭했을 때, selected로 css를 토글하는 방식이다.

이 방식으로는 다중 선택을 할 수 있게 된다. 단일 선택으로 구현하려면 다른 행 선택시 기존 선택된 행을 찾아 선택을 취소하는 코드가 추가되어야 할 것이다.

다음은 dataTables.select 플러그인을 사용하는 방식이다.

플러그인을 사용하려면 우선 css와 js를 불러와야한다. cdn은 아래와 같다. 바로 불러오던 저장해서 사용하던 선택하면 될 것이다.

js : https://cdn.datatables.net/select/1.2.1/js/dataTables.select.min.js

css : https://cdn.datatables.net/select/1.2.1/css/select.dataTables.min.css

스크립트와 css를 선언하고,

    <!-- datatables -->
    <script src="js/plugins/dataTables/datatables.min.js"></script>
    <script src="js/plugins/dataTables/datatables.select.min.js"></script>
    <link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet">
    <link href="css/plugins/dataTables/select.datatables.min.css" rel="stylesheet">

아래처럼 datatables 옵션으로 select 옵션만 주면 끝난다.

$(document).ready(function() {
    var table = $('#userTable').dataTable({
                    //----중략----
                       select: {
                            style: 'multi'
                     }
                });
 
} );

style을 multi로 주면 다중선택이고, single로 주면 단일선택으로 사용할 수 있다.

별도의 코딩이 필요 없기 때문에 매우 편리하며, 선택된 row 수를 datatables에 표시까지 해 준다.

이 밖에도 cell selection, checkbox  selection 등을 매우 간단한 코드만으로 구현할 수 있다.

select extension의 API는 아래 링크에 상세하게 설명되어 있다.

https://datatables.net/extensions/select/examples/initialisation/

선택한 row의 데이터는 아래와 같은 코드로 가져올 수 있다.

$('#userTable').DataTable().rows('.selected').data();