테이블 옵션

Bootstrap Table의 테이블 옵션 API입니다.

이 페이지에서

테이블 옵션은 jQuery.fn.bootstrapTable.defaults에 정의되어 있습니다.

주의: 아래의 옵션 이름（예: ajax、buttons、cache）은 JavaScript를 통해 Bootstrap Table을 초기화할 때 사용되는 정확한 속성 이름입니다.

예시：

$('#table').bootstrapTable({
  ajax: yourFunction,
  cache: false,
  ...
})

-

속성: data-toggle
타입: String
세부 정보:

JavaScript를 작성하지 않고도 Bootstrap Table을 활성화할 수 있습니다.
기본값: 'table'
예시: From HTML

ajax

속성: data-ajax
타입: Function
세부 정보:

AJAX 호출 방법을 대체합니다. jQuery AJAX 메서드와 동일한 API를 구현해야 합니다.
기본값: undefined
예시: Table AJAX

ajaxOptions

속성: data-ajax-options
타입: Object
세부 정보:

AJAX 요청을 제출할 때 추가 옵션입니다. 참조: jQuery.ajax.
기본값: {}
예시: AJAX Options

buttons

속성: data-buttons
타입: Function
세부 정보:

버튼 바（테이블 오른쪽 상단）에 사용자 정의 버튼을 생성/추가할 수 있습니다. 이러한 버튼은 테이블 옵션 buttonsOrder를 통해 정렬할 수 있으며，이벤트에 해당하는 키/이름을 사용하여 정렬해야 합니다.

사용자 정의 버튼은高度로 구성할 수 있으며，다음과 같은 옵션이 있습니다：
- text
  - 설명：이 옵션은 showButtonText 테이블 옵션에 사용됩니다.
  - 타입：String
- icon
  - 설명：이 옵션은 showButtonIcons 테이블 옵션에 사용됩니다.
  - 타입：String - 아이콘 클래스만 필요합니다. 예: fa-users
- render
  - 설명：이 옵션을 false로 설정하면 기본적으로 버튼이 숨겨지며，데이터 속성 data-show-button-name="true"를 추가하면 버튼이 다시 표시됩니다.
- attributes
  - 설명：이 옵션을 사용하면 title과 같은 추가 HTML 속성을 추가할 수 있습니다.
  - 타입：Object
  - 예시：{title: 'Button title'}
- html
  - 설명：자동으로 HTML을 생성하고 싶지 않은 경우 이 옵션을 사용하여 사용자 정의 HTML을 삽입할 수 있습니다. event 옵션은 사용자 정의 HTML에 name="button-name"이 포함된 경우에만 유효합니다. 이 옵션을 사용하면 다음 옵션이 무시됩니다：
    - text
    - icon
    - attributes
  - 타입：Function|String
- event
  - 설명：버튼에 이벤트를 추가하려면 이 옵션을 사용하세요.
  - 타입：Function|Object|String
event 옵션은 세 가지 방식으로 구성할 수 있습니다. click 이벤트 사용：
```
{
  'event': () => { }
}
```
사용자 정의 이벤트 유형 사용：
```
  {
    'event': {
      'mouseenter': () => { }
    }
  }
```
여러 사용자 정의 이벤트 유형 사용：
```
  {
    'event': {
      'click': () => { },
      'mouseenter': () => { },
      'mouseleave': () => { }
    }
  }
```
팁： 인라인 함수 외에도 함수 이름을 사용할 수 있습니다.

구성된 사용자 정의 버튼은 다음과 같이 표시될 수 있습니다：
```
{
  btnRemoveEvenRows: {
    'text': 'Remove even Rows',
    'icon': 'fa-trash',
    'event': () => {
      //DO STUFF TO REMOVE EVEN ROWS
    },
    'attributes': {
      'title': 'Remove all rows which has a even id'
    }
  }
}
```
기본값: {}
예시: Buttons

buttonsAlign

속성: data-buttons-align
타입: String
세부 정보:

도구 모음 버튼의 정렬 방식을 지정합니다. 'left'（왼쪽 정렬）또는 'right'（오른쪽 정렬）을 사용할 수 있습니다.
기본값: 'right'
예시: Buttons Align

buttonsAttributeTitle

속성: data-buttons-attribute-title
타입: String
세부 정보:

도구 모음 버튼의 title 속성을 사용자 정의합니다. 주로 도구 모음 스타일을 사용자 정의하는 데 사용됩니다.
기본값: 'title'
예시: Buttons Attribute Title

buttonsClass

속성: data-buttons-class
타입: String
세부 정보:

테이블 버튼의 클래스를 정의합니다（'btn-' 뒤에 추가）.
기본값: 'secondary'
예시: Buttons Class

buttonsOrder

속성: data-buttons-order
타입: Array
세부 정보:

도구 모음 버튼의 사용자 정의 정렬 방식을 설정합니다.
기본값: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']
예시: Buttons Order

buttonsPrefix

속성: data-buttons-prefix
타입: String
세부 정보:

테이블 버튼의 접두사를 정의합니다.
기본값: 'btn'
예시: Buttons Prefix

buttonsToolbar

속성: data-buttons-toolbar
타입: String/Node
세부 정보:

사용자 정의 버튼 도구 모음에 대한 jQuery 선택기를 지정합니다. 예: #buttons-toolbar、.buttons-toolbar，또는 DOM 노드.
기본값: undefined
예시: Buttons Toolbar

cache

속성: data-cache
타입: Boolean
세부 정보:

