IT tech Coding/jquery

제이쿼리 DataTables 사용법: 초보자를 위한 상세 가이드

Coding Life 2025. 2. 11. 09:41

웹 개발을 하다 보면 많은 양의 데이터를 깔끔하고 효율적으로 표시해야 할 때가 있습니다. 이럴 때 많이 활용되는 도구 중 하나가 바로 DataTables입니다. 오늘은 제이쿼리와 DataTables를 이용해 HTML 테이블에 다양한 기능(페이징, 정렬, 검색 등)을 추가하는 방법을 알아보려고 합니다.

먼저 아래와 같이 DataTables를 초기화하는 코드를 보겠습니다.

// DataTables 초기 설정
dataTable = $('#myTable').DataTable({
    "paging": true,
    "ordering": true,
    "searching": true,
    "pageLength": 50,
    "lengthMenu": [25, 50, 100, 200, 500, 1000],
    "language": {
        "lengthMenu": "Show _MENU_ entries",
        "search": "Live Search:"
    },
    "order": [[0, 'desc']]
});

이 코드는 간단하지만 DataTables의 다양한 기능을 한눈에 보여주고 있습니다. 각 옵션이 어떤 역할을 하는지 하나씩 살펴보겠습니다.

먼저, "paging": true는 데이터가 많을 때 한 페이지에 모든 데이터를 나열하지 않고 페이지 단위로 분할하여 보여주는 기능입니다. 대량의 데이터가 있을 때 페이지네이션을 사용하면 사용자 입장에서 원하는 데이터를 빠르게 찾을 수 있습니다.

"ordering": true 옵션은 테이블의 각 열(column)에 대해 정렬 기능을 활성화합니다. 사용자가 열의 제목을 클릭하면 오름차순 또는 내림차순으로 데이터를 정렬할 수 있으며, "order": [[0, 'desc']] 옵션을 통해 첫 번째 열에 대해 내림차순 정렬이 기본값으로 적용됩니다. 이처럼 초기 정렬 옵션을 미리 지정해두면 원하는 데이터 순서로 테이블이 로드되기 때문에 편리합니다.

검색 기능은 "searching": true 옵션을 통해 활성화됩니다. 사용자가 테이블 상단에 위치한 검색창에 키워드를 입력하면, 해당 키워드를 포함하는 데이터만 필터링되어 실시간으로 보여집니다. 이 기능은 대량의 데이터를 다루는 웹사이트나 어드민 페이지에서 매우 유용하게 쓰입니다.

"pageLength": 50 옵션은 한 페이지에 보여줄 데이터의 기본 갯수를 지정하는 부분입니다. 만약 기본 설정이 50개라면 사용자는 한 페이지에 50개의 데이터만 확인할 수 있습니다. 물론 "lengthMenu": [25, 50, 100, 200, 500, 1000] 옵션을 사용하면 사용자가 직접 페이지 당 항목 갯수를 선택할 수 있는 메뉴가 제공되어 더욱 유연한 데이터 표시가 가능합니다. 사용자가 자신의 필요에 맞게 한 페이지에 보여줄 데이터의 수를 조절할 수 있으니 사용자 경험(UX) 향상에 큰 도움이 됩니다.

또한, "language" 옵션을 통해 테이블 내에 표시되는 텍스트들을 사용자 친화적으로 바꿀 수 있습니다. 예제에서는 "lengthMenu": "Show _MENU_ entries"와 "search": "Live Search:"를 사용하고 있는데, 이는 검색어나 항목 수에 대한 표시를 커스터마이징할 수 있는 방법입니다. 기본적으로 DataTables는 영어로 제공되지만, 원하는 언어로 변경하면 글로벌 사이트나 다양한 사용자층을 고려한 웹페이지를 만들 때 유리합니다.

