본문 바로가기
JavaScript

datatables 특정컬럼 숨기기, 내림차순정렬

by sj0020 2021. 8. 18.

html

    <table id="example2" class="table table-bordered table-striped">
               <!-- example1은 선택 가능 search 기능 까지있다. -->
              <thead>
              <tr>
                <th>no</th>
                <th>대분류</th>

                <th>제작품코드</th>
                <th>제작품이름</th>
                <th>제작품등록일</th>

                <th>완제품확인</th>

              </tr>
              </thead>


            </table>

 

 

js

  var table = $('#example2').DataTable( {
    "processing": true,
    "destroy":true,   //이거 추가하면 추가검색 가능
    ajax:  {
          type: 'post',
         url: './forms/product_data_ajax.php',
         data : {
           pro_mat : '',
         },
         dataSrc : '',
       },
       // console.log(data);
    columns : [
        {data: "pro_code"},
        {data: "pro_category"},

        {data: "pro_code",
       "render": function(data, type, row, meta){
             if(type === 'display'){
                 data = '<a href="#" onclick=open_order'+'('+'"'+data+'"'+')'+'>'+data+'</a>';
             }
             return data;
          }
       },
        {data: "pro_name"},

        // 등록일를 내림차순 등록위해 컬럼에 넣되, 아래에 안보이게 설정(table.column(4).visible(false);)
        {data: "pro_registDate"},


        {data: "pro_name",
              "render": function(data, type, row, meta){
                    if(type === 'display'){
                        data = '<button type="button" class="btn btn-block btn-outline-info btn-flat" onclick=finished_product_check'+'('+'"'+data+'"'+')>선택</button>';
                    }
                    return data;
                 }
              },
    ],

    'columnDefs': [{
        'targets': 0,
        'searchable': false,
        'orderable': false,
        'className': 'dt-body-center',
        'render': function (data, type, full, meta){
            return '<input type="checkbox" name="id[]"  class="chk" value="' + $('<div/>').text(data).html() + '">';
        }
     },

   ],
   // 최신등록 순별로 내림차순
     'order': [[4, 'desc']],


  });

  // 등록날짜 안보이게 설정
  table.column(4).visible(false);

  table.column(4).visible(false);

이렇게도 할 수 있고

아래처럼 columnDefs 안에 넣어 줄 수도 있다

  var table = $('#example2').DataTable( {
      "processing": true,
      "destroy":true,   //이거 추가하면 추가검색 가능
      ajax:  {
            type: 'post',
           url: './forms/product_data_ajax.php',
           data : {
             searching : searching,
             searching_type : searching_type,
           },
           dataSrc : '',
         },
      columns : [
          {data: "pro_code"},
          {data: "pro_category"},

          {data: "pro_code",
         "render": function(data, type, row, meta){
               if(type === 'display'){
                   data = '<a href="#" onclick=open_order'+'('+'"'+data+'"'+')'+'>'+data+'</a>';
               }
               return data;
            }
         },
          {data: "pro_name"},
          {data: "pro_registDate"},

          {data: "pro_name",
                "render": function(data, type, row, meta){
                      if(type === 'display'){
                          data = '<button type="button" class="btn btn-block btn-outline-info btn-flat" onclick=finished_product_check'+'('+'"'+data+'"'+')>선택</button>';
                      }
                      return data;
                   }
                },
      ],

      'columnDefs': [{
          'targets': 0,
          'searchable': false,
          'orderable': false,
          'className': 'dt-body-center',
          'render': function (data, type, full, meta){
              return '<input type="checkbox" name="id[]"  class="chk" value="' + $('<div/>').text(data).html() + '">';
          }
      },
      {
             "targets": [ 4 ],
             "visible": false,
             "searchable": false
      }
      ],
       'order': [[4, 'desc']],
       // 밑에 총가격나타냄


    });

초ㅣ종코드는 두번째 방법을 사용함

 

옵션에서 보이지 ㅇ낳게 해놓았기 때문에 보이지는 않지만

숨겨진 컬럼 기준으로 desc가 먹여져있다

https://stackoverflow.com/questions/5654633/jquery-datatables-hide-column

 

jquery datatables hide column

Is there a way with the jquery datatables plugin to hide (and show) a table column? I figured out how to reload the table data: using fnClearTable and fnAddData. But my issue is that in one of my...

stackoverflow.com