Datatables Create Example

 

 

  datatables 라이브러리를 사용해서 테이블을 생성하는 예시입니다. 라이브러리 추가, trunc 함수 추가 등이 필요하지만 대충 코드 보시면 아실 것 같아서 자세한 내용은 추가하지 않았습니다.

var table = $('#targetTable').DataTable({
  data: source_data,
  dom: 'Bfrtip',
  buttons: [{
          extend: 'excelHtml5',
          text: 'Excel Download',
          className: 'btn btn-black export-button'
        }
  ],
  columns: [{
      title: "description"
    },
    {
      title: "status"
    }
  ],
  "columnDefs": [{
      "width": "100px",
      "targets": 0,
      "render": function(data, type, row, meta) {
          return data.trunc(30); // trunc함수 없으면 삭제하셔야 합니다.
      }
    },
    {
      "width": "100px",
      "targets": 1
    }
  ],
  "createdRow": function(row, data, dataIndex) {
      if (data[1] == "new") {
          $(row).addClass('text-primary');
          //bootstrap을 사용하시면 색상이 변경되는 것을 보실 수 있겠죠?
      }
  },
  "order": [],
  "searching": true,
  "paging": false,
  "bInfo": false,
  "ordering": false,
  "autoWidth": false
});

 

전체를 설명하기에는 무리죠? ㅎㅎ 그래도 간단하게 잘라서 설명해봅니다.

아래 dom, buttons을 삭제하시면 버튼이 나타나지 않습니다. 해당 버튼들이 잘 표출되려면 excelHtml5에 해당하는 라이브러리도 추가되어야 합니다. 

dom: 'Bfrtip',
  buttons: [{
          extend: 'excelHtml5',
          text: 'Excel Download',
          className: 'btn btn-black export-button'
        }
  ],

 

columnDefs에서는 각 컬럼의 사이즈나 render 하는 함수를 직접 정의할 수 있습니다. 

넘나 긴 텍스트를 가지고 있다면 trunc로 줄여서 보여주는게 좋겠죠? 그래서 저는 trunc 함수를 통해서 줄입니다. 없다면 아래 코드에서 에러가 납니다. 

  "columnDefs": [{
      "width": "100px",
      "targets": 0,
      "render": function(data, type, row, meta) {
          return data.trunc(30); // trunc함수 없으면 삭제하셔야 합니다.
      }
    },
    {
      "width": "100px",
      "targets": 1
    }
  ],

 

createdRow에서도 컬럼의 값을 확인해서 특정 값을 가지고 있으면 row에 대한 전체 css를 수정하는 등의 작업을 할 수 있습니다. 저는 bootstrap을 사용하기 때문에 text-primary 같은 css class를 추가했고요. 직접 만든 class도 당연히 되겠죠?

  "createdRow": function(row, data, dataIndex) {
      if (data[1] == "new") {
          $(row).addClass('text-primary');
          //bootstrap을 사용하시면 색상이 변경되는 것을 보실 수 있겠죠?
      }
  },

 

 

간단하게 datatables을 통해서 테이블을 생성하는 예제를 기록해둡니다. 제가 또 쓸 것 같거든요 ㅎ

+ Recent posts