[javascript] jQuery DataTable Reset, 테이블 초기화

jQuery DataTable 사용

문제점 : 모달 창으로 검색해서 띄우는 table list 가 있는데 , 모달창을 끄고 나면 테이블을 초기화 하고싶었다.
사실 나도 초기화 안하고 그냥 쓰고싶었는데 , 부모창에서 select 하는 옵션 마다 모달의 검색 조건도 살짝 살짝 바뀌는 사이트여서 어쩔수없었다.

검색 결과가 그대로 유지되어있으면 부모창에서 옵션을 바꿨을때 모달에서 맞지 않는 리스트가 보여지는게 싫었음

대충 아래와 같은 모달창의 datatable 이 있다 가정했을때 닫기 눌렀을때 초기화를 시켜주기로함

사실 초기화는 크게 문제 없었다, 다만 초기화를 하기위해서 여러 조건들을 갖추는데 꽤나 애를 먹었다.
datatable 초기화는 그냥 id 로 갖고와서 .DataTable() 한번 찍어주고, destroy 한번 해주면 끝난다.

fnCreateDataTables 는 대충 아래와 같이 되어있는 상태, '검색' 버튼을 누르면 ajax로 모달에 table 리스트를 뿌려줌

const fnCreateDataTables = function () {
    if (typeof aList == "undefined") {
        aList = COMMON.Ajax.CreateDataTable("#aTblList", true, {
            url: '/test/getList',
            lengthMenu: [10, 25, 50, 100, 200, 500],
            data: function () {
                return $("#form").serializeObject();
            },
            columns: [
                { "data": "idx", "class": "columnc","render": function (data, type, full, meta) {
                        return data;
                    }
                },                    
                { "data": "useFlag", "class": "columnc", "render": function (data) { return data === true ? 'O' : 'X'} },
                { "data": null,      "class": "columnc", "render": function (data, type, full, meta) {
                        return "<div class='flex justify-center gap-2'>" +
                            "<button type='button' class='btn btn-primary btn-xs btn-mini auth-all'>" +
                                "<i class='fa fa-list-ul'></i></button>" +
                            "</div>"
                    }
                },
                { "data": "regDate",        "class": "columnc" },
            ],
            fnDrawCallback: function(settings) {
                //
            }
        });
    } else {
        aList.clearPipeline();
        aList.ajax.reload();
    }
}

모달창의 "닫기" 버튼에는 onClick="fnResetDataTable(this) " 이벤트를 주었다.

let aList, bList;

...중략

function fnResetDataTable(t){
	//클릭한 element 의 최상위 class="modal" 인걸 찾는다
    const el = t.closest('.modal');

    if (el) {
    	// 테이블이 생성되면서 aList, bList 에 값이 담김
        const arr = [aList, bList];

        //테이블이 생성되어서 undefined 아닌것들(테이블이 된것들)만 추출한다.
        const availableArr = arr.filter(element => {
            return typeof element !== "undefined";
        })

        //undefined 아닌애들로 돌려서 해당 id reset 시키기
        for (let i = 0; i < availableArr.length; i++) {
            try{
                const getTableId = availableArr[i]?.context[0]?.sTableId;
                if (getTableId) {
                    COMMON.Ajax.ResetDataTable("#" + getTableId);
                } else {
                    console.log("테이블 id 찾는 도중 에러발생 ", availableArr[i]);
                }
            }catch (e){
                console.error(`테이블 초기화 도중 에러발생`, e);
            }
        }
		
        //다 끝나고 나면 다 undefined 처리 해버림
        [aList, bList] = [undefined, undefined];
    }
}

ResetDataTable 은 아래와 같이 진행

//초기화 부분
ResetDataTable: function(strLocation) {
    try {
        const table = $(strLocation).DataTable()
        if(table){
            table.destroy();

            const tbody = "<tr class=\"defaultData\" style=\"text-align:center\">\n" +
                " <td colspan=\"5\" style=\"font-weight:bold; border:1px solid #ddd;\">-</td>\n" +
                "</tr>"

            $(strLocation + " tbody").empty().append(tbody);
        }
    }catch (e) {
        //console.log(e);
    }
},

 

정리해놓으니 진짜 별거 아닌거 같은데 여러번 삽질 진행했다 -_-

닫기에 onclick 이벤트 붙은것처럼 선택을 진행했을때도 아래 reset 함수만 호출해주면 되니까 이상없이 진행되었음

undefined를 굳이 해야했나 ? 싶었는데, 굳이 해줘야되는거 맞음
안해주면 createTable 부분에서 aList, bList 가 undefined 가 아닌것으로 인식을 해서 ajax.reload() 를 때려버리는데
값을 가져오긴하는데 테이블의 기본적인 세팅, sort, order by , list 갯수 등이 초기화 되어서 지 멋대로 가져오는 문제가 있었음