false로 설정하면 AJAX 요청 캐싱을 비활성화할 수 있습니다.
기본값: true
예시: Table Cache

cardView

속성: data-card-view
타입: Boolean
세부 정보:

true로 설정하면 카드 뷰 테이블（모바일 뷰와 같이）를 표시할 수 있습니다.
기본값: false
예시: Card View

checkboxHeader

속성: data-checkbox-header
타입: Boolean
세부 정보:

false로 설정하면 제목 행의 전체 선택 체크박스를 숨길 수 있습니다.
기본값: true
예시: Checkbox Header

classes

속성: data-classes
타입: String
세부 정보:

테이블의 클래스 이름입니다. 'table'、'table-bordered'、'table-hover'、'table-striped'、'table-dark'、'table-sm' 和 'table-borderless'를 사용할 수 있습니다. 기본 테이블은 테두리 스타일입니다.
기본값: 'table table-bordered table-hover'
예시: Table Classes

clickToSelect

속성: data-click-to-select
타입: Boolean
세부 정보:

true로 설정하면 행을 클릭하여 선택하는 기능을 활성화할 수 있습니다.
기본값: true
예시: Click To Select

columns

속성: -
타입: Array
세부 정보:

테이블 열 구성 개체입니다. 자세한 내용은 열 옵션을 참조하세요.
기본값: []
예시: Table Columns

contentType

속성: data-content-type
타입: String
세부 정보:

원격 데이터를 요청할 때의 Content-Type입니다. 예: application/x-www-form-urlencoded.
기본값: 'application/json'
예시: Content Type

customSearch

속성: data-custom-search
타입: Function
세부 정보:

내장 검색 기능을 대체할 사용자 정의 검색 함수입니다. 세 개의 매개변수를接受합니다：
- data：테이블 데이터입니다.
- text：검색 텍스트입니다.
- filter：filterBy 메서드에서 온 필터 개체입니다.
사용 예시：
```
function customSearch(data, text) {
  return data.filter(function (row) {
    return row.field.indexOf(text) > -1
  })
}
```
기본값: undefined
예시: Custom Search

customSort

속성: data-custom-sort
타입: Function
세부 정보:

내장 정렬 기능을 대체할 사용자 정의 정렬 함수입니다. 세 개의 매개변수를接受합니다：
- sortName：정렬 이름입니다.
- sortOrder：정렬 순서입니다.
- data：행 데이터입니다.
기본값: undefined
예시: Custom Order

data

속성: data-data
타입: Array | Object
세부 정보:

로드할 데이터입니다.

데이터에 _<field>_rowspan 또는 _<field>_colspan 속성이 있으면 셀이 자동으로 병합됩니다. 예:
```
$table.bootstrapTable({
  data: [
    {
      id: 1,
      name: 'Item 1',
      _name_rowspan: 2,
      price: '$1'
    },
    {
      id: 2,
      price: '$2'
    }
  ]
})
```
이 기능을 사용하는 경우，형식이 올바른지 확인하기 위해 data가 필요합니다.
기본값: []
예시: From Data

dataField

속성: data-data-field
타입: String
세부 정보:

전달된 JSON에서 'rows' 데이터 목록을 포함하는 키 이름을 지정합니다.
기본값: 'rows'
예시: Total/Data Field

dataType

속성: data-data-type
타입: String
세부 정보:

서버에서 반환할 것으로 예상하는 데이터 유형입니다.
기본값: 'json'
예시: Data Type

detailFilter

속성: data-detail-filter
타입: Function
세부 정보:

detailView가 true로 설정된 경우，각 행의 확장 기능을 제어합니다. true를 반환하면 해당 행을 확장할 수 있으며；false를 반환하면 해당 행을 확장할 수 없습니다. 기본 함수는 true를 반환하여 모든 행의 확장을 허용합니다.
기본값: function(index, row) { return true }
예시: Detail Filter

detailFormatter

속성: data-detail-formatter
타입: Function
세부 정보:

detailView가 true로 설정된 경우，세부 정보 보기 내용을 형식화하는 데 사용됩니다. 함수는 문자열을 반환할 수 있으며，이 문자열은 세부 정보 보기 셀에 추가됩니다；또는 세 번째 매개변수（대상 셀의 jQuery 요소）를 사용하여 요소를 직접 렌더링할 수도 있습니다.
기본값: function(index, row, element) { return '' }
예시: Detail View

detailView

속성: data-detail-view
타입: Boolean
세부 정보:

true로 설정하면 세부 정보 보기 테이블을 표시할 수 있습니다. 테이블을 새로고침할 때 세부 정보 보기 상태를 유지하려면 uniqueId 옵션을 설정할 수 있습니다.
기본값: false
예시: Detail View UniqueId

detailViewAlign

속성: data-detail-view-align
타입: String
세부 정보:

세부 정보 보기 아이콘의 정렬 방식을 설정합니다. 'left'（왼쪽 정렬）또는 'right'（오른쪽 정렬）을 사용할 수 있습니다.
기본값: 'left'
예시: Detail view Align

detailViewByClick

속성: data-detail-view-by-click
타입: Boolean
세부 정보:

true로 설정하면 셀을 클릭할 때 세부 정보 보기를 전환할 수 있습니다.
기본값: false
예시: Detail View Icon

detailViewIcon

속성: data-detail-view-icon
타입: Boolean
세부 정보:

true로 설정하면 세부 정보 보기 열（더하기/빼기 아이콘）을 표시할 수 있습니다.
기본값: true
예시: Detail View Icon

