bootstrapTable_01

https://examples.bootstrap-table.com/#welcome.html

Bootstrap Table Examples

 

01. 개요

정렬, 필터링, 검색, 페이지네이션 등 기본적으로 필요한 대부분의 기능들이 구현되어 있는 api이다.

직접 이런 기능들을 구현하라고 하면 id와 class를 덕지덕지 붙여서 어떻게 만들어보겠지만 시간 투자대비 효율은 좋지 않다.

표로 만들 데이터와 옵션값만 설정해주면 알아서 생성해주기 때문에 편하지만...

옵션으로 만들어진 텍스트와 버튼을 수정하려고 하면 머리가 아파진다.

 

02. 준비

- CSS

<link rel="stylesheet" href="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.css">

- JS

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.bundle.min.js" ></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table@1.19.1/dist/extensions/filter-control/bootstrap-table-filter-control.min.js"></script>

'''

기묘한 묘험

bootstraptable js파일과 기본 bootstrap.js 파일을 가져와야 하는데,

bootstrap.min.js를 사용할 때에는 드롭다운 메뉴가 정상적으로 작동하지 않았다.

Uncaught TypeError: a.default is not a constructor....(a.default보다는 u.defalut 라고 많이 출력됐다)

스택오버플로우에서 bundle.min.js를 써보라는 답이 있길래 해봤더니 한번에 해결됐다.

'''

 

 

03. 사용

- HTML

<table id="raw-table" data-toggle="raw-table">
	<thead>
    	<tr class="btn-reveal-trigger" style="background-color: rgba(224, 224, 224, 0.8);">
        	<th class="align-middle white-space-nowrap" data-checkbox="true"></th>
            <th scope="col" data-field="raw-date" data-filter-control="select">날짜</th>
            <th scope="col" data-field="raw-lot">lot</th>
            <th scope="col" data-field="raw-wafer">wafer</th>
        </tr>\
    </thead>\
    <tbody id="raw-tbody">\
    </tbody>\
</table>';

- JS

$('#raw-table').bootstrapTable({
	locale : 'ko-KR',
	data : data,
	pagination : true,
	pageSize : 10,
	pageList : [10, 20, 50, 100, 200],
	filter : true,
	clickToSelect : true,
	showRefresh : true,
});

옵션은 다음에 정리하고 우선 테이블에 들어갈 데이터를 채우는 방법은 크게 세 가지로 나뉜다.

상세 매뉴얼은 bootstrap 페이지에 정리가 되어 있다.

1. HTML 코드에서 작성

- html에서 테이블을 작성하는 방법대로 <tr>, <td> 태그들을 사용해서 작성하면 그 데이터를 바탕으로 테이블을 생성한다.

2. Data 값 부여

- javascript에서 직접 data 객체를 편집해서 부여하는 방식이다.

- 한 페이지에 한 성격의 데이터만 렌더할 경우보다는 비동기 방식으로 사용자의 선택에 따라 다른 성격의 데이터를 불러와 테이블로 만들 경우에 유용한 방식 같다.

- 서버에서 data를 json형식으로 파싱해서 전송하면 필요한대로 가공해서 사용이 가능하다.

- data구조 예시

let data = [
      {
        'id': 0,
        'name': 'Item 0',
        'price': '$0'
      },
      {
        'id': 1,
        'name': 'Item 1',
        'price': '$1'
      }
    ]

3. URL 조회

- 특정 URL 페이지를 조회해서 그 값들로 테이블을 생성한다.