[TOC] 表選項定義為 。`jQuery.fn.bootstrapTable.defaults` # **data-toggle**='table':激活引導表而不寫 JavaScript 默認值：data-toggle='table' ~~~ <table data-toggle="table" data-url="data1.json"> //沒有這個選項就需要js激活 <table data-url="data1.json"> $('#table').bootstrapTable({}) ~~~ # **data-ajax**=undefined | function:替換 ajax 呼叫的方法。應實施與 jQuery ajax 方法相同的 API 默認值：data-ajax=undefined ``` <link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet"> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script> <table id="table" data-toggle="table" data-height="460" data-ajax="ajaxRequest" data-search="true" data-side-pagination="server" data-pagination="true"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> <script> // your custom ajax request here function ajaxRequest(params) { var url = 'https://examples.wenzhixin.net.cn/examples/bootstrap_table/data' $.get(url + '?' + $.param(params.data)).then(function (res) { params.success(res) }) } </script> ``` # **data-ajax-options**={}:提交 ajax 請求的額外附加選項，參看:[jQuery.ajax](http://api.jquery.com/jQuery.ajax). 默認值：data-ajax-options={} 這里附加的內容相當于下面的setting：jQuery.ajax( url \[, settings \] )或者 [jQuery.ajax( \[settings \] )](https://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings) ``` <table id="table" data-toggle="table" data-height="460" data-ajax-options="ajaxOptions" data-url="json/data1.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> <script> window.ajaxOptions = { beforeSend: function (xhr) { xhr.setRequestHeader('Custom-Auth-Token', 'custom-auth-token') } } </script> ``` # **data-buttons**={}|function:此選項允許創建/添加自定義按鈕到"按鈕欄"（表的右上角） 默認值：data-buttons={} ``` <table id="table" data-toggle="table" data-height="460" data-show-columns="true" data-show-refresh="true" data-show-columns-toggle-all="true" data-show-pagination-switch="true" data-show-toggle="true" data-show-fullscreen="true" data-buttons="buttons" data-url="json/data1.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> <script> function buttons () { return { btnUsersAdd: { text: 'Highlight Users', icon: 'fa-users', event: function () { alert('Do some stuff to e.g. search all users which has logged in the last week') }, attributes: { title: 'Search all users which has logged in the last week' } }, btnAdd: { text: 'Add new row',//按鈕上顯示的信息 不過需要在table標簽加上showButtonText=true icon: 'fa-plus',//按鈕的圖標 render:true//默認是否顯示按鈕，當為false隱藏時您添加數據屬性時，該按鈕再次可見 'event': {//按鈕事件，如果只時單個事件可以直接使用函數如上面的那個 'click': () => { }, 'mouseenter': () => { }, 'mouseleave': () => { } }, attributes: {//為按鈕添加額外屬性，如這里給按鈕添加title title: 'Add a new row to the table' } } } } </script> ```  # **data-buttons-align**='right'|'left':對齊工具欄按鈕 默認值：data-buttons-align='right' 將上面的按鈕工具欄放置在表格左上還是右上 # **data-buttons-order**：重新排序按鈕工具欄里的按鈕 默認值：['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns'\] # **data-buttons-prefix**='btn':定義表按鈕的前綴(給工具欄的所有按鈕加上類？ ) ``` <button class="btn btn-secondary" type="button" name="refresh" aria-label="Refresh" title="Refresh"><i class="fa fa-sync"></i> </button> 給table加上這個屬性后<table data-buttons-prefix="btn-sm btn" > <button class="btn-sm btn btn-sm btn-secondary" type="button" name="refresh" aria-label="Refresh" title="Refresh"><i class="fa fa-sync"></i> </button> ``` # **data-buttons-toolbar**=undefined：表示自定義按鈕工具欄的 jQuery 選擇器 表示自定義按鈕工具欄的 jQuery 選擇器，例如：，或 DOM 節點。`#buttons-toolbar``.buttons-toolbar` ``` <link href="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.css" rel="stylesheet"> <script src="https://unpkg.com/bootstrap-table@1.18.3/dist/bootstrap-table.min.js"></script> <style> .titles { float: right; clear: both; } </style> <div class="buttons-toolbar"> </div> <div class="titles"> <h1>First line</h1> <h2>Second line</h2> </div> <table id="table" data-toggle="table" data-height="460" data-search="true" data-show-refresh="true" data-show-columns="true" data-buttons-toolbar=".buttons-toolbar" data-url="json/data1.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> ```  # **data-cache**=true：是否啟用AJAX 請求的緩存（false禁用緩存，每次都要重新請求數據） # **data-card-view**=false：是否啟用卡片視圖 # **data-checkbox-header**=true：是否顯示標題行所在的復選框 data-checkbox-header=true  data-checkbox-header=false  # **data-classes**='table table-bordered table-hover'：表的class名稱 其他類名參考：`'table'` `'table-bordered'(列內外(豎)邊框)` `'table-hover'(指向單元格變色)` `'table-striped'(行灰白相間)` `'table-dark'(灰黑背景)` `'table-sm'(緊湊型表格)` `'table-borderless'(去掉內邊框)` # **data-click-to-select**=false：單擊行任意位置時，設置為選擇復選框或取消選擇 # **columns選項** 表列配置對象，查看列屬性以了解更多詳細信息 ``` <table id="table" data-url="json/data1.json"> </table> <script> var $table = $('#table') $(function() { $table.bootstrapTable({ columns: [{ title: 'ID', field: 'id' }, { title: 'Item Name', field: 'name' }, { title: 'Item Price', field: 'price' }] }) }) </script> ``` # **data-content-type**='application/json'：請求遠程數據的內容類型，例如： .`application/x-www-form-urlencoded` # **data-custom-search**=undefined：自定義搜索功能執行而不是內置搜索功能 自定義搜索功能執行而不是內置搜索功能，需要三個參數： * `data`： 表數據。 * `text`： 搜索文本。 * `filter`：從方法過濾對象。`filterBy` ``` <table id="table" data-search="true" data-custom-search="customSearch" data-url="json/data1.json"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> <script> $(function() { $('#table').bootstrapTable({ formatSearch: function () { return 'Search Item Price' } }) }) function customSearch(data, text) { return data.filter(function (row) { return row.price.indexOf(text) > -1 }) } </script> ```  # **data-custom-sort**=undefined：自定義排序函數執行而不是內置排序函數 自定義排序函數執行而不是內置排序函數，需要三個參數： * `sortName`： 排序名稱。 * `sortOrder`： 排序順序。 * `data`： 行數據。 ``` <table id="table" data-toggle="table" data-height="460" data-custom-sort="customSort" data-url="json/data1.json"> <thead> <tr> <th data-field="id" data-sortable="true">ID</th> <th data-field="name" data-sortable="true">Item Name</th> <th data-field="price" data-sortable="true">Item Price</th> </tr> </thead> </table> <script> function customSort(sortName, sortOrder, data) { var order = sortOrder === 'desc' ? -1 : 1 data.sort(function (a, b) { var aa = +((a[sortName] + '').replace(/[^\d]/g, '')) var bb = +((b[sortName] + '').replace(/[^\d]/g, '')) if (aa < bb) { return order * -1 } if (aa > bb) { return order } return 0 }) } </script> ``` # **data-data**=[]:要加載的數據 如果數據中具有或屬性，則會自動合并單元格，例如：`_<field>_rowspan``_<field>_colspan` ~~~ $table.bootstrapTable({ data: [ { id: 1, name: 'Item 1', _name_rowspan: 2, price: '$1' }, { id: 2, price: '$2' } ] }) ~~~ ``` <table id="table"> <thead> <tr> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> <script> var $table = $('#table') $(function() { var data = [ { 'id': 0, 'name': 'Item 0', 'price': '$0' }, { 'id': 1, 'name': 'Item 1', 'price': '$1' }, { 'id': 2, 'name': 'Item 2', 'price': '$2' }, { 'id': 3, 'name': 'Item 3', 'price': '$3' }, { 'id': 4, 'name': 'Item 4', 'price': '$4' }, { 'id': 5, 'name': 'Item 5', 'price': '$5' } ] $table.bootstrapTable({data: data}) }) </script> ``` # **data-data-field**='rows':包含數據列表的傳入 json 的關鍵 # **data-data-type**='json':您期望從服務器返回的數據類型 # **data-detail-filter**:設置為 " 時，啟用每行擴展 。返回真實，行將啟用擴展，返回錯誤和擴展行將被禁用。默認函數返回真實，以便對所有行進行擴展 默認值：data-detail-filter=function(index, row) { return true } # **data-detail-formatter**：格式化您的詳細視圖時，設置為 。返回字符串，它將被附加到細節視圖單元格中，可選地使用目標單元格的 jQuery 元素直接渲染元素 function(index, row, element) { return '' } # **data-detail-view**=false：設置為顯示詳細視圖表 # **data-detail-view-align**='left'：指示如何對齊詳細信息視圖圖標。，可以使用。`'left'``'right'` # **data-detail-view-by-click**=false：設置為在單擊單元格時切換詳細視圖 # **data-detail-view-icon**=true：設置為顯示詳細信息視圖列（正/減圖標） # **data-escape**=false：轉義字符串以便插入到HTML中，替換&, \<,\>, “, `, and ‘字符。 # **data-filter-options**定義算法的默認篩選選項，意味著所有給定的篩選器必須匹配，意味著給定篩選器之一必須匹配 默認：`{ filterAlgorithm: 'and' }` 可選filterAlgorithm: 'and' 和filterAlgorithm: 'or' # **data-footer-field**：定義腳對象的鍵（從數據陣列或服務器響應 json）。腳物體可用于設置/定義腳部和/或腳部值 例子：使用footerField選項來設置服務器響應的頁腳數據鍵 ``` <table id="table" data-toggle="table" data-height="460" data-show-columns="true" data-show-footer="true" data-url="json/footerField.json"> <thead> <tr> <th data-field="id" data-footer-formatter="idFormatter">ID</th> <th data-field="name" data-footer-formatter="nameFormatter">Item Name</th> <th data-field="price" data-footer-formatter="priceFormatter">Item Price</th> </tr> </thead> </table> <script> function idFormatter(data, footerValue) { return footerValue } function nameFormatter(data, footerValue) { return footerValue } function priceFormatter(data, footerValue) { return footerValue } </script> ``` footerField.json ``` { "count": 200, "items": [ { "id": 0, "name": "Item 0", "price": "$0" }, { "id": 1, "name": "Item 1", "price": "$1" } ], "footer": { "id": "footer id", "_id_colspan": 2, "name": "footer name" } } ```  # **data-footer-style**腳式格式化器功能， 需要一個參數： * `column`： 列對象。