bootsrat-table表格选项
翻译至https://bootstrap-table.com/docs/api/table-options/#url
--
-
属性：
data-toggle -
类型：
String -
详情：
在不编写JavaScript的情况下激活引导表。
-
默认：
'table' -
示例： From HTML
height
-
属性：
data-height -
类型：
Number -
详情：
表的高度，启用表的固定标题。
请注意，如果页面上有多个表并且同时设置了height选项，则需要
id向每个表添加属性，否则，窗口调整大小将无法正常进行。 -
默认：
undefined -
示例： Table Height
classes
-
属性：
data-classes -
类型：
String -
详情：
表的类名称。
'table'，'table-bordered'，'table-hover'，'table-striped'，'table-dark'，'table-sm'和'table-borderless'可被使用。默认情况下，表格带有边框。 -
默认：
'table table-bordered table-hover'
theadClasses
-
属性：
data-thead-classes -
类型：
String -
详情：
表thead的类名称。Bootstrap v4，请使用修饰符类
.thead-light或.thead-dark使theads呈现浅灰色或深灰色。 -
默认：
''
rowStyle
-
属性：
data-row-style -
类型：
Function -
详情：
行样式格式化程序函数具有两个参数：
row：行记录数据。index：行索引。
支持类或CSS。
-
默认：
{} -
示例： Row Style
rowAttributes
-
属性：
data-row-attributes -
类型：
Function -
详情：
行属性格式化程序函数具有两个参数：
row：行记录数据。index：行索引。
支持所有自定义属性。
-
默认：
{} -
示例： 行属性
undefinedText
-
属性：
data-undefined-text -
类型：
String -
详情：
定义默认
undefined文本。 -
默认：
'-' -
示例： Undefined Text
-
-
locale
-
属性：
data-locale -
类型：
String -
详情：
设置要使用的语言环境（即
'zh-CN'）。区域设置文件必须预先加载。如果加载后备路径，则按以下顺序进行：- 首先尝试指定的语言环境，
- 然后尝试将'_'转换为'-'并将区域代码大写的语言环境，
- 然后尝试使用简短的语言环境代码（即
'zh'代替'zh-CN'）， - 最后，将使用最后一个加载的语言环境文件（如果未加载任何语言环境，则使用默认语言环境）。
如果为左
undefined字符串或为空字符串，则使用上次加载的语言环境（或'en-US'如果未加载任何语言环境文件）。 -
默认：
undefined -
示例： Table Locale
virtualScroll
-
属性：
data-virtual-scroll -
类型：
Boolean -
详情：
设置
true为启用虚拟滚动以显示虚拟的“无限”列表。 -
默认：
false -
示例： Large Data
virtualScrollItemHeight
-
属性：
data-virtual-scroll-item-height -
类型：
Number -
详情：
如果未定义此选项，则默认情况下我们将使用第一项的高度。
如果虚拟商品的高度将明显大于默认高度，则提供此功能非常重要。此维度用于帮助确定初始化时应创建多少个单元格，并帮助计算可滚动区域的高度。此高度值只能使用
px单位。 -
默认：
undefined
sortable
-
属性：
data-sortable -
类型：
Boolean -
详情：
设置
false为禁用所有列的可排序。 -
默认：
true -
示例： Table Sortable
sortClass
-
属性：
data-sort-class -
类型：
String -
详情：
td排序的元素的类名称。 -
默认：
undefined -
示例：Sort Class
silentSort
-
属性：
data-silent-sort -
类型：
Boolean -
详情：
设置
false为使用加载消息对数据进行排序。当sidePagination选项设置为时，此选项有效'server'。 -
默认：
true -
示例： Silent Sort
sortName
-
属性：
data-sort-name -
类型：
String -
详情：
定义要排序的列。
-
默认：
undefined -
示例： Sort Name Order
sortOrder
-
属性：
data-sort-order -
类型：
String -
详情：
定义列的排序顺序，只能是
'asc'或'desc'。 -
默认：
'asc' -
示例： Sort Name Order
sortStable
-
属性：
data-sort-stable -
类型：
Boolean -
详情：
设置
true以获得稳定的排序。我们将'_position'属性添加到该行。 -
默认：
false -
示例： Sort Stable
rememberOrder
-
属性：
data-remember-order -
类型：
Boolean -
详情：
设置
true为记住每列的顺序。 -
默认：
false -
示例： Remember Order
customSort
-
属性：
data-custom-sort -
类型：
Function -
详情：
执行自定义排序功能而不是内置的排序功能，它需要三个参数：
sortName：排序名称。sortOrder：排序顺序。data：行数据。
-
默认：
undefined -
示例： Custom Order
columns
-
属性：
- -
类型：
Array -
详情：
表列配置对象，请参阅列属性以获取更多详细信息。
-
默认：
[] -
示例： Table Columns
data
-
属性：
data-data -
类型：
Array | Object -
详情：
要加载的数据。
-
默认：
[] -
示例： From Data
url
-
属性：
data-url -
类型：
String -
详情：
一个从远程站点请求数据的URL。
请注意，所需的服务器响应格式取决于是否
'sidePagination'指定了该选项。请参阅以下示例： -
默认：
undefined -
示例： From URL
-
错误处理
要获取加载错误，请使用onLoadError
method
-
属性：
data-method -
类型：
String -
详情：
请求远程数据的方法类型。
-
默认：
'get' -
示例： Table Method
cache
-
属性：
data-cache -
类型：
Boolean -
详情：
设置
false为禁用AJAX请求的缓存。 -
默认：
true -
示例： Table Cache
contentType
-
属性：
data-content-type -
类型：
String -
详情：
请求远程数据的contentType，例如：
application/x-www-form-urlencoded。 -
默认：
'application/json' -
示例： Content Type
dataType
-
属性：
data-data-type -
类型：
String -
详情：
您期望从服务器返回的数据类型。
-
默认：
'json' -
示例： 数据类型
ajax
-
属性：
data-ajax -
类型：
Function -
详情：
一种替换ajax调用的方法。应该实现与jQuery ajax方法相同的API。
-
默认：
undefined -
示例： AJAX
ajaxOptions
-
属性：
data-ajax-options -
类型：
Object -
详情：
提交ajax请求的其他选项。值列表：jQuery.ajax。
-
默认：
{} -
示例： AJAX选项
queryParams
-
属性：
data-query-params -
类型：
Function -
详情：
请求远程数据时，可以通过修改queryParams发送其他参数。
如果
queryParamsType = 'limit'，params对象包含：limit，offset，search，sort，order。否则，它包含：
pageSize，pageNumber，searchText，sortName，sortOrder。返回
false停止请求。 -
默认：
function(params) { return params } -
示例： 查询参数
queryParamsType
-
属性：
data-query-params-type -
类型：
String -
详情：
设置
'limit'为发送具有RESTFul类型的查询参数。 -
默认：
'limit' -
示例： 查询参数类型
responseHandler
-
属性：
data-response-handler -
类型：
Function -
详情：
在加载远程数据之前，处理响应数据格式，参数对象包含：
res：响应数据。jqXHR：jqXHR对象，它是XMLHTTPRequest对象的超集。有关更多信息，请参见jqXHR类型（从1.15.5开始）。
-
默认：
function(res) { return res } -
示例： 响应处理程序
totalField
-
属性：
data-total-field -
类型：
String -
详情：
键入包含
'total'数据的传入json 。 -
默认：
'total' -
示例： 总计/数据字段
totalNotFilteredField
-
属性：
data-total-not-filtered-field -
类型：
string -
详情：
json响应中的字段，将用于
showExtendedPagination。 -
默认：
totalNotFiltered -
示例： 未过滤字段总数
dataField
-
属性：
data-data-field -
类型：
String -
详情：
键入包含
'rows'数据列表的传入json 。 -
默认：
'rows' -
示例： 总计/数据字段
分页
-
属性：
data-pagination -
类型：
Boolean -
详情：
设置
true为在表格底部显示分页工具栏。 -
默认：
false -
示例： 表分页
onlyInfoPagination
-
属性：
data-only-info-pagination -
类型：
Boolean -
详情：
设置
true为仅显示表中显示的数据量。它需要将分页表选项设置为true。 -
默认：
false -
示例： 仅信息分页
showExtendedPagination
-
属性：
data-show-extended-pagination -
类型：
Boolean -
详情：
设置
true为显示分页的扩展版本（包括不带过滤器的所有行的计数）。如果在服务器端使用分页，请使用totalNotFilteredField来定义计数。 -
默认：
false -
示例： 显示扩展分页
分页循环
-
属性：
data-pagination-loop -
类型：
Boolean -
详情：
设置
true为启用分页连续循环模式。 -
默认：
true -
示例： 分页循环
侧面分页
-
属性：
data-side-pagination -
类型：
String -
详情：
定义表格的侧面分页，只能是
'client'或'server'。使用'server'side需要设置'url'or'ajax'选项。请注意，取决于
'sidePagination'选项设置为'client'还是，所需的服务器响应格式是不同的'server'。请参阅以下示例： -
默认：
'client'
totalRows
-
属性：
data-total-rows -
类型：
Number -
详情：
此属性主要由分页服务器传入，该服务器易于使用。
-
默认：
0
totalNotFiltered
-
属性：
data-total-not-filtered -
类型：
Number -
详情：
此属性主要由分页服务器传入，该服务器易于使用。
-
默认：
0
pageNumber
-
属性：
data-page-number -
类型：
Number -
详情：
设置分页属性时，请初始化页码。
-
默认：
1 -
示例： 页码
页面大小
-
属性：
data-page-size -
类型：
Number -
详情：
设置分页属性时，初始化页面大小。
-
默认：
10 -
示例： 页面大小
pageList
-
属性：
data-page-list -
类型：
Array -
详情：
设置分页属性时，初始化页面尺寸选择列表。如果包含
'all'或'unlimited'选项，则所有记录将显示在表中。 -
默认：
[10, 25, 50, 100] -
示例： 页面列表
分页
-
属性：
data-pagination-h-align -
类型：
String -
详情：
指示如何对齐分页。
'left'，'right'可以使用。 -
默认：
'right' -
示例： 分页H对齐
分页
-
属性：
data-pagination-v-align -
类型：
String -
详情：
指示如何垂直对齐分页。
'top'，'bottom'，'both'（穿上顶部和底部的分页）都可以使用。 -
默认：
'bottom' -
示例： 分页V对齐
paginationDetailHAlign
-
属性：
data-pagination-detail-h-align -
类型：
String -
详情：
指示如何对齐分页细节。
'left'，'right'可以使用。 -
默认：
'left' -
示例： 分页H对齐
paginationPreText
-
属性：
data-pagination-pre-text -
类型：
String -
详情：
指示要在分页详细信息中显示的图标或文本，即上一个按钮。
-
默认：
'‹' -
示例： 分页文本
分页
-
属性：
data-pagination-next-text -
类型：
String -
详情：
指示要在分页详细信息（下一步按钮）中显示的图标或文本。
-
默认：
'›' -
示例： 分页文本
分页成功
-
属性：
data-pagination-successively-size -
类型：
Number -
详情：
连续的最大连续页数。
-
默认：
5 -
示例： 分页索引号
paginationPagesBySide
-
属性：
data-pagination-pages-by-side -
类型：
Number -
详情：
当前页面每侧（右侧，左侧）的页数。
-
默认：
1 -
示例： 分页索引号
分页使用中级
-
属性：
data-pagination-use-intermediate -
类型：
Boolean -
详情：
计算并显示中间页面以便快速访问。
-
默认：
false -
示例： 分页索引号
搜索
-
属性：
data-search -
类型：
Boolean -
详情：
启用搜索输入。
有3种搜索方式：
- 该值包含搜索查询（默认）。示例：Github包含git。
- 该值必须与搜索查询相同。示例：Github（值）和Github（搜索查询）。
- 比较（<，>，<=，= <，> =，=>）。示例：4大于3。
-
默认：
false -
示例： 表格搜索
searchOnEnterKey
-
属性：
data-search-on-enter-key -
类型：
Boolean -
详情：
搜索方法将一直执行到按下Enter键。
-
默认：
false -
示例： 按Enter键搜索
strictSearch
-
属性：
data-strict-search -
类型：
Boolean -
详情：
启用严格搜索。禁用比较检查。
-
默认：
false -
示例： 严格搜索
visibleSearch
-
属性：
visible-search -
类型：
Boolean -
详情：
设置
true为仅在可见列/数据中搜索，如果数据包含其他未显示的值，则在搜索时将忽略它们。 -
默认：
false -
示例： 可见搜索
showButtonIcons
-
属性：
show-button-icons -
类型：
Boolean -
详情：
所有按钮都将在其上显示图标
-
默认：
true -
示例： 显示按钮图标
showButtonText
-
属性：
show-button-text -
类型：
Boolean -
详情：
所有按钮都将在其上显示文本
-
默认：
false -
示例： 显示按钮文字
showSearchButton
-
属性：
data-show-search-button -
类型：
Boolean -
详情：
设置
true为在搜索输入后面显示搜索按钮。仅在按下按钮时才执行搜索（例如，以防止交通或加载时间）。 -
默认：
false -
示例： 显示搜索按钮
showSearchClearButton
-
属性：
data-show-search-clear-button -
类型：
Boolean -
详情：
设置
true为在搜索输入后面显示一个清除按钮，该按钮将清除搜索输入（还包括来自过滤器控件的所有过滤器（如果启用））。 -
默认：
false -
示例： 显示搜索清除按钮
trimOnSearch
-
属性：
data-trim-on-search -
类型：
Boolean -
详情：
设置
true为修剪搜索字段中的空格。 -
默认：
true -
示例： 搜索时修剪
searchAlign
-
属性：
data-search-align -
类型：
String -
详情：
指示如何对齐搜索输入。
'left'，'right'可以使用。 -
默认：
'right' -
示例： 搜索对齐
searchTimeOut
-
属性：
data-search-time-out -
类型：
Number -
详情：
设置搜索触发超时。
-
默认：
500 -
示例： 搜索超时
searchText
-
属性：
data-search-text -
类型：
String -
详情：
设置搜索属性后，初始化搜索文本。
-
默认：
'' -
示例： 搜索文本
customSearch
-
属性：
data-custom-search -
类型：
Function -
详情：
执行自定义搜索功能而不是内置搜索功能，它带有两个参数：
data：表格数据。text：搜索文字。filter：filterBy方法的过滤器对象（来自1.15.4）。
用法示例：
复制
function customSearch(data, text) {
return data.filter(function (row) {
return row.field.indexOf(text) > -1
})
}
-
默认：
undefined -
示例： 自定义搜索
showHeader
-
属性：
data-show-header -
类型：
Boolean -
详情：
设置
false为隐藏表格标题。 -
默认：
true -
示例： 显示标题
showFooter
-
属性：
data-show-footer -
类型：
Boolean -
详情：
设置
true为显示摘要页脚行。 -
默认：
false -
示例： 显示页脚
footerStyle
-
属性：
data-footer-style -
类型：
Function -
详情：
页脚样式格式化程序函数，采用一个参数：
column：列对象。
支持
classes或css。用法示例：
复制
function footerStyle(column) {
return {
css: { 'font-weight': 'normal' },
classes: 'my-class'
}
}
-
默认：
{} -
示例： 页脚样式
showColumns
showColumnsToggleAll
-
属性：
data-show-columns-toggle-all -
类型：
Boolean -
详情：
设置
true为在“列”选项/下拉列表中显示“ toogle所有”复选框。 -
默认：
false -
示例： 列全部切换
minimumCountColumns
-
属性：
data-minimum-count-columns -
类型：
Number -
详情：
从列下拉列表中隐藏的最小列数。
-
默认：
1 -
示例： 最小计数列
showPaginationSwitch
-
属性：
data-show-pagination-switch -
类型：
Boolean -
详情：
设置
true为显示分页开关按钮。 -
默认：
false -
示例： 显示分页开关
showRefresh
-
属性：
data-show-refresh -
类型：
Boolean -
详情：
设置
true为显示刷新按钮。 -
默认：
false -
示例： 显示刷新
showToggle
-
属性：
data-show-toggle -
类型：
Boolean -
详情：
设置
true为显示切换按钮以切换表格/卡片视图。 -
默认：
false -
示例： 显示切换
showFullscreen
-
属性：
data-show-fullscreen -
类型：
Boolean -
详情：
设置
true为显示全屏按钮。 -
默认：
false -
示例： 全屏显示
智能显示
-
属性：
data-smart-display -
类型：
Boolean -
详情：
设置
true为智能显示分页或名片视图。 -
默认：
true -
示例： 智能显示
逃逸
-
属性：
data-escape -
类型：
Boolean -
详情：
转义用于插入HTML的字符串，并替换＆，<，>，“，”和“”字符。
-
默认：
false -
示例： 表转义
filterOptions
-
属性：
data-filter-options -
类型：
Boolean -
详情：
定义算法的默认过滤器选项，
filterAlgorithm: 'and'意味着所有给定的过滤器必须匹配，filterAlgorithm: 'or'意味着给定的过滤器之一必须匹配。 -
默认：
{ filterAlgorithm: 'and' } -
示例： 过滤器选项
idField
-
属性：
data-id-field -
类型：
String -
详情：
指示哪个字段将用作复选框/单选框值，与selectItemName对应。
-
默认：
undefined -
示例： Id字段
selectItemName
-
属性：
data-select-item-name -
类型：
String -
详情：
单选或复选框输入的名称。
-
默认：
'btSelectItem' -
示例： Id字段
单击选择
-
属性：
data-click-to-select -
类型：
Boolean -
详情：
设置
true为单击行时选择复选框或单选框。 -
默认：
false -
示例： 单击以选择
ignoreClickToSelectOn
-
属性：
data-ignore-click-to-select-on -
类型：
Function -
详情：
设置忽略元素
clickToSelect。采用一个参数：element：元素被点击。
如果应忽略该单击，则返回true；如果应使该行被选择，则返回false。仅当
clickToSelect为true时，此选项才相关。 -
默认：
{ return ['A', 'BUTTON'].includes(tagName) } -
示例： 忽略单击以选中
singleSelect
-
属性：
data-single-select -
类型：
Boolean -
详情：
设置
true为允许复选框仅选择一行。 -
默认：
false -
示例： 单选
复选框标题
-
属性：
data-checkbox-header -
类型：
Boolean -
详情：
设置
false为隐藏标题行中的所有复选框。 -
默认：
true -
示例： 复选框标题
maintainMetaData
-
属性：
data-maintain-meta-data -
类型：
Boolean -
详情：
设置
true为在更改页面和搜索上维护以下元数据：- 选定的行
- 隐藏的行
-
默认：
false -
示例： 维护元数据
multipleSelectRow
-
属性：
data-multiple-select-row -
类型：
Boolean -
详情：
设置
true以启用多重选择行。可以使用ctrl键单击以选择一行，或使用shift键单击以选择一系列行。 -
默认：
false -
示例： 多选行
唯一身份
-
属性：
data-unique-id -
类型：
String -
详情：
为每一行指示唯一的标识符。
-
默认：
undefined -
示例： getRowByUniqueId
cardView
-
属性：
data-card-view -
类型：
Boolean -
详情：
设置
true为显示名片视图表，例如移动视图。 -
默认：
false -
示例： 卡视图
详细视图
-
属性：
data-detail-view -
类型：
Boolean -
详情：
设置
true为显示详细视图表。 -
默认：
false -
示例： 详细视图
detailViewIcon
-
属性：
data-detail-view-icon -
类型：
Boolean -
详情：
设置
true为显示详细信息视图列（加/减图标）。 -
默认：
true -
示例： 详细视图图标
detailViewByClick
-
属性：
data-detail-view-by-click -
类型：
Boolean -
详情：
设置
true为在单击单元格时切换详细视图。 -
默认：
false -
示例： 详细视图图标
detailFormatter
-
属性：
data-detail-formatter -
类型：
Function -
详情：
当格式化您的详细信息视图
detailView设置为true。返回一个String，它将被附加到详细信息视图单元格中，可以选择使用第三个参数直接渲染该元素，该参数是目标单元格的jQuery元素。 -
默认：
function(index, row, element) { return '' } -
示例： 详细视图
detailFilter
-
属性：
data-detail-filter -
类型：
Function -
详情：
当启用每行扩展
detailView设置到true。返回true，将启用该行进行扩展，返回false，并且将禁用该行的扩展。默认函数返回true以启用所有行的扩展。 -
默认：
function(index, row) { return true } -
示例： 明细过滤器
工具栏
-
属性：
data-toolbar -
类型：
String/Node -
详情：
jQuery选择指示工具栏，例如：
#toolbar，.toolbar，或DOM节点。 -
默认：
undefined -
示例： 自定义工具栏
工具栏对齐
-
属性：
data-toolbar-align -
类型：
String -
详情：
指示如何对齐自定义工具栏。
'left'，'right'可以使用。 -
默认：
'left' -
示例： 工具栏对齐
按钮工具栏
-
属性：
data-buttons-toolbar -
类型：
String/Node -
详情：
jQuery选择，指示自定义按钮工具栏，例如：
#buttons-toolbar，.buttons-toolbar，或DOM节点。 -
默认：
undefined -
示例： 按钮工具栏
按钮对齐
-
属性：
data-buttons-align -
类型：
String -
详情：
指示如何对齐工具栏按钮。
'left'，'right'可以使用。 -
默认：
'right' -
示例： 按钮对齐
buttonPrefix
-
属性：
data-buttons-prefix -
类型：
String -
详情：
定义表格按钮的前缀。
-
默认：
'btn' -
示例： 按钮前缀
buttonClass
-
属性：
data-buttons-class -
类型：
String -
详情：
定义
'btn-'表格按钮的类（在后面添加）。 -
默认：
'secondary' -
示例： 按钮类
图标
-
属性：
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'
}
- 示例： 表格图标
html
-
属性：
data-html -
类型：
Object -
详情：
定义表格的html。
-
默认：
代码过多，请检查源代码
index.js -
示例： 表格HTML
iconSize
-
属性：
data-icon-size -
类型：
String -
详情：
定义图标的大小，
undefined，'lg'，'sm'都可以使用。 -
默认：
undefined -
示例： 图标大小
iconsPrefix
-
属性：
data-icons-prefix -
类型：
String -
详情：
定义图标集名称（
'glyphicon'或'fa'用于FontAwesome）。默认情况下'fa'用于Bootstrap v4。 -
默认：
'fa' -
示例： 图标前缀