이 외에도 DataTables는 플러그인 구조로 되어 있어 추가적인 기능들을 손쉽게 확장할 수 있습니다. 예를 들어, 특정 열에 필터링 옵션을 더하거나, 서버 사이드 데이터 처리 방식을 도입하여 더욱 방대한 데이터를 효율적으로 관리할 수 있는 기능 등을 제공합니다. 기본 설정만 잘 활용해도 충분히 강력한 데이터 표시 기능을 제공하지만, 필요에 따라 다양한 옵션과 플러그인을 조합하면 웹 개발자 입장에서 무궁무진한 확장성을 경험할 수 있습니다.

제이쿼리와 DataTables는 함께 사용할 때 그 효과가 배가됩니다. 제이쿼리를 통해 DOM 요소를 쉽게 선택하고 조작할 수 있으며, DataTables가 제공하는 다양한 옵션들은 복잡한 데이터를 간결하게 관리할 수 있도록 도와줍니다. 특히, 관리자 페이지나 대시보드에서 실시간 데이터 관리가 필요한 경우, DataTables의 검색, 정렬, 페이징 기능은 필수적입니다.

실제 웹 프로젝트에 DataTables를 도입할 때는 HTML 테이블 구조와 자바스크립트 초기화 코드를 적절히 연동하여 사용하게 됩니다. 예제 코드에서처럼 $('#myTable')을 사용하면, 아이디가 myTable인 테이블 요소를 선택해 DataTables를 적용합니다. 이러한 방식은 jQuery의 강력한 선택자 기능 덕분에 매우 직관적이고 간단합니다.

또한, DataTables는 반응형 디자인과도 잘 어울리기 때문에 모바일 환경에서도 데이터를 효율적으로 표시할 수 있습니다. 기본 제공되는 스타일을 활용하거나, 별도의 CSS 설정을 통해 원하는 디자인으로 커스터마이징할 수 있다는 점 또한 큰 장점입니다.

이처럼 DataTables는 웹 개발 초보자부터 전문가까지 모두에게 유용한 도구입니다. 간단한 코드 몇 줄만으로도 강력한 데이터 관리 기능을 구현할 수 있기 때문에, 데이터가 많은 웹 페이지를 운영하는 분들께 적극 추천할 만한 라이브러리입니다. 앞으로 프로젝트에서 데이터 테이블 기능이 필요하다면, 이 가이드를 참고하여 손쉽게 구현해 보시기 바랍니다.

제이쿼리 DataTables 사용법: 초보자를 위한 상세 가이드 및 추가 옵션 소개

웹 개발을 하다 보면 방대한 양의 데이터를 깔끔하게 정리하고 사용자에게 직관적으로 보여줄 필요가 생깁니다. 이런 상황에서 DataTables는 매우 유용한 도구로 자리 잡고 있습니다. 이번 글에서는 DataTables의 기본 기능뿐만 아니라 다양한 추가 옵션들에 대해 자세히 설명해 보겠습니다. 초보자도 쉽게 이해할 수 있도록 친절하게 안내해 드리니, 한 단계 업그레이드된 웹 테이블 구현 방법을 함께 알아보시기 바랍니다.

 

아래는 기본 설정과 더불어 추가 옵션들이 포함된 DataTables 초기화 코드 예제입니다.

// DataTables 초기 설정 예제
dataTable = $('#myTable').DataTable({
    "paging": true,              // 페이지네이션 활성화: 데이터를 여러 페이지로 분할해서 표시합니다.
    "ordering": true,            // 정렬 기능 활성화: 각 열을 클릭하면 오름차순/내림차순 정렬이 가능합니다.
    "searching": true,           // 검색 기능 활성화: 입력한 키워드에 따라 데이터를 필터링합니다.
    "pageLength": 50,            // 한 페이지에 표시할 기본 데이터 갯수
    "lengthMenu": [25, 50, 100, 200, 500, 1000],  // 사용자가 선택할 수 있는 페이지 당 데이터 갯수 옵션
    "language": {                // 테이블 내 텍스트를 사용자 맞춤형으로 변경
        "lengthMenu": "Show _MENU_ entries",
        "search": "Live Search:"
    },
    "order": [[0, 'desc']],      // 기본 정렬 옵션: 첫 번째 열을 내림차순으로 정렬
    "info": true,                // 테이블 하단에 현재 페이지 정보 및 총 데이터 수 등 표시
    "processing": true,          // 데이터 로딩 중 '처리 중' 메시지 표시: 서버 사이드 처리 시 유용
    "responsive": true,          // 반응형 디자인 적용: 다양한 기기에서도 테이블이 잘 보이도록 자동 조정
    "scrollX": true,             // 가로 스크롤 활성화: 넓은 테이블을 위한 스크롤바 제공
    "serverSide": false,         // 서버 사이드 처리를 사용할지 여부: false면 클라이언트에서 모든 데이터를 처리
    "ajax": "data.json",         // 외부 JSON 파일이나 API에서 데이터를 불러올 수 있음
    "deferRender": true,         // 초기 렌더링 시 데이터를 지연 로딩하여 성능 개선
    "stateSave": true,           // 페이지 상태(정렬, 검색, 페이징 등)를 저장해 새로고침 시에도 유지
    "dom": 'lBfrtip'             // 테이블 요소들의 배치를 제어: 검색창, 페이징, 버튼 등의 위치를 커스터마이징 가능
});

