datatable - serverside search(column filtering) 문제.

boingboing·2022년 3월 22일

현재 datatable 버전: 1.11.4

기존에 기본제공되는 search input 을 serverside로 검색 할 때는 input 인자 값 받아서 django에서 필터링했다.
이번에는 컬럼별로 필터링 해야 한다.
FixedHeader에서, column filtering을 해야 한다.
When displaying tables with a particularly large amount of data shown on each page,
it can be useful to have the table's header and / or footer
fixed to the top or bottom of the scrolling window.
This lets your users quickly determine what each column refers to rather than needing to scroll back to the top of the table.

방법1

Individual column filtering

STEP 1

우선은 search input을 테이블에 넣어 보자.

    $('#example tfoot th').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

STEP 2

검색 이벤트 바인딩

$( '#example tfoot input' ).on( 'keyup change clear', function () {
    //우선 이벤트까진 정상 발생한다.
    //debugger

    if ( test_table.search() !== this.value && this.value.length>0) {
        search_result = test_table.search( this.value );
        search_result.draw();
    }
} );