[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`： 列对象。