DataTables 상태값 유지 (데이터 소스를 서버 측 처리 )

DataTables 버전: 1.10.9

 

DataTables에는 테이블의 상태 (페이징 위치, 검색어 등)를 저장할 수있는 옵션이 있으므로 사용자가 페이지를 다시 로드하거나 상세로 이동했다가 뒤로가기로 다시 돌아올때 저장된 값을 가지고 화면을 구성할 수 있다.

 

 

DataTable 설정

---

$('#listTable').dataTable({
                    pageLength: 15,
                    dom: '<t><"row"<p i>>B',
                    scrollX: true,
                    scrollCollapse: true,
                    serverSide: true,
                    ...
                    ...
                    bStateSave: true
              }).api();

bStateSave: true 값을 넣어주면 테이블의 상태 값을 저장한다.

 

데이터를 DataTable로 가져 오는 방법에는 여러 가지가 있는데 큰 데이터베이스로 작업하는 경우에는 보통 서버사이드에서 해당 페이지만큼만 검색해오는 방법(Ajax 요청)을 쓰게 된다.

 

그럴경우 검색어나 검색 필터링을 커스텀하게 만들어 놓고 draw() 함수를 이용해 서버를 호출하고 결과를 전달받아 표시할 수 있다. 

 

테이블의 상태값을 유지하고 데이터를 화면에 표시하게 되면 관련 필터링 값들도 저장된 값으로 초기화 해줘야 한다.

 

 

저장된 값으로 필터링 초기화

---

 //### Ready
    $(document).ready(function(){
     
            // 초기화 중에 로드 된 테이블 상태를 가져온다.
            var state = window.dataTable.state.loaded();
            if ( state ) {
                
                window.dataTable.columns().eq(0).each( function(colIdx) {
                    var colSearch = state.columns[colIdx].search;

                    if(colSearch.search != "") {
                        var searchV = colSearch.search;
                        console.log("columnIdx: " + colIdx + " : " + searchV);
                        if (colIdx == 0) { 
                            // 관련 필터링에 값을 넣어준다.
                            $("#search_date").val(searchV);
                        } else if(colIdx == 5) { 
                            $("#search_count").val(searchV);
                        } 
                    }
                });

                var search = state.search;
                if(search.search != ""){
                    $("input[name=search_text]").val(search.search);
                }
            }
        }
    });

state.loaded () 함수를 사용하여 테이블 상태 값을 가져올 수 있다.

 

커스텀한 인덱스 값을 이용하여 관련 오브젝트에 설정할 수 있다.