escape

속성: data-escape
타입: Boolean
세부 정보:

HTML을 삽입하기 위해 문자열을 이스케이프하며，&、<、>、"、` 和 ' 문자를替换합니다. 열 제목의 이스케이프를 비활성화하려면 escapeTitle 옵션을 설정하세요.
기본값: false
예시: Table Escape

escapeTitle

속성: data-escape-title
타입: Boolean
세부 정보:

escape 옵션을 열 제목에 적용할지 여부를 전환합니다.
기본값: true
예시: Table Escape title

속성: data-filter-options
타입: Boolean
세부 정보:

필터 알고리즘의 기본 옵션을 정의합니다. filterAlgorithm: 'and'는 모든 필터가 일치해야 함을 의미하며，filterAlgorithm: 'or'는 필터 중 하나만 일치해도 됨을 의미합니다.
기본값: { filterAlgorithm: 'and' }
예시: Filter Options

fixedScroll

속성: data-fixed-scroll
타입: Boolean
세부 정보:

true로 설정하면 테이블底部에 고정 스크롤 막대를 표시할 수 있습니다.
기본값: false
예시: Fixed Scroll

footerField

속성: data-footer-field
타입: String

세부 정보:

푸터 객체의 키 이름을 정의합니다（데이터 배열 또는 서버 응답 JSON에서）. 푸터 객체는 푸터 colspan과 푸터 값을 설정/정의하는 데 사용할 수 있습니다. data-pagination이 true이고 data-side-pagination이 server일 때만 적용됩니다.

  {
    "rows": [
      {
        "id": 0,
        "name": "Item 0",
        "price": "$0",
        "amount": 3
      }
    ],
    "footer": {
      "id": "footer id",
      "_id_colspan": 2,
      "name": "footer name"
    }
  }

기본값: footerField
예시: Footer Field

footerStyle

속성: data-footer-style
타입: Function
세부 정보:

푸터 스타일 형식화 함수입니다. 하나의 매개변수를接受합니다：
- column：열 객체입니다.
classes 또는 css를 지원합니다. 사용 예시：
```
function footerStyle(column) {
  return {
    css: {
      'font-weight': 'bold'
    }
  }
}
```
기본값: undefined
예시: Footer Style

headerStyle

속성: data-header-style
타입: Function
세부 정보:

헤더 스타일 형식화 함수입니다. 하나의 매개변수를接受합니다：
- column：열 객체입니다.
classes 또는 css를 지원합니다. 사용 예시：
```
function headerStyle(column) {
  return {
    css: {
      'font-weight': 'bold'
    }
  }
}
```
기본값: undefined
예시: Header Style

height

속성: data-height
타입: Number
세부 정보:

고정 헤더 기능을 활성화하기 위해 테이블 높이를 설정합니다. 내용이 설정된 높이를 초과하면 테이블에 수직 스크롤 막대가 표시됩니다.
기본값: undefined
예시: Table Height

icons

속성: data-icons
타입: Object
세부 정보:

도구 모음、페이징和 세부 정보 보기에서 사용되는 아이콘을 정의합니다.

기본값:

{
  paginationSwitchDown: 'fa-caret-square-down',
  paginationSwitchUp: 'fa-caret-square-up',
  refresh: 'fa-sync',
  toggleOff: 'fa-toggle-off',
  toggleOn: 'fa-toggle-on',
  columns: 'fa-th-list',
  fullscreen: 'fa-arrows-alt',
  detailOpen: 'fa-plus',
  detailClose: 'fa-minus'
}

예시: Table Icons

iconSize

속성: data-icon-size
타입: String
세부 정보:

아이콘 크기입니다. 'lg'、'sm'、'xs' 或 'none'을 사용할 수 있습니다.
기본값: undefined
예시: Icon Size

iconsPrefix

속성: data-icons-prefix
타입: String

세부 정보:

아이콘 세트 이름을 정의합니다. 기본적으로，이 옵션은 테마에 의해 자동으로 계산됩니다.

{
  bootstrap3: 'glyphicon',
  bootstrap4: 'fa',
  bootstrap5: 'bi',
  'bootstrap-table': 'icon',
  bulma: 'fa',
  foundation: 'fa',
  materialize: 'material-icons',
  semantic: 'fa'
}

기본값: undefined
예시: Icons Prefix

idField

속성: data-id-field
타입: String
세부 정보:

체크박스/라디오 버튼 값으로 사용할 필드를 지정합니다. selectItemName 옵션에 대응합니다.
기본값: undefined
예시: Id Field

ignoreClickToSelectOn

속성: data-ignore-click-to-select-on
타입: Function
세부 정보:

클릭할 때 clickToSelect 기능을 무시해야 하는 요소를 정의합니다. 함수는 하나의 매개변수를接受합니다：
- element：클릭된 DOM 요소입니다.
true를 반환하면 해당 요소 클릭을 무시합니다（행 선택이 트리거되지 않음），false를 반환하면 클릭을 정상적으로 처리합니다（행 선택이 트리거됨）. 이 옵션은 clickToSelect가 true일 때만 적용됩니다.
기본값: { return ['A', 'BUTTON'].includes(tagName) }
예시: Ignore Click To Select On

loadingFontSize

속성: data-loading-font-size
타입: String
세부 정보:

로딩 텍스트의 글꼴 크기를 정의합니다. 기본값은 'auto'이며，테이블 너비에 따라 12px에서 32px 사이에서 자동으로 계산됩니다.
기본값: 'auto'
예시: Loading Font Size