위 코드를 보면 DataTables가 제공하는 다양한 옵션들을 한눈에 확인할 수 있습니다. 각 옵션에 대해 조금 더 구체적으로 살펴보겠습니다.

  • paging
    데이터를 한 번에 모두 표시하지 않고 여러 페이지로 나누어 보여줍니다. 페이지네이션은 사용자가 한눈에 데이터를 파악하기 어렵거나, 데이터 양이 많을 때 유용합니다.
  • ordering & order
    테이블의 각 열을 클릭하면 오름차순 또는 내림차순으로 데이터를 정렬할 수 있도록 도와줍니다. 예제에서는 첫 번째 열이 내림차순으로 정렬되도록 초기 설정되어 있습니다.
  • searching
    실시간 검색 기능을 통해 사용자가 입력한 키워드와 일치하는 데이터를 필터링해 줍니다. 이 기능은 사용자가 원하는 정보를 빠르게 찾을 때 매우 편리합니다.
  • pageLength & lengthMenu
    한 페이지에 보여줄 데이터의 갯수를 기본값(여기서는 50)으로 지정하고, 사용자가 선택할 수 있는 옵션 목록(25, 50, 100, 200, 500, 1000)을 제공합니다. 데이터의 양과 사용자의 필요에 따라 페이지 당 항목 수를 자유롭게 조절할 수 있습니다.
  • language
    테이블 내에서 사용되는 텍스트들을 직접 수정할 수 있습니다. 기본 제공되는 영어 텍스트 대신 사이트의 컨셉이나 대상 사용자에 맞춰 커스터마이징할 수 있어, 국제화(다국어 지원)에도 유리합니다.
  • info
    테이블 하단에 현재 페이지의 데이터 개수, 총 데이터 수, 그리고 페이지 번호 등의 정보를 표시합니다. 이 옵션은 사용자가 현재 테이블의 상태를 한눈에 파악할 수 있게 도와줍니다.
  • processing
    데이터를 처리하는 동안 사용자에게 ‘로딩 중’ 메시지를 보여줌으로써 데이터가 준비될 때까지의 대기 시간을 보다 명확하게 전달합니다. 서버 사이드 처리를 도입한 경우 특히 유용합니다.
  • responsive
    다양한 화면 크기에서 테이블이 적절하게 표시되도록 도와줍니다. 데스크탑뿐 아니라 태블릿이나 모바일에서도 테이블의 가독성을 유지할 수 있게 해주어, 현대 웹 환경에 꼭 필요한 옵션입니다.
  • scrollX
    테이블의 내용이 화면 너비를 초과할 때 가로 스크롤바를 제공하여 사용자가 쉽게 전체 데이터를 볼 수 있도록 합니다. 넓은 데이터 셋이나 여러 열을 가진 테이블에서 유용합니다.
  • serverSide & ajax
    서버 사이드 처리를 활성화하면 클라이언트가 아닌 서버에서 데이터를 불러오고 처리하게 됩니다. 대용량 데이터를 다룰 때는 서버 부담을 줄이기 위해 이 옵션을 고려할 수 있습니다. 예제에서는 "serverSide": false로 클라이언트 사이드 처리를 사용하지만, "ajax": "data.json" 옵션을 통해 외부 데이터 소스에서 JSON 데이터를 불러오는 방법도 함께 보여주고 있습니다.
  • deferRender
    초기 로딩 시 모든 데이터를 한 번에 렌더링하지 않고, 사용자가 실제로 필요로 할 때 데이터를 렌더링합니다. 이를 통해 초기 페이지 로딩 속도를 향상시킬 수 있습니다.
  • stateSave
    페이지 내의 정렬, 검색, 페이징 등의 상태 정보를 로컬 스토리지에 저장하여, 페이지를 새로 고침하거나 재방문해도 사용자가 이전에 설정한 상태를 유지할 수 있도록 합니다.
  • dom
    DataTables에서 테이블의 레이아웃을 구성하는 HTML 요소들의 배치를 제어하는 옵션입니다. 'lBfrtip'과 같은 문자열을 사용해 검색창, 페이징, 버튼, 정보 영역 등의 위치와 순서를 조정할 수 있습니다. 이 옵션을 잘 활용하면 사용자의 사용 경험(UX)을 더욱 향상시킬 수 있습니다.

 

