[컴][자바스크립트] DataTables 에서 search input 이 IE8 에서 동작하지 않을 때

jquery library DataTables 에서 검색 창이 인터넷 익스플로러 8 에서 동작하지 않을 때 / ie8 에서 datatables 의 search input 을 동작하게 하기.



여기서는 DataTables 1.10.0 을 기준으로 이야기한다.

input event

기본적으로 DataTables 에서 search input 은 input event 를 이용하는 듯 하다.[ref. 2] 테스트를 해봤는데 change 나 keyup event 는 아니었던 것 같다.(기억이 확실치 않다.)

여하튼 input element 에 input event handler 대신에 새로운 event handler 를 bind 해주면 된다. IE 8 에서는 input event 가 발생하지 않기 때문이다.[ref. 1]

그래서 ref. 1 에서 소개하는 것처럼 propertychange event 를 사용했다. handler 는 아래 처럼 bind 해주면 된다.

_setSearchEventHandler = function(){
 var dtapi;

 dtapi = this.$table.api();

 $("#" + this.tableId + "_wrapper .dataTables_filter input")
 .unbind()
 .bind("input propertychange", function(e) {
   return dtapi.ajax.reload((function() {
    console.log("callback");
   }), true);
 });

 return;
}

datatables.ajax.reload

여기서 ajax.reload 를 사용하는 이유는 server-side processing 을 사용하기 때문이다. 만약 그냥 단순한 search 를 위해서라면 search()(또는 fnFilter) 를 이용하면 된다.[ref. 3]

data.search.value

이 때 주의할 점은 search input 을 가져오는 routine 이 없기 때문에 이 부분을 넣어줄 필요가 있다. 필자는 아래와 같은 Datatables 의 option 을 사용한다. 이 option 에서 ajax 부분을 수정해서 parameter 관련 callback 을 호출하기 전에 search value 를 set 해줄 수 있다.

참고로 아래 코드는 coffeescript 이다.

_dtOptions = {
            "processing": true, # show indicator
            "serverSide": true,
            ajax: (data, callback, settings) ->
                if that.ie8
                    data.search.value = data.search.value or $("##{that.tableId}_wrapper .dataTables_filter input").val()
                parameterCallback.call(that, data)
                $.ajax
                    url: url
                    data: data
                    dataType: _dataType
                    success: (json) ->
                        if nimpack.utils.Ajax.errorAccessKey(json.api_response.data)
                            return
                        callback(dataSource(json))
                        return

            "columns": columns,
            "order": initialOrder,
            "createdRow": fnCreatedRowCallback,
            "preDrawCallback" : preDrawCallback,
            "drawCallback" : drawCallback
        }

References

1. jQuery 'input' event - Stack Overflow
2. jQuery DataTables: Delay search until 3 characters been typed OR a button clicked - Stack Overflow
3. jquery - Datatables - Search Box outside datatable - Stack Overflow