loadingTemplate

속성: data-loading-template
타입: Function
세부 정보:

사용자 정의 로딩 템플릿입니다. 매개변수 객체에는 다음이 포함됩니다：
- loadingMessage：formatLoadingMessage 지역화 문구입니다.

기본값:

function (loadingMessage) {
  return '<span class="loading-wrap">' +
    '<span class="loading-text">' +
    loadingMessage +
    '</span>' +
    '<span class="loading-spinner"></span>' +
    '</span>'
}

예시: Loading Template

locale

속성: data-locale
타입: String
세부 정보:

테이블에서 사용할 언어 환경을 설정합니다（예: 'zh-CN'）. 이 옵션을 사용하기 전에，해당 언어 환경 파일을 미리 로드해야 합니다.

시스템은 언어 환경 후보机制을 지원하며，다음 우선 순위로 로드를 시도합니다：
- 첫 번째 우선 순위：지정된 전체 언어 환경을 로드하려고 시도합니다（예: 'zh-CN'）
- 두 번째 우선 순위：밑줄 _를 하이픈 -으로 변환하고 지역 코드를 대문자로 변경하려고 시도합니다（예: 'zh_CN'을 'zh-CN'으로 변환）
- 세 번째 우선 순위：짧은 언어 코드를 사용하려고 시도합니다（예: 'zh-CN'에서 'zh'로降级）
- 마지막 대안：마지막으로 로드된 언어 환경 파일을 사용합니다（언어 환경 파일이 로드되지 않은 경우，내장 기본 언어 환경을 사용）
참고：이 옵션을 undefined 또는 빈 문자열로 설정하면，시스템은 자동으로 마지막으로 로드된 언어 환경을 사용합니다（언어 환경 파일이 로드되지 않은 경우，기본적으로 'en-US'를 사용）.
기본값: undefined
예시: Table Locale

maintainMetaData

속성: data-maintain-meta-data
타입: Boolean
세부 정보:

true로 설정하면 페이지를 전환하거나 검색할 때 다음 메타데이터를 유지할 수 있습니다：
- 선택된 행
- 숨겨진 행
기본값: false
예시: Maintain Meta Data

method

속성: data-method
타입: String
세부 정보:

원격 데이터를 요청하는 메서드 유형입니다.
기본값: 'get'
예시: Method

minimumCountColumns

속성: data-minimum-count-columns
타입: Number
세부 정보:

열 드롭다운 목록에서 숨겨진 최소 열 수입니다.
기본값: 1
예시: Minimum Count Columns

multipleSelectRow

속성: data-multiple-select-row
타입: Boolean
세부 정보:

true로 설정하면 다중 행 선택 기능을 활성화할 수 있습니다. 활성화后，사용자는 다음과 같은 방식으로 다중 행을 선택할 수 있습니다：
- Ctrl+클릭：단일 행을 선택하거나 선택을 취소합니다（다른 행의 선택 상태 유지）
- Shift+클릭：현재 선택된 행에서 클릭한 행까지의 모든 행을 선택합니다（범위 선택）
- 일반 클릭：수정 키를 누르지 않은 경우，다른 행의 선택을 취소하고 현재 클릭한 행만 선택합니다
기본값: false
예시: Multiple Select Row

pageList

속성: data-page-list
타입: Array
세부 정보:

페이징을 설정할 때，선택 목록을 통해 페이지 크기를 초기화합니다. 'all' 또는 'unlimited' 옵션이 포함되어 있으면 모든 레코드가 테이블에 표시됩니다.

팁：테이블 행 수가 옵션 수보다 적으면 옵션이 자동으로 숨겨집니다. 이 기능을 비활성화하려면 smartDisplay 를 false로 설정하세요.
기본값: [10, 25, 50, 100]
예시: Page List

pageNumber

속성: data-page-number
타입: Number
세부 정보:

페이징 속성을 설정할 때，페이지 번호를 초기화합니다.
기본값: 1
예시: Page Number

pageSize

속성: data-page-size
타입: Number
세부 정보:

페이징 속성을 설정할 때，페이지 크기를 초기화합니다.
기본값: 10
예시: Page Size

pagination

속성: data-pagination
타입: Boolean
세부 정보:

true로 설정하면 페이징 구성 요소를 표시할 수 있습니다.
기본값: false
예시: Pagination

paginationDetailHAlign

속성: data-pagination-detail-h-align
타입: String
세부 정보:

페이징 세부 정보의 정렬 방식을 설정합니다. 'left'（왼쪽 정렬）또는 'right'（오른쪽 정렬）을 사용할 수 있습니다.
기본값: 'left'
예시: Pagination H Align

paginationHAlign

속성: data-pagination-h-align
타입: String
세부 정보:

페이징의 정렬 방식을 설정합니다. 'left'（왼쪽 정렬）또는 'right'（오른쪽 정렬）을 사용할 수 있습니다.
기본값: 'right'
예시: Pagination H Align

paginationLoadMore

속성: data-pagination-load-more
타입: Boolean
세부 정보:

true로 설정하면 페이징을 통해 더 많은 데이터를 로드할 수 있습니다. 클라이언트 측 페이징에서만 사용합니다. 일반적으로，“더 보기” 기능을 구현하려면 반환된 데이터를 처리하기 위해 responseHandler와 함께 사용해야 합니다.