DataTables의 이러한 다양한 옵션들은 단순한 테이블을 넘어서, 사용자에게 풍부한 인터랙티브 기능을 제공하는 데 큰 도움을 줍니다. 특히 관리자 페이지나 대시보드, 통계 데이터를 다루는 웹사이트 등에서는 이처럼 여러 기능을 조합하여 데이터를 효과적으로 관리하고, 사용자에게 편리한 인터페이스를 제공할 수 있습니다.

제이쿼리와 DataTables의 조합은 웹 개발자에게 매우 강력한 도구입니다. 기본적인 테이블 기능을 넘어, 위에서 살펴본 추가 옵션들을 활용하면 상황에 맞게 유연하고, 성능 또한 최적화된 테이블을 손쉽게 구현할 수 있습니다. 다양한 옵션을 적절히 조합하여 자신만의 맞춤형 데이터 테이블을 만들어 보세요.

DataTables의 DOM 옵션 완벽 가이드

웹 개발을 하면서 데이터를 테이블 형식으로 깔끔하게 정리하는 일은 매우 중요합니다. DataTables는 이러한 작업을 도와주는 강력한 라이브러리로, 다양한 기능과 옵션을 통해 사용자 경험(UX)을 크게 향상시킬 수 있습니다. 그 중에서도 DOM 옵션은 테이블 내에 표시되는 여러 요소들의 위치와 순서를 자유롭게 제어할 수 있는 핵심 기능입니다.

DOM 옵션이란?

DataTables에서 제공하는 dom 옵션은 테이블의 레이아웃을 구성하는 HTML 요소들을 문자열 하나로 정의할 수 있게 해줍니다. 이 문자열은 각 요소들을 의미하는 알파벳 문자들의 조합으로 이루어지며, 문자 순서에 따라 최종 페이지에 렌더링되는 요소들의 위치가 결정됩니다. 기본값으로는 'lfrtip'이 사용되며, 여기서 각 문자는 다음과 같은 역할을 합니다.

'lBfrtip' 문자열의 구성 요소

