.DataTable 반응형 - .DataTable ban-eunghyeong

*반응형 웹(Responsive Web): 디스플레이 종류에 따라 화면의 크기가 자동으로 최적화되도록 조절되는 웹페이지.

반응형 테이블 접근 방식

1. 열의 내용이 거의 없는 경우, 일정한 비율로 축소(Squish)되도록 합니다.
   
2. 내용을 정확하게 보여주기 위해서는 사용자가 스크롤하여 볼 수 있도록 화면 폭이 좁을 때 전체 데이터를 풀어서 보여줍니다.
   
3. 전체 데이터를 풀어서 보여줍니다.
   
4. 선택적으로 데이터를 볼 수 있는 옵션을 제공하거나, 필요한 내용만 보여주는 등 새로운 구조로 제공합니다.
   

너비에 따라 달라지는 테이블 형태ⓒcss-tricks

반응형 테이블 데모

1. 일정한 비율로 축소되는 방식
열의 내용이 거의 없는 경우, 폭이 좁아지더라도 문제없이 보여집니다. 너비를 %로 지정해주면 일정한 비율로 축소됩니다. 

See the Pen Responsive Table Demo1 (Squish) by Diana (@Diana-iropke) on CodePen.

2. 내용을 스크롤해서 볼 수 있는 방식 

‘overflow="auto"’로 감싸주는 태그가 있다면 간단히 적용할 수 있습니다. 하지만 이 방식은 일부 모바일 기기에서 스크롤바의 유무를 판단하기 어려울 수 있으므로 모든 브라우저에 동일하게 보이는 스크롤바를 제공하거나 테이블의 양쪽에 그림자 효과를 주는 등 시각적인 힌트를 제공해 주는 것이 좋습니다. 스크롤바는 스크립트를 사용하여 모든 브라우저에서 동일하게 보일 수 있지만, CSS 속성을 적용하여 변경할 수도 있습니다. (Custom Scrollbars in WebKit 참고)

위의 그림과 같이 텍스트가 잘려 보이는 부분은 fadein 된 것 같이 `linear-gradient`를 추가하거나(Demo2-1), 폭이 좁아질 경우, `box-shadow`로 그림자 효과를 주어(Demo2-2) 콘텐츠가 더 있음을 알려줍니다. 하지만 이 두 가지 방법은 테이블 전체가 움직여야 하므로 제목 열이 존재한다면 내용을 파악하기 어려울 수 있습니다. 

엑셀에서 자주 사용하는 틀고정과 같이 제목 열을 고정하는 방법도 있습니다. <Demo2-3>은 제목 행을 열로 바꾸어(Flipped) 표현하는 예제로 ‘display:flex’를 사용하여 IE9 이하에서는 일반 테이블로 보이게 됩니다. 위에서 소개한 두 가지 방법과는 달리 스크롤에 따라 좌우 그림자가 생깁니다. 

<Demo2-4>는 폭이 좁아질 경우, 자바스크립트로 테이블의 내용을 복제해 추가 테이블이 생성되는 것을 보여줍니다. 첫 번째 테이블에서 제목 열을 숨김 처리하고 ‘margin-left’ 값을 주어 배치합니다. 두 번째 테이블에서는 제목 열을 ‘position: absolute’로 고정하고, 데이터를 ‘display:none’으로 숨김 처리합니다. 이 방법은 불필요한 마크업이 생길 수 있고, 테이블이 분리되기 때문에 병합된 셀이 있다면 원하는 높이로 표현되지 않는 단점이 있습니다. 

3. 전체 데이터를 풀어서 보여주는 방식 

신현석 님이 만든 예제 <Demo3-1>은 국내에서 많이 알려진 방법입니다. 표의 모양을 선형화하고, 자바스크립트를 이용해 각 열의 헤더 정보 레이블을 제공해줍니다. <Demo3-2>처럼 모든 내용에 제목이 필요 없는 경우라면 셀을 병합하여 보여주는 것도 좋은 방법입니다. 

이 외에도 아래와 같이 자바스크립트를 사용하지 않고 제목에 해당하는 마크업을 추가하고, 해당 내용을 숨김 처리 하는 방법을 사용할 수 있습니다. 

See the Pen Responsive Table Demo3 by Diana (@Diana-iropke) on CodePen.

4. 선택적으로 데이터를 보여주는 방식 

Filament Group에서 만든 반응형 테이블 ‘Tablesaw’는 화면의 폭이 좁아지면 셀이 하나씩 숨겨집니다. 숨겨진 셀은 테이블 상단에 display 옵션으로 표시하여 사용자가 보고 싶은 데이터를 골라 볼 수 있도록 구성합니다. 

다양한 데모 중 미니맵을 페이지네이션(Pagination, 페이지의 일련번호를 정하는 것)과 같은 형태로 제공하여 사용자가 보고 있는 데이터의 구간이 어디인지 쉽게 파악할 수 있게 해줍니다. 또 초기 버전 예제를 기반으로 하여 *부트스트랩(Bootstrap)에서 사용할 수 있도록 만들어진 RWD-Table-Patterns도 있습니다. 

*부트스트랩(Bootstrap): 웹개발을 위한 HTML, CSS, JS 프레임워크 

5. 구조를 변경하는 방식 

Css-tricks에서 소개하는 (Demo5-1)은 화면이 좁아지면 탭, 아코디언 형태로 보여주는 방식입니다. jQuery를 사용하여 부트스트랩을 위해 만들어진 테이블 플러그인으로 FooTable, DataTables도 있습니다. 

이 외에도 일반적인 사용법은 아니지만, 테이블 일부를 보여주고 추가 클릭 시 별도 화면에서 전체를 보여주는 방법도 있습니다. 이 방법은 페이지에 표 외에 많은 콘텐츠가 있을 때 유용합니다. 또 숫자로 구성된 내용의 경우, 차트를 이용해 직관적으로 정보를 파악할 수 있게 하거나 각 항목(열)에 배경색을 추가하여 색상으로 구분하는 방법도 있습니다. 

반응형

$("#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();

반응형

공유하기

게시글 관리

'코딩 관련 > Javascript와 jQuery, JSON' 카테고리의 다른 글