이 기능은 주로 총 페이지 수가 알려지지 않은 시나리오에 사용됩니다.这种情况下，确切的总数를 표시하거나 총 페이지 수를 계산할 수 없습니다. 대신，“100+“와 같은 표시 형식을 사용하여 표시된 계수 외에 다른 항목이 있음을 나타낼 수 있습니다. 사용자가 마지막 페이지로 이동하면 더 많은 데이터가 로드되고 페이징 정보가 업데이트됩니다. 이 프로세스는 모든 데이터가 로드될 때까지 계속됩니다.
기본값: false
예시: Pagination Load More

paginationLoop

속성: data-pagination-loop
타입: Boolean
세부 정보:

true로 설정하면 페이징 루프를 활성화할 수 있습니다.
기본값: false
예시: Pagination Loop

paginationNextText

속성: data-pagination-next-text
타입: String
세부 정보:

페이징 세부 정보에서 다음 페이지 버튼에 표시될 아이콘 또는 텍스트를 설정합니다.
기본값: '›'
예시: Pagination Text

paginationPagesBySide

속성: data-pagination-pages-by-side
타입: Number
세부 정보:

현재 페이지의 각 측（오른쪽、왼쪽）에 표시될 페이지 수입니다.
기본값: 1
예시: Pagination Index Number

paginationParts

속성: data-pagination-parts
타입: Array
세부 정보:

이러한 옵션은 페이징의 어떤 부분이 표시되어야 하는지 정의합니다.
- pageInfo 현재 페이지에 어떤 데이터 집합이 표시될지 표시합니다（예: Showing 1 to 10 of 54 rows）.
- pageInfoShort pageInfo와 비슷하지만，테이블에 몇 행이 있는지만 표시합니다（예: Showing 54 rows）.
- pageSize 페이지에 몇 행을 표시해야 하는지를 정의하는 드롭다운 목록을 표시합니다.
- pageList 페이징의 주요 부분（페이지 목록）을 표시합니다.
기본값: ['pageInfo', 'pageSize', 'pageList']
예시: Pagination Parts

paginationPreText

속성: data-pagination-pre-text
타입: String
세부 정보:

페이징 세부 정보에서 이전 페이지 버튼에 표시될 아이콘 또는 텍스트를 설정합니다.
기본값: '‹'
예시: Pagination Text

paginationSuccessivelySize

속성: data-pagination-successively-size
타입: Number
세부 정보:

한 행에 표시될 최대 연속 페이지 수입니다.
기본값: 5
예시: Pagination Index Number

paginationUseIntermediate

속성: data-pagination-use-intermediate
타입: Boolean
세부 정보:

빠른 액세스를 위해 중간 페이지를 계산하고 표시합니다.
기본값: false
예시: Pagination Index Number

paginationVAlign

속성: data-pagination-v-align
타입: String
세부 정보:

페이징의 수직 정렬 방식을 설정합니다. 'top'、'middle' 或 'bottom'을 사용할 수 있습니다.
기본값: 'bottom'
예시: Pagination V Align

queryParams

속성: data-query-params
타입: Function
세부 정보:

원격 데이터를 요청할 때，queryParams를 수정하여 추가 매개변수를 보낼 수 있습니다.

queryParamsType = 'limit'인 경우，params 객체에는 limit、offset、search、sort、order가 포함됩니다.

그렇지 않은 경우，pageSize、pageNumber、searchText、sortName、sortOrder를 포함합니다.

요청을 중지하려면 false를 반환하세요.
기본값: function(params) { return params }
예시: Query Params

queryParamsType

속성: data-query-params-type
타입: String
세부 정보:

RESTFul 유형의 쿼리 매개변수를 보내려면 'limit'으로 설정하세요.
기본값: 'limit'
예시: Query Params Type

regexSearch

속성: data-regex-search
타입: Boolean
세부 정보:

정규식 검색을 활성화하려면 true로 설정하세요. 이 옵션을 활성화하면 정규식을 사용하여 검색할 수 있습니다. 예를 들어，[47a]$는 4、7 또는 a로 끝나는 모든 항목을 검색합니다. 정규식은 /[47a]$/gim 또는 [47a]$와 같이 플래그 없이 입력할 수 있습니다. 기본 플래그는 gim입니다.
기본값: false
예시: Regex Search

rememberOrder

속성: data-remember-order
타입: Boolean
세부 정보:

각 열의 순서를 기억하려면 true로 설정하세요.
기본값: false
예시: Remember Order

responseHandler

속성: data-response-handler
타입: Function
세부 정보:

원격 데이터를 로드하기 전에 응답 데이터 형식을 처리합니다. 매개변수 객체에는 다음이 포함됩니다:
- res：응답 데이터.
- jqXHR：jqXHR 객체，XMLHTTPRequest 객체의 확장입니다. 자세한 내용은 jqXHR 타입을 참조하세요.
기본값: function(res) { return res }
예시: Response Handler

rowAttributes

속성: data-row-attributes
타입: Function
세부 정보:

행 속성 형식화 함수，두 개의 매개변수를接受합니다:
- row：행 레코드 데이터.
- index：행 인덱스.
모든 사용자 정의 속성을 지원합니다.
기본값: {}
예시: Row Attributes

rowStyle

속성: data-row-style
타입: Function
세부 정보:

행 스타일 형식화 함수，두 개의 매개변수를接受합니다:
- row：행 레코드 데이터.
- index：행 인덱스.
모든 사용자 정의 스타일을 지원합니다.
기본값: {}
예시: Row Style

search

