2022-08-19 오늘도 DataTable를 이용하여 회사 업무

오늘도 어김없이 DataTable로 화면에 데이터 출력하고 입력하는 Input 창을 만들었다. 중간 중간 MSSQL 로 데이터 입력 및 수정 요청 처리건들을 처리하고 고도화 기능 개발을 계속 이어나갔다. 

하나의 데이터를 선택하였을때 거기에 해당하는 유효성 검사를 위해 필요한 데이터를 또 뽑아주고 비교하고 이런 작은 것들 신경쓸께 많았다. 큰 프로세스를 먼저 짜고 그후 코드를 하나씩 짜다보니 필요한 유효성 검사들이 더 많았다. 

현재 개발자 반년 조금 지났지만 그 반년동안 기능 협의의 시간에 더 시간을 많이 할애한거 같다보니 지금 현재 기능 협의가 끝난 후 개발에만 집중하는 시간이 협의보다 괜찮은 시간 같았다. 

 

우선 정리해서 설명하자면 DataTable을 만드는 함수를 만들어서 <tbody>에 데이터를 그려주는데, Datatable에 ajax로 뽑은 기존 데이터 말고 <select>구문에 다른 데이터가 필요하여 어제와 똑같은 작업을 반복해 주었다. 그리고 데이터를 가공하기 위해 DTO 기능으로 만들어놓은 Model 에 추가적으로 객체를 추가하여 진행하였고 기존에 만들어진 시스템의 틀을 지키며 더 효율적인 개발을 할려고 노력했다. (회사코드는 아님)

 

DataTable 형태 참고하면 좋을듯 하다.

function makeDataTable(list){
  
   var html = '<select>';
  
   $.ajax({
      url : "/url",
      type : "POST",
      data: {
         list : list,
         code : $("#code").val()
      },
      success : function(data){ // Controller에 Map 타입으로 return 해주었다
         data.list.forEach(function(item, index, arr2){
            html += "<option value='" + item.code + "'>" + item.name + "</option>"
         });

         html += "</select>";
      }
   });
   
   // 제출 정보 출력 
   $("#table").DataTable({
      scrollCollapse: true,
      responsive:true,
      destroy: true,
      dom: '<"top"i><"top"f>rt<"bottom"lp><"clear">',
      bsort : false,
      paging : false,
      bPaginate : false,
      ordering : false,
      ajax:{
         url : "/url/makeDatatable",
         type : "POST",
         data: {
            list : list,
            code : $("#code").val()
         }
      },
      columns:[
         {
            data:"column1",
            className: 'dt-body-center' 
         },
         {
            data:"column2",
            className: 'dt-body-center' 
         },
         { 
            data:"column3",
            className: 'dt-body-center'
         },
         { 
            data:"column4",
            className: 'dt-body-center',
            render:function(data, type, row){
               return stepListHtml;     
            }
         },
         { 
            data:"column5",
            className: 'dt-body-center'
         },
         { 
            data:"column6",
            className: 'dt-body-left',
            render:function(data, type, row){
               return html;  
            }
         },
         { 
            data:"column7",
            className: 'dt-body-center'
           
         },
         { 
            data:"column8",
            className: 'dt-body-center'
          
         },
         { 
            data:"column9",
            className: 'dt-body-center',
            width: '30%'
         },
      ],
      drawCallback: function(data, type, row) {
           $('.select2').select2();
        }
   });
   
   // 기존 선택 되어 있는 정보 출력 
   // setTimeout을 한 이유는 위의 dataTable에 html이 그려지기 전에 html에 있는 .list에  값을 넣어주기 때문에 사용
   setTimeout(()=>{
      $.ajax({
         url : "/url",
         type : "POST",
         data: {
            list : list,
            code : $("#code").val()
         },
         success : function(data){
            data.data.forEach(function(data, index, arr){
               $(".list").eq(index).val(data.list).change();

            });
         }
      });
   },100 );

"신입 개발자라 부족한 부분과 틀린 단어 선택일 경우 댓글로 알려주시면 감사하겠습니다!!!!"