翻译至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
使thead
s呈现浅灰色或深灰色。 -
默认:
''
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'
-
示例: 图标前缀