[Datatable] datatable 예시, datatable 옵션, datatable 생성

$("#table").DataTable().destroy(); //이전에 만든 것 없애고 다시 그리기 위함.
const table = $("#table").DataTable({
          responsive: false,  //반응형 설정
          pageLength: 10,     //페이지 당 글 개수 설정
          autoWidth: false,
          destroy: true,
          processing: true,
          serverSide: false,
          searching: false,    //검색란 표시 설정
          ordering: true,      //글 순서 설정
          paging: true,        //페이징 표시 설정
          dom: "Blfrtip",      //버튼 dom 설정 l을 추가하면 pagelength 드롭다운 표시
          buttons: [
            {
              extend: "excel",
              text: "엑셀 다운로드",
              filename: function () {
                if ($("#file1").val() === "a1") {
                  return "_"+$("#file1").val();
                } else {
                  return "file2";
                }
              },

              customize: function (xlsx) {
              //엑셀 셀 커스텀
                var sheet = xlsx.xl.worksheets["sheet1.xml"];
                $("c[r=B2] t", sheet).text("custom text1");
                $("c[r=C2] t", sheet).text("custom text2");
 
              },
            },
          ],
          language: {
            emptyTable: "데이터가 없습니다.",
            lengthMenu: "페이지당 _MENU_ 개씩 보기",
            info: "현재 _START_ - _END_ / _TOTAL_건",
            infoEmpty: "데이터 없음",
            infoFiltered: "( _MAX_건의 데이터에서 필터링됨 )",
            search: "",
            zeroRecords: "일치하는 데이터가 없습니다.",
            loadingRecords: "로딩중...",
            processing: "잠시만 기다려 주세요.",
            paginate: {
              next: "다음",
              previous: "이전",
            },
          },
          data: chartDataList,
          columns: [
            { data: "data1" },
            { data: "data2" },
            { data: "data3" },
            { data: "data4" },
          ],
          columnDefs: [
            {//0번컬럼 설정
              targets: 0,
              orderable : false,
              render: function (data) {
                if ($("#searchType").val() === "day") {
                  return data + "시";
                } else {
                  return data;
                }
              },
            },
            {//1번,2번컬럼 설정
              targets: [1,2],
              visible: false,
              orderable : false,
              render: function (data) {
              	return data;      
              },
            },
            {//모든 컬럼 설정
              targets: "_all",
              render: function (data, type, full, meta) {
              	console.log(data); // 데이터중 해당 열, 행에 들어갈 data
                console.log(type); 
                console.log(full); // 데이터중 해당 행에 들어갈 full data
                console.log(meta); // 해당 셀의 row, col 번호
              },
            },
          ],
        });
        
//데이터 테이블 필터링하여 보여주기 설정
//필터링 할 컬럼 번호로 search 이용
table.column(0).search("value").draw();