[JS] Bootstrap Table 라이브러리

html에서 표를 그리기 위해서 사용하는 태그는 <table> 이라고는 다 알고 있을것이다.

 

이번 포스팅에서는 Bootstrap 에서 제공하는 테이블 라이브러리를 소개하고자 한다.

(Bootstrap에 대해서는 아래 참고 포스팅 참고)

https://bootstrap-table.com/

Bootstrap Table · An extended table to the integration with some of the most widely used CSS frameworks. (Supports Bootstrap, S

 

사용법은 위 사이트에서 설명이 되어있지만 간단하게 설명하면

아래 코드를 html에 추가하여 사용한다.

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"> https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js">

추가적으로 Table태그 내에 data- 속성을 사용해서 jQuery 기반으로 표를 관리할 수 있는데 사용되는 속성 값들 몇개 정리하고자 포스팅 작성한다.

 

• data-search="false": 테이블 상단에 검색 창을 추가하지 않도록 설정
• data-filter-control="true": 컬럼별 필터 기능을 활성화
• data-pagination="true" 및 data-page-size="300": 페이지네이션 기능을 활성화하고 한 페이지당 표시할 행의 수를 300으로 설정
• data-show-export="true": 테이블 데이터를 다양한 형식(예: CSV, Excel)으로 내보내기 기능을 추가
• data-show-refresh="true": 데이터 새로 고침 버튼을 추가
• data-show-columns="true" 및 data-show-columns-toggle-all="true": 컬럼 보이기/숨기기 설정 기능을 추가
• data-sticky-header="true": 테이블 헤더를 고정해, 스크롤 시에도 항상 헤더가 보이도록 설정
• data-fixed-columns="true": 왼쪽 컬럼을 고정하여 스크롤 시에도 첫 번째 열이 항상 보이도록 설정
• data-page-list="[10, 25, 50, 100, All]": 페이지 당 표시할 행 수를 선택할 수 있는 옵션 목록을 설정, 사용자가 선택할 수 있는 값이 [10, 25, 50, 100, All]로 설정
• data-export-data-type="all": 내보내기(export) 기능에서 데이터를 모두 포함하도록 설정, 테이블의 일부 데이터만 내보내고 싶다면, 다른 값(예: basic 또는 selected)으로 변경할 수 있음
• data-show-fullscreen="true": 테이블을 전체 화면으로 전환하는 버튼을 표시
• data-click-to-select="false": 행을 클릭해도 선택되지 않도록 설정. 이 값이 true이면 행을 클릭하면 선택
• data-minimum-count-columns="2": 컬럼 설정 메뉴에서 숨기지 못하도록 할 최소 컬럼 개수를 지정. 여기서는 최소 2개의 컬럼이 항상 표시되어야 함
• data-id-field="hseq": 각 행의 고유 식별자로 사용할 필드를 지정. 이 예제에서는 hseq 필드를 ID로 사용
• data-select-id-field="hseq": 선택한 행의 ID 필드를 지정. data-id-field와 마찬가지로, hseq 필드를 사용하여 선택된 행의 ID로 설정
• data-resizable="true": 컬럼의 크기를 사용자가 직접 조절할 수 있도록 설정
• data-editable="false": 테이블 셀이 편집 가능한지 여부를 설정. false이므로 사용자는 셀 내용을 직접 편집할 수 없음
• data-show-search-clear-button="true": 검색 입력 창 옆에 검색 내용을 지울 수 있는 버튼을 표시
• data-detail-view="false" 및 data-detail-view-by-click="false": data-detail-view는 행 세부 정보 보기를 설정하는 옵션. false로 설정되어 있어, 이 기능이 비활성화되어 있음.
• data-detail-view-by-click="false"는 행을 클릭했을 때 세부 정보를 보여주는 기능을 false로 비활성화하는 역할
• data-row-style="rowStyle": 행 스타일을 지정하는 함수로 rowStyle이라는 JavaScript 함수가 연결. 이 함수를 통해 행별 스타일을 동적으로 변경할 수 있음
• data-detail-view-icon="false": 세부 보기 아이콘을 표시하지 않도록 설정
• data-search-on-enter-key="true": 검색 시 Enter 키를 눌렀을 때에만 검색을 시작하도록 설정
• data-sort-select-options="true": 정렬 선택 옵션을 활성화
• data-sticky-header="true": 테이블의 헤더를 스크롤 시에도 화면 상단에 고정되도록 설정

---

참고 포스팅

https://thenicesj.tistory.com/65

bootstrap 오픈데이터 사용법