속성: data-search
타입: Boolean
세부 정보:

검색 입력을 활성화합니다.

세 가지 검색 방법이 있습니다:
- 값이 검색 쿼리를 포함합니다（기본값）. 예시：Github에는 git이 포함됩니다.
- 값이 검색 쿼리와 동일해야 합니다. 예시：Github（값）및 Github（검색 쿼리）.
- 비교（<、>、<=、=<、>=、=>）. 예시：4는 3보다 큽니다.
참고：
- 사용자 정의 검색 입력을 사용하려면 searchSelector를 사용하세요.
- 정규식을 사용하여 검색하려면 regexSearch 옵션을 사용할 수도 있습니다.
- 서버 측 페이징에 검색 가능한 매개변수를 보내려면 searchable 옵션을 사용하세요.
기본값: false
예시: Table Search

searchable

속성: data-searchable
타입: Boolean
세부 정보:

서버 측 페이징을 사용할 때 서버에 검색 가능한 매개변수를 보내려면 true로 설정하세요.
기본값: false
예시: Searchable

searchAccentNeutralise

속성: data-search-accent-neutralise
타입: Boolean
세부 정보:

악센트 중립화 기능을 사용하려면 true로 설정하세요.
기본값: false
예시: Search Accent Neutralise

searchAlign

속성: data-search-align
타입: String
세부 정보:

검색 입력 상자의 정렬 방식을 설정합니다. 'left'（왼쪽 정렬）또는 'right'（오른쪽 정렬）을 사용할 수 있습니다.
기본값: 'right'
예시: Search Align

searchHighlight

속성: data-search-highlight
타입: Boolean
세부 정보:

true로 설정하면 검색된 텍스트를 강조 표시합니다（<mark> HTML 태그 사용）. HTML이 포함된 값이나 사용자 정의 강조 색상을 사용하는 경우와 같이 사용자 정의 강조 포맷터를 정의할 수도 있습니다.
기본값: 'false'
예시: Search Highlight

searchOnEnterKey

속성: data-search-on-enter-key
타입: Boolean
세부 정보:

Enter 키를 누를 때까지 검색 방법이 실행됩니다.
기본값: false
예시: Search On Enter Key

searchSelector

속성: data-search-selector
타입: Boolean|String
세부 정보:

이 옵션을 설정하면（유효한 DOM 선택자，예: #customSearch이어야 함），찾은 DOM 요소（input 요소）가 내장 검색 입력 대신 테이블 검색에 사용됩니다.
기본값: false
예시: Search Selector

searchText

속성: data-search-text
타입: String
세부 정보:

검색 속성을 설정할 때 검색 텍스트를 초기화합니다.
기본값: ''
예시: Search Text

searchTimeOut

속성: data-search-time-out
타입: Number
세부 정보:

검색 트리거의 타임아웃 시간을 설정합니다.
기본값: 500
예시: Search Time Out

selectItemName

속성: data-select-item-name
타입: String
세부 정보:

라디오 버튼 또는 체크박스 입력의 이름입니다.
기본값: 'btSelectItem'
예시: Id Field

serverSort

속성: data-server-sort
타입: Boolean
세부 정보:

클라이언트에서 데이터를 정렬하려면 false로 설정하세요. sidePagination이 server일 때만 유효합니다.
기본값: true
예시: Server Sort

showButtonIcons

속성: data-show-button-icons
타입: Boolean
세부 정보:

모든 버튼에 아이콘을 표시합니다.
기본값: true
예시: show button icons

showButtonText

속성: data-show-button-text
타입: Boolean
세부 정보:

모든 버튼에 텍스트를 표시합니다.
기본값: false
예시: show button text

showColumns

속성: data-show-columns
타입: Boolean
세부 정보:

true로 설정하면 열 드롭다운 목록이 표시됩니다. switchable 열 옵션을 false로 설정하여 드롭다운 목록에서 열 항목을 숨길 수 있습니다. 선택한 열의 최소 개수는 minimumCountColumns 테이블 옵션을 통해 제어할 수 있습니다.
기본값: false
예시: Basic Columns and Large Columns

showColumnsSearch

속성: data-show-columns-search
타입: Boolean
세부 정보:

열 필터의 검색을 표시하려면 true로 설정하세요.
기본값: false
예시: Columns Search

showColumnsToggleAll

속성: data-show-columns-toggle-all
타입: Boolean
세부 정보:

열 옵션/드롭다운 목록에 모두 선택 체크박스를 표시하려면 true로 설정하세요.
기본값: false
예시: Columns Toggle All

showExtendedPagination

속성: data-show-extended-pagination
타입: Boolean
세부 정보:

true로 설정하면 페이징의 확장 버전이 표시됩니다（필터가 없는 모든 행 수 포함）. 서버 측에서 페이징을 사용하는 경우 totalNotFilteredField를 사용하여 카운트를 정의하세요.
기본값: false
예시: Show Extended Pagination

showFooter

속성: data-show-footer
타입: Boolean
세부 정보:

true로 설정하면 요약 푸터 행이 표시됩니다.
기본값: false
예시: Show Footer

showFullscreen

속성: data-show-fullscreen
타입: Boolean
세부 정보:

true로 설정하면 전체 화면 버튼이 표시됩니다.
기본값: false
예시: Show Fullscreen

showHeader

속성: data-show-header
타입: Boolean
세부 정보:

true로 설정하면 테이블 헤더 표시가 활성화됩니다.
기본값: true
예시: Show Header