최근에는 DataTables의 확장 기능과 연동하여 'lBfrtip'과 같이 Buttons 기능(B)이 추가된 형태로 사용되는 경우가 많습니다. 각 알파벳의 의미는 아래와 같습니다.

  • l (Length menu)
    사용자가 한 페이지에 표시할 데이터의 개수를 선택할 수 있는 드롭다운 메뉴입니다. 데이터의 양이 많을 때, 페이지 당 항목 수를 조절하여 보다 효율적으로 데이터를 탐색할 수 있습니다.
  • B (Buttons)
    DataTables의 Buttons 확장 기능과 연동되어, Excel, PDF 내보내기, 인쇄, 복사 등 다양한 액션을 수행할 수 있는 버튼들을 표시합니다. 버튼을 통해 데이터를 다양한 포맷으로 쉽게 변환하거나 출력할 수 있어 업무 효율성이 크게 향상됩니다.
  • f (Filter/Searching)
    테이블 상단에 위치하는 검색창으로, 사용자가 입력한 키워드에 따라 데이터를 실시간으로 필터링합니다. 이 기능은 대량의 데이터 중에서 원하는 정보를 빠르게 찾는 데 매우 유용합니다.
  • r (Processing display)
    데이터가 로드되거나 처리되는 동안 사용자에게 '처리 중' 메시지를 보여주는 영역입니다. 대용량 데이터를 다룰 때, 현재 진행 상황을 시각적으로 전달하여 사용자에게 명확한 피드백을 제공합니다.
  • t (Table)
    실제 데이터가 표시되는 테이블 영역입니다. 모든 행과 열이 이 부분에 렌더링되며, 사용자가 데이터를 확인하고 상호작용할 수 있는 핵심 부분입니다.
  • i (Information)
    현재 테이블 상태에 대한 정보를 보여주는 영역으로, 예를 들어 "총 100건 중 1~50건 표시"와 같은 내용이 포함됩니다. 이를 통해 사용자는 자신이 보고 있는 데이터의 범위를 쉽게 파악할 수 있습니다.
  • p (Pagination)
    여러 페이지에 걸친 데이터를 탐색할 수 있도록 돕는 페이지네이션 컨트롤입니다. '이전', '다음' 버튼 등을 통해 사용자가 원하는 페이지로 쉽게 이동할 수 있습니다.

DOM 옵션을 활용한 레이아웃 커스터마이징

dom 옵션의 가장 큰 장점은 바로 자유로운 레이아웃 구성입니다. 기본 문자열의 순서를 바꾸거나, HTML 태그와 클래스명을 추가하여 보다 정교하게 UI를 디자인할 수 있습니다. 예를 들어, Bootstrap과 함께 사용하면 다음과 같이 레이아웃을 세밀하게 조정할 수 있습니다.

$('#myTable').DataTable({
    dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + // 상단: 좌측에 길이 메뉴, 우측에 검색창 배치
         "<'row'<'col-sm-12'tr>>" +             // 중간: 테이블 본문 전체 너비로 배치
         "<'row'<'col-sm-5'i><'col-sm-7'p>>",     // 하단: 좌측에 정보 영역, 우측에 페이지네이션 배치
    // 기타 옵션 설정...
});

이처럼 dom 옵션을 사용하면 단순한 문자열 조합만으로도 테이블의 각 요소들이 어떻게 배치될지 세밀하게 제어할 수 있습니다. 또한, HTML 태그를 추가함으로써 CSS를 통한 스타일링이 가능해져, 사이트의 전체 디자인과도 자연스럽게 어우러지는 레이아웃을 구현할 수 있습니다.

DOM 옵션의 유연성과 사용자 경험 개선 효과

DOM 옵션은 DataTables의 다른 옵션들과 함께 사용될 때 더욱 빛을 발합니다.

  • 순서 조정: 원하는 순서대로 요소들을 배치하여, 사용자가 가장 필요로 하는 기능(예: 검색창이나 내보내기 버튼)을 눈에 띄게 배치할 수 있습니다.
  • 그룹화: HTML 태그를 사용해 관련 요소들을 그룹으로 묶을 수 있어, 보다 깔끔하고 직관적인 UI를 제공할 수 있습니다.
  • 반응형 디자인: 미디어 쿼리와 함께 사용하면, 데스크탑, 태블릿, 모바일 등 다양한 기기에서 최적의 레이아웃을 유지할 수 있습니다.

이처럼 DataTables의 dom 옵션은 테이블의 기본적인 기능뿐 아니라, 세련된 디자인과 직관적인 사용자 인터페이스를 구현하는 데 중요한 역할을 합니다. 웹 개발자라면 DOM 옵션을 적극 활용하여 사이트 방문자에게 최적의 데이터 탐색 환경을 제공해 보시기 바랍니다.

반응형
저작자표시 비영리 변경금지 (새창열림)