DataTables columns search 기능 구현

datatables 를 사용하면서 각 컬럼마다 검색 기능이 필요하여 구현하게 되었다.

// html
<table id="manager-mst-view-table" class="table table-hover table-striped table-bordered"
</table>

// javascript
$('#manager-mst-view-table').DataTable({
	searching : true,
    initComplete: function() {
    
        let api = this.api();

        $('#manager-mst-view-table thead tr')
            .clone(true)
            .addClass('filters')
            .appendTo('#manager-mst-view-table thead');

        //columns 들의 eq(0) 인 head 들만 반복한다.
        api.columns().eq(0).each(function(colIdx){

            const cell = $('.filters th').eq($(api.column(colIdx).header()).index());
            const title = $(cell).text();
            if($(api.column(colIdx).header()).index() >= 0){
                $(cell).html('<input type="text" placeholder="' + title + '" />');	
            }

            $('input',$('.filters th').eq($(api.column(colIdx).header()).index()))
                .off('keyup change')
                .on('change', function(e){
                    $(this).attr('title', $(this).val());
                    var cursorPosition = this.selectionStart;
                    api.column(colIdx).search(this.value != '' ? this.value : '').draw();
                })
                .on('keyup', function(e){
                    e.stopPropagation();
                    $(this).trigger('change');
                    $(this).focus()[0].setSelectionRange(this.selectionStart, this.selectionEnd);
                });
        });
    }
})

 

initComplete: function() {}

테이블 및 데이터가 완전히 초기화된 이후에 실행되는 콜백 함수이다.

쉽게 말해 테이블이 모두 그려지고 난 다음에 실행되는 함수이다.

 

this.api()

DataTables 의 API 함수

 

$('#manager-mst-view-table thead tr') .clone(true) .addClass('filters') .appendTo('#manager-mst-view-table thead');

appendTo 를 통해 #manager-mst-view-table thead tr 를 #manager-mst-view-table thead Element의 제일 마지막에 추가된다.

 

 

$('input',$('.filters th').eq($(api.column(colIdx).header()).index())) ...

input 목록 중 추가한 .filters 의 th의 input 을 찾아 on event 를 추가한다.

keyup 이벤트를 통해 change 이벤트를 호출하는 trigger를 사용한다.

change 에서 colIdx 의 위치 column의 search 를 통해 검색한다.