showPaginationSwitch

속성: data-show-pagination-switch
타입: Boolean
세부 정보:

true로 설정하면 페이징 스위치 버튼이 활성화됩니다.
기본값: false
예시: Show Pagination Switch

showRefresh

속성: data-show-refresh
타입: Boolean
세부 정보:

true로 설정하면 새로고침 버튼 기능이 활성화됩니다.
기본값: false
예시: Show Refresh

showSearchButton

속성: data-show-search-button
타입: Boolean
세부 정보:

true로 설정하면 검색 입력 뒤에 검색 버튼이 표시됩니다. 활성화 후，검색 작업은 사용자가 검색 버튼을 클릭할 때만 실행되고，입력 시 자동으로 트리거되지 않습니다. 이는 특히 대량의 데이터를 처리하거나 네트워크 환경이 느린 경우 불필요한 네트워크 요청과 서버 부하를 줄이는 데 도움이 됩니다.
기본값: false
예시: Show Search Button

showSearchClearButton

속성: data-show-search-clear-button
타입: Boolean
세부 정보:

true로 설정하면 검색 입력 뒤에 지우기 버튼이 표시됩니다. 이 버튼은 검색 입력을 지우는 역할을 합니다（활성화된 경우 필터 컨트롤의 모든 필터도 포함）.
기본값: false
예시: Show Search Clear Button

showToggle

속성: data-show-toggle
타입: Boolean
세부 정보:

true로 설정하면 테이블/카드 보기를 전환하는 전환 버튼이 표시됩니다.
기본값: false
예시: Show Toggle

sidePagination

속성: data-side-pagination
타입: String
세부 정보:

테이블의 페이징 측을 정의합니다. 'client' 또는 'server'만 가능합니다. 'server' 측을 사용하려면 'url' 또는 'ajax' 옵션을 설정해야 합니다.

'sidePagination' 옵션이 'client'로 설정되어 있는지 'server'로 설정되어 있는지에 따라 필요한 서버 응답 형식이 다릅니다. 다음 예제를 참조하세요:
- 서버 측 페이징 없음
- 서버 측 페이징 있음
URL 매개변수:

sidePagination이 server로 설정된 경우，bootstrap table은 다음 URL 매개변수를 사용하여 url을 호출합니다:
- offset 0과 total - 1 사이의 값，포함할 첫 번째 레코드를 지정합니다.
- limit 값은 페이지당 행 수를 지정합니다.
서버 측 페이징을 구현할 때，이 예제 형식의 JSON 보기를 구현해야 합니다. 이 보기는 위에서 지정한 URL 매개변수 값을 사용하고，offset 인덱스부터 시작하는 레코드와 limit으로 지정된 레코드 수를 반환해야 합니다. 예를 들어，레코드 11-20을 원하면，보기는 URL 문자열에서 offset=10과 limit=10을 가져와 이 예제와 유사한 레코드를 반환해야 합니다.
기본값: 'client'
예시: Client Side Pagination and Server Side Pagination

silentSort

속성: data-silent-sort
타입: Boolean
세부 정보:

데이터를 정렬할 때 로딩 메시지를 사용하려면 false로 설정하세요. 이 옵션은 sidePagination 옵션이 'server'로 설정된 경우에만 유효합니다.
기본값: true
예시: Silent Sort

singleSelect

속성: data-single-select
타입: Boolean
세부 정보:

true로 설정하면 한 행만 선택할 수 있습니다.
기본값: false
예시: Single Select

smartDisplay

속성: data-smart-display
타입: Boolean
세부 정보:

true로 설정하면 스마트 표시 모드가 활성화됩니다.
기본값: true
예시: Smart Display

sortable

속성: data-sortable
타입: Boolean
세부 정보:

모든 열의 정렬 기능을 비활성화하려면 false로 설정하세요.
기본값: true
예시: Sortable

sortClass

속성: data-sort-class
타입: String
세부 정보:

정렬된 td 요소의 클래스 이름입니다.
기본값: undefined
예시: Sort Class

sortEmptyLast

속성: data-sort-empty-last
타입: Boolean
세부 정보:

<空 문자열>、undefined 和 null을 마지막 값으로 정렬하려면 true로 설정하세요.
기본값: false
예시: Sort Empty Last

sortName

속성: data-sort-name
타입: String
세부 정보:

정렬할 열을 지정합니다. 이 속성 필드는 일반적으로 sortOrder와 함께 사용되며，두 가지를 함께 사용하여 올바른 정렬 기능을 구현해야 합니다.
기본값: undefined
예시: Sort Name Order

sortOrder

속성: data-sort-order
타입: String
세부 정보:

열 정렬 순서를 정의합니다. undefined、'asc' 또는 'desc'만 가능합니다. 이 속성 필드는 일반적으로 sortName과 함께 사용되며，두 가지를 함께 사용하여 올바른 정렬 기능을 구현해야 합니다.
기본값: undefined
예시: Sort Name Order

sortReset

속성: data-sort-reset
타입: Boolean
세부 정보:

세 번째 클릭 시 정렬을 재설정하려면 true로 설정하세요.
기본값: false
예시: Sort Reset

sortResetPage

속성: data-sort-reset-page
타입: Boolean
세부 정보:

정렬 시 페이지 번호를 재설정하려면 true로 설정하세요.
기본값: false
예시: Sort Reset Page

sortStable

속성: data-sort-stable
타입: Boolean
세부 정보:

true로 설정하면 정렬 시 값이相同的 행의 상대적 순서를 유지합니다.
기본값: false
예시: Sort Stable

strictSearch

속성: data-strict-search
타입: Boolean
세부 정보:

true로 설정하면 정확한 검색 모드가 사용됩니다.
기본값: false
예시: Strict Search

theadClasses

속성: data-thead-classes
타입: String
세부 정보:

테이블 thead 의 클래스 이름입니다. Bootstrap은 수식어 클래스 .thead-light 또는 .thead-dark를 사용하여 thead를 밝은 회색 또는 어두운 회색으로 표시합니다.
기본값: ''
예시: Thead Classes

속성: data-toolbar
타입: String/Node
세부 정보:

도구 모음의 jQuery 선택기를 지정합니다. 예: #toolbar、.toolbar，또는 DOM 노드.
기본값: undefined
예시: Custom Toolbar

toolbarAlign

속성: data-toolbar-align
타입: String
세부 정보:

사용자 정의 도구 모음의 정렬 방식을 설정합니다. 'left'（왼쪽 정렬）또는 'right'（오른쪽 정렬）을 사용할 수 있습니다.
기본값: 'left'
예시: Toolbar Align

totalField

속성: data-total-field
타입: String
세부 정보:

전달된 JSON에서 'total' 데이터 목록을 포함하는 키 이름을 지정합니다.
기본값: 'total'
예시: Total/Data Field

totalNotFiltered

속성: data-total-not-filtered
타입: Number
세부 정보:

이 속성은 주로 페이징 서버에 의해 전달되며 사용하기 쉽습니다.
기본값: 0

totalNotFilteredField

속성: data-total-not-filtered-field
타입: string
세부 정보:

JSON 응답의 필드는 showExtendedPagination에 사용됩니다.
기본값: totalNotFiltered
예시: Total Not Filtered Field

totalRows

속성: data-total-rows
타입: Number
세부 정보:

이 속성은 주로 페이징 서버에 의해 전달되며 사용하기 쉽습니다.
기본값: 0

trimOnSearch

속성: data-trim-on-search
타입: Boolean
세부 정보:

false로 설정하면 검색 텍스트의 자동 트리밍이 비활성화됩니다.
기본값: true
예시: Trim On Search

undefinedText

속성: data-undefined-text
타입: String
세부 정보:

데이터가 undefined일 때 표시되는 텍스트입니다.
기본값: '-'
예시: Undefined Text

uniqueId

속성: data-unique-id
타입: String
세부 정보:

각 행에 고유 식별자를 지정합니다. 고유 ID는 항상 HTML에 안전해야 합니다. 예를 들어，영숫자이며，"와 같이 HTML을 파괴할 수 있는 문자를 포함하지 않아야 합니다.
기본값: undefined
예시: getRowByUniqueId

url

속성: data-url
타입: String
세부 정보:

원격 사이트에서 데이터를 요청하는 URL입니다.

'sidePagination' 옵션이 지정되었는지 여부에 따라 필요한 서버 응답 형식이 다릅니다. 다음 예제를 참조하세요:
- 서버 측 페이징 없음
- 서버 측 페이징 있음
URL 매개변수:

sidePagination이 server로 설정된 경우，bootstrap table은 다음 URL 매개변수를 사용하여 url을 호출합니다:
- offset 0과 total - 1 사이의 값，포함할 첫 번째 레코드를 지정합니다.
- limit 값은 페이지당 행 수를 지정합니다.
서버 측 페이징을 구현할 때，이 예제 형식의 JSON 보기를 구현해야 합니다. 이 보기는 위에서 지정한 URL 매개변수 값을 사용하고，offset 인덱스부터 시작하는 레코드와 limit으로 지정된 레코드 수를 반환해야 합니다. 예를 들어，레코드 11-20을 원하면，보기는 URL 문자열에서 offset=10과 limit=10을 가져와 이 예제와类似한 레코드를 반환해야 합니다.
기본값: undefined
예시: From URL
오류 처리

로드 오류를 얻으려면 onLoadError를 사용하세요.

virtualScroll

속성: data-virtual-scroll
타입: Boolean
세부 정보:

true로 설정하면 가상의 “무한” 목록을 표시하기 위해 가상 스크롤을 활성화합니다.

참고: 현재 구현은 각 행이 동일한 높이를 가져야 합니다. 행의 높이가 다르면 예측할 수 없는 오류가 발생할 수 있습니다. 각 행의 높이가 일치하도록 하거나，이 문제를 해결하기 위해 td { white-space: nowrap; } 스타일을 적용하세요.
기본값: false
예시: Large Data

virtualScrollItemHeight

속성: data-virtual-scroll-item-height
타입: Number
세부 정보:

이 옵션이 정의되지 않은 경우，기본적으로 첫 번째 항목의 높이를 사용합니다.

가상 항목 높이가 기본 높이보다 현저히 크면，이 옵션을 제공하는 것이重要합니다. 이 치수는 초기화 시 생성해야 하는 셀 수를 결정하는 데 도움이 되며，스크롤 가능 영역의 높이를 계산하는 데 도움이 됩니다. 이 높이 값은 px 단위로만 사용할 수 있습니다.
기본값: undefined

visibleSearch

속성: data-visible-search
타입: Boolean
세부 정보:

true로 설정하면 표시되는 열/데이터에서만 검색합니다. 데이터에 표시되지 않는 다른 값이 포함되어 있으면，검색 시 해당 값은 무시됩니다.
기본값: false
예시: visible search