表格选项

Bootstrap 表格的表格选项 API。

表格选项定义在 jQuery.fn.bootstrapTable.defaults 中。

-

• 属性: data-toggle

• 类型: 字符串

• 详情

  在不编写 JavaScript 的情况下激活 bootstrap 表格。

• 默认值: 'table'

• 示例: 从 HTML

ajax

• 属性: data-ajax

• 类型: 函数

• 详情

  一个用于替换 ajax 调用的方法。应该实现与 jQuery ajax 方法相同的 API。

• 默认值: 未定义

• 示例: 表格 AJAX

ajaxOptions

• 属性: data-ajax-options

• 类型: 对象

• 详情

  提交 ajax 请求的附加选项。值列表：jQuery.ajax。

• 默认值: {}

• 示例: AJAX 选项

按钮

• 属性: data-buttons

• 类型: 函数

• 详情

  此选项允许在“按钮栏”（表格右上角）中创建/添加自定义按钮。这些按钮可以通过表格选项 buttonsOrder 进行排序，用于事件的键/名称应用于此!

  自定义按钮高度可配置，以下选项可用

  • 文本
    • 描述：此选项用于 showButtonText 表格选项。
    • 类型：字符串
  • 图标
    • 描述：此选项用于 showButtonIcons 表格选项。
    • 类型：字符串 - 只需要图标类，例如 fa-users
  • 渲染
    • 描述：将此选项设置为 false 以默认隐藏按钮，当您添加数据属性 data-show-button-name="true" 时，按钮会再次可见。
  • 属性
    • 描述：此选项允许添加额外的 html 属性，例如 title
    • 类型：对象
    • 示例：{title: '按钮标题'}
  • html
    • 描述：如果您不想自动生成 html，可以使用此选项插入您的自定义 html。如果您的自定义 HTML 包含 name="button-name"，则 event 选项仅有效。如果使用此选项，则以下选项将被忽略
      • 文本
      • 图标
      • 属性
    • 类型：函数|字符串
  • 事件
    • 描述：如果您想在按钮上添加事件，应使用此选项
    • 类型：函数|对象|字符串

  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'
      }
    }
  }
  

• 默认值: {}

• 示例: 按钮

buttonsAlign

• 属性: data-buttons-align

• 类型: 字符串

• 详情

  指示如何对齐工具栏按钮。可以使用 'left'、'right'。

• 默认值: 'right'

• 示例: 按钮对齐

buttonsAttributeTitle

• 属性: data-buttons-attribute-title

• 类型: 字符串

• 详情

  自定义工具栏按钮的 title 属性，主要用于自定义工具栏样式。

• 默认值: 'title'

• 示例: 按钮属性标题

buttonsClass

• 属性: data-buttons-class

• 类型: 字符串

• 详情

  定义表格按钮的类（添加到 'btn-' 之后）。

• 默认值: 'secondary'

• 示例: 按钮类

buttonsOrder

• 属性: data-buttons-order

• 类型: 数组

• 详情

  指示如何自定义排序工具栏按钮。

• 默认值: ['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']

• 示例: 按钮顺序

buttonsPrefix

• 属性: data-buttons-prefix

• 类型: 字符串

• 详情

  定义表格按钮的前缀。

• 默认值: 'btn'

• 示例: 按钮前缀

buttonsToolbar

• 属性: data-buttons-toolbar

• 类型: 字符串/节点

• 详情

  一个 jQuery 选择器，指示自定义按钮工具栏，例如：#buttons-toolbar、.buttons-toolbar 或 DOM 节点。

• 默认值: 未定义

• 示例: 按钮工具栏

缓存

• 属性: data-cache

• 类型: 布尔值

• 详情

  设置为 false 以禁用 AJAX 请求的缓存。

• 默认值: true

• 示例: 表格缓存

卡片视图

• 属性: data-card-view

• 类型: 布尔值

• 详情

  设置为 true 以显示卡片视图表格，例如移动视图。

• 默认值: false

• 示例: 卡片视图

checkboxHeader

• 属性: data-checkbox-header

• 类型: 布尔值

• 详情

  设置为 false 以隐藏标题行中的全选复选框。

• 默认值: true

• 示例: 复选框标题

类

• 属性: data-classes

• 类型: 字符串

• 详情

  表格的类名。可以使用 'table'、'table-bordered'、'table-hover'、'table-striped'、'table-dark'、'table-sm' 和 'table-borderless'。默认情况下，表格是有边框的。

• 默认值: 'table table-bordered table-hover'

• 示例: 表格类

单击选择

• 属性: data-click-to-select

• 类型: 布尔值

• 详情

  设置为 true 以在单击行时选中复选框或单选框。

• 默认值: false

• 示例: 单击选择

列

• 属性: -

• 类型: 数组

• 详情

  表格列配置对象。有关更多详细信息，请参阅列属性。

• 默认值: []

• 示例: 表格列

contentType

• 属性: data-content-type

• 类型: 字符串

• 详情

  请求远程数据的 contentType，例如：application/x-www-form-urlencoded。

• 默认值: 'application/json'

• 示例: 内容类型

自定义搜索

• 属性: data-custom-search

• 类型: 函数

• 详情

  自定义搜索函数在执行内置搜索函数时被执行，它接受三个参数

  • data: 表格数据。
  • text: 搜索文本。
  • filter: 来自 filterBy 方法的筛选器对象。

  示例用法

  function customSearch(data, text) {
    return data.filter(function (row) {
      return row.field.indexOf(text) > -1
    })
  }
  

• 默认值: 未定义

• 示例: 自定义搜索

自定义排序

• 属性: data-custom-sort

• 类型: 函数

• 详情

  自定义排序函数将替代内置排序函数执行，并接受三个参数

  • sortName：排序名称。
  • sortOrder：排序顺序。
  • 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 以确保格式正确。

• 默认值: []

• 示例： 从数据

dataField

• 属性： data-data-field

• 类型: 字符串

• 详情

  传入 JSON 中包含 'rows' 数据列表的键。

• 默认值： 'rows'

• 示例： 总计/数据字段

dataType

• 属性： data-data-type

• 类型: 字符串

• 详情

  您期望从服务器接收到的数据类型。

• 默认值： 'json'

• 示例： 数据类型

detailFilter

• 属性： data-detail-filter

• 类型: 函数

• 详情

  当 detailView 设置为 true 时，启用每行的展开。返回 true，则启用行的展开；返回 false，则禁用行的展开。默认函数返回 true 以允许所有行的展开。

• 默认值： function(index, row) { return true }

• 示例： 详细过滤器

detailFormatter

• 属性： data-detail-formatter

• 类型: 函数

• 详情

  当 detailView 设置为 true 时，格式化您的详细视图。返回一个字符串，它将被追加到详细视图单元格中，或者使用第三个参数直接渲染元素，该参数是目标单元格的 jQuery 元素。

• 默认值： function(index, row, element) { return '' }

• 示例： 详细视图

detailView

• 属性： data-detail-view

• 类型: 布尔值

• 详情

  设置为 true 以显示详细视图表。您可以设置 uniqueId 选项以在刷新表格时保持详细视图状态。

• 默认值: false

• 示例： 详细视图 UniqueId

detailViewAlign

• 属性： data-detail-view-align

• 类型: 字符串

• 详情

  指示如何对齐详细视图图标。可以使用 'left'、'right'。

• 默认值： 'left'

• 示例： 详细视图对齐

detailViewByClick

• 属性： data-detail-view-by-click

• 类型: 布尔值

• 详情

  设置为 true 以在单击单元格时切换详细视图。

• 默认值: false

• 示例： 详细视图图标

detailViewIcon

• 属性： data-detail-view-icon

• 类型: 布尔值

• 详情

  设置为 true 以显示详细视图列（加号/减号图标）。

• 默认值: true

• 示例： 详细视图图标

转义

• 属性： data-escape

• 类型: 布尔值

• 详情

  转义要插入 HTML 的字符串，替换 &、<、>、”、和 ' 字符。要禁用列标题的转义，请检查 escapeTitle` 选项。

• 默认值: false

• 示例： 表格转义

转义标题

• 属性： data-escape-title

• 类型: 布尔值

• 详情

  切换是否将 escape 选项应用于列标题。

• 默认值: true

• 示例： 表格转义标题

filterOptions

• 属性： data-filter-options

• 类型: 布尔值

• 详情

  定义算法的默认过滤器选项，filterAlgorithm: 'and' 表示所有给定的过滤器都必须匹配，filterAlgorithm: 'or' 表示给定的过滤器中至少有一个必须匹配。

• 默认值： { filterAlgorithm: 'and' }

• 示例： 过滤器选项

fixedScroll

• 属性： data-fixed-scroll

• 类型: 布尔值

• 详情

  设置为 true 以在加载数据时启用表格的固定滚动条位置。

• 默认值: false

• 示例： 固定滚动

footerField

• 属性： data-footer-field

• 类型: 字符串

• 详情

  定义页脚对象的键（来自数据数组或服务器响应 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

• 示例： 页脚字段

footerStyle

• 属性： data-footer-style

• 类型: 函数

• 详情

  页脚样式格式化函数，接受一个参数

  • column：列对象。

  支持 classes 或 css。示例用法

  function footerStyle(column) {
    return {
      css: { 'font-weight': 'normal' },
      classes: 'my-class'
    }
  }
  

• 默认值: {}

• 示例： 页脚样式

headerStyle

• 属性： data-header-style

• 类型: 函数

• 详情

  标题样式格式化函数，接受一个参数

  • column：列对象。

  支持 classes 或 css。示例用法

  function headerStyle(column) {
    return {
      css: { 'font-weight': 'normal' },
      classes: 'my-class'
    }
  }
  

• 默认值: {}

• 示例： 标题样式

高度

• 属性： data-height

• 类型： Number

• 详情

  表格的高度，启用表格的固定标题。

• 默认值: 未定义

• 示例： 表格高度

图标

• 属性： data-icons

• 类型: 对象

• 详情

  定义工具栏、分页和详细视图中使用的图标。

• 默认值

  {
    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'
  }
  

• 示例： 表格图标

iconSize

• 属性： data-icon-size

• 类型: 字符串

• 详情

  定义图标大小，可以使用 undefined、'lg'、'sm'。

• 默认值: 未定义

• 示例： 图标大小

iconsPrefix

• 属性： data-icons-prefix

• 类型: 字符串

• 详情

  定义图标集名称。默认情况下，此选项由主题自动计算。

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

• 默认值: 未定义

• 示例： 图标前缀

  idField

• 属性： data-id-field

• 类型: 字符串

• 详情

  指示哪个字段将用作复选框/单选按钮的值，它是 selectItemName 的对应项。

• 默认值: 未定义

• 示例： ID 字段

ignoreClickToSelectOn

• 属性： data-ignore-click-to-select-on

• 类型: 函数

• 详情

  设置忽略元素 clickToSelect 的操作。接受一个参数

  • element：单击的元素。

  如果应忽略单击，则返回 true；如果应选择行，则返回 false。此选项仅在 clickToSelect 为 true 时相关。

• 默认值： { return ['A', 'BUTTON'].includes(tagName) }

• 示例： 忽略单击以选择

loadingFontSize

• 属性： data-loading-font-size

• 类型: 字符串

• 详情

  定义加载文本的字体大小，默认值为 'auto'，根据表格宽度自动计算，介于 12px 和 32px 之间。

• 默认值： 'auto'

• 示例： 加载字体大小

loadingTemplate

• 属性： data-loading-template

• 类型: 函数

• 详情

  自定义加载类型。参数对象包含

  • loadingMessage：formatLoadingMessage 本地化。
• 默认值

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

• 示例： 加载模板

语言环境

• 属性： data-locale

• 类型: 字符串

• 详情

  设置要使用的语言环境（例如 'zh-CN'）。语言环境文件必须预先加载。允许以以下顺序进行回退语言环境（如果已加载）

  • 首先尝试指定的语言环境，
  • 然后尝试将“_”转换为“ - ”且区域代码大写的语言环境，
  • 然后尝试简短语言环境代码（例如 'zh' 而不是 'zh-CN'），
  • 最后将使用最后加载的语言环境文件（如果未加载语言环境文件，则使用默认语言环境）。

  如果留空或为空字符串，则使用最后加载的语言环境（如果未加载语言环境文件，则使用 'en-US'）。

• 默认值: 未定义

• 示例： 表格语言环境

maintainMetaData

• 属性： data-maintain-meta-data

• 类型: 布尔值

• 详情

  设置为 true 以在更改页面和搜索时保留以下元数据

  • 选定的行
  • 隐藏的行

• 默认值: false

• 示例： 保留元数据

方法

• 属性： data-method

• 类型: 字符串

• 详情

  请求远程数据的请求类型。

• 默认值： 'get'

• 示例： 表格方法

minimumCountColumns

• 属性： data-minimum-count-columns

• 类型： Number

• 详情

  要从列下拉列表中隐藏的最小列数。

• 默认值： 1

• 示例： 最小列数

multipleSelectRow

• 属性： data-multiple-select-row

• 类型: 布尔值

• 详情

  设置为 true 以启用多选行。可以使用 Ctrl+单击选择一行，或 Shift+单击选择一组行。

• 默认值: false

• 示例： 多选行

pageList

• 属性： data-page-list

• 类型: 数组

• 详情

  设置分页属性时，通过选择列表初始化页面大小。如果包含 'all' 或 'unlimited' 选项，则表格中将显示所有记录。

  提示：如果表格中的行数少于选项，则选项将自动隐藏。要禁用此功能，可以将 smartDisplay 设置为 false

• 默认值： [10, 25, 50, 100]

• 示例： 页面列表

pageNumber

• 属性： data-page-number

• 类型： Number

• 详情

  设置分页属性时，初始化页面编号。

• 默认值： 1

• 示例： 页面编号

pageSize

• 属性： data-page-size

• 类型： Number

• 详情

  设置分页属性时，初始化页面大小。

• 默认值： 10

• 示例： 页面大小

分页

• 属性： data-pagination

• 类型: 布尔值

• 详情

  设置为 true 以在表格底部显示分页工具栏。

• 默认值: false

• 示例： 表格分页

paginationDetailHAlign

• 属性： data-pagination-detail-h-align

• 类型: 字符串

• 详情

  指示如何对齐分页详细信息。可以使用 'left'、'right'。

• 默认值： 'left'

• 示例： 分页水平对齐

paginationHAlign

• 属性： data-pagination-h-align

• 类型: 字符串

• 详情

  指示如何对齐分页。可以使用 'left'、'right'。

• 默认值: 'right'

• 示例： 分页水平对齐

paginationLoadMore

• 属性： data-pagination-load-more

• 类型: 布尔值

• 详情

  设置 true 以启用通过分页加载更多数据。它仅在客户端分页中使用。通常，要实现“加载更多”功能，通常需要将其与 responseHandler 结合使用以处理返回的数据。

  它主要用于总页数未知的场景。在这种情况下，无法显示确切的总数或计算总页数。相反，可以使用诸如“100+”之类的显示格式来指示除显示的计数之外还有其他项目。当用户导航到最后一页时，将加载更多数据以及分页信息的更新。此过程将持续进行，直到所有数据加载完成。

• 默认值: false

• 示例： 分页加载更多

paginationLoop

• 属性： data-pagination-loop

• 类型: 布尔值

• 详情

  设置 true 以启用分页连续循环模式。

• 默认值: true

• 示例： 分页循环

paginationNextText

• 属性： data-pagination-next-text

• 类型: 字符串

• 详情

  指示在分页详细信息（下一个按钮）中显示的图标或文本。

• 默认值： '›'

• 示例： 分页文本

paginationPagesBySide

• 属性： data-pagination-pages-by-side

• 类型： Number

• 详情

  当前页面两侧（右，左）的页数。

• 默认值： 1

• 示例： 分页索引号

paginationParts

• 属性： data-pagination-parts

• 类型: 数组

• 详情

  这些选项定义分页的哪些部分应该可见。

  • pageInfo 显示当前页面将显示哪个数据集（例如 显示 1 到 10 行，共 54 行）。
  • pageInfoShort 与 pageInfo 相似，它只显示表格有多少行（例如 显示 54 行）。
  • pageSize 显示定义页面上应该显示多少行的下拉菜单。
  • pageList 显示分页的主要部分（页面的列表）。

• 默认值： ['pageInfo', 'pageSize', 'pageList']

• 示例： 分页部分

paginationPreText

• 属性： data-pagination-pre-text

• 类型: 字符串

• 详情

  指示在分页详细信息中显示的图标或文本，即上一个按钮。

• 默认值： '‹'

• 示例： 分页文本

paginationSuccessivelySize

• 属性： data-pagination-successively-size

• 类型： Number

• 详情

  一行中连续页面的最大数量。

• 默认值： 5

• 示例： 分页索引号

paginationUseIntermediate

• 属性： data-pagination-use-intermediate

• 类型: 布尔值

• 详情

  计算并显示中间页面以快速访问。

• 默认值: false

• 示例： 分页索引号

paginationVAlign

• 属性： data-pagination-v-align

• 类型: 字符串

• 详情

  指示如何垂直对齐分页。可以使用 'top'、'bottom'、'both'（将分页置于顶部和底部）。

• 默认值： 'bottom'

• 示例： 分页垂直对齐

queryParams

• 属性： data-query-params

• 类型: 函数

• 详情

  当请求远程数据时，可以通过修改 queryParams 来发送附加参数。

  如果 queryParamsType = 'limit'，则 params 对象包含：limit、offset、search、sort、order。

  否则，它包含：pageSize、pageNumber、searchText、sortName、sortOrder。

  返回 false 以停止请求。

• 默认值： function(params) { return params }

• 示例： 查询参数

queryParamsType

• 属性： data-query-params-type

• 类型: 字符串

• 详情

  设置 'limit' 以使用 RESTFul 类型发送查询参数。

• 默认值： 'limit'

• 示例： 查询参数类型

regexSearch

• 属性： data-regex-search

• 类型: 布尔值

• 详情

  设置 true 以启用正则表达式搜索。如果启用此选项，可以使用正则表达式进行搜索，例如 [47a]$ 用于所有以 4、7 或 a 结尾的项目。正则表达式可以 /[47a]$/gim 或 [47a]$ 形式输入，不带标志。默认标志为 gim。

• 默认值: false

• 示例： 正则表达式搜索

rememberOrder

• 属性： data-remember-order

• 类型: 布尔值

• 详情

  设置 true 以记住每列的顺序。

• 默认值: false

• 示例： 记住顺序

responseHandler

• 属性： data-response-handler

• 类型: 函数

• 详情

  在加载远程数据之前，处理响应数据格式。参数对象包含

  • res：响应数据。
  • jqXHR：jqXHR 对象，它是 XMLHTTPRequest 对象的超集。有关更多信息，请参阅 jqXHR 类型。

• 默认值： function(res) { return res }

• 示例： 响应处理程序

rowAttributes

• 属性： data-row-attributes

• 类型: 函数

• 详情

  行属性格式化函数，接受两个参数

  • row：行记录数据。
  • index：行索引。

  支持所有自定义属性。

• 默认值: {}

• 示例： 行属性

rowStyle

• 属性： data-row-style

• 类型: 函数

• 详情

  行样式格式化函数，接受两个参数

  • row：行记录数据。
  • index：行索引。

  支持类或 CSS。

• 默认值: {}

• 示例： 行样式

搜索

• 属性： data-search

• 类型: 布尔值

• 详情

  启用搜索输入。

  有三种搜索方式

  • 值包含搜索查询（默认）。例如：Github 包含 git。
  • 值必须与搜索查询完全一致。例如：Github（值）和 Github（搜索查询）。
  • 比较（<，>，<=，=<，>=，=>）。例如：4 大于 3。

  注意

  • 如果你想使用自定义搜索输入，请使用 searchSelector。
  • 你也可以使用 regexSearch 选项通过正则表达式进行搜索。
  • 如果你想将可搜索参数发送到服务器端分页，请使用 searchable 选项。

• 默认值: false

• 示例： 表格搜索

可搜索

• 属性： data-searchable

• 类型: 布尔值

• 详情

  设置 true 以在使用服务器端分页时将 可搜索参数 发送到服务器。

• 默认值: false

• 示例： 可搜索

searchAccentNeutralise

• 属性： data-search-accent-neutralise

• 类型: 布尔值

• 详情

  如果你想使用重音中立化功能，请设置为 true。

• 默认值: false

• 示例： 搜索重音中立化

searchAlign

• 属性： data-search-align

• 类型: 字符串

• 详情

  指示如何对齐搜索输入。可以使用 'left'、'right'。

• 默认值: 'right'

• 示例： 搜索对齐

searchHighlight

• 属性： data-search-highlight

• 类型: 布尔值

• 详情

  设置为 true 以突出显示搜索的文本（使用 <mark> HTML 标签）。你也可以定义一个 自定义突出显示格式化程序，例如，用于具有 HTML 的值或使用自定义突出显示颜色。

• 默认值： 'false'

• 示例： 搜索突出显示

searchOnEnterKey

• 属性： data-search-on-enter-key

• 类型: 布尔值

• 详情

  搜索方法将在按下 Enter 键之前执行。

• 默认值: false

• 示例： 在按下 Enter 键时搜索

searchSelector

• 属性： data-search-selector

• 类型： Boolean|String

• 详情

  如果设置此选项（必须是有效的 DOM 选择器，例如 #customSearch），则找到的 DOM 元素（input 元素）将用作表格搜索，而不是内置的搜索输入。

• 默认值: false

• 示例： 搜索选择器

searchText

• 属性： data-search-text

• 类型: 字符串

• 详情

  设置搜索属性时，初始化搜索文本。

• 默认值： ''

• 示例： 搜索文本

searchTimeOut

• 属性： data-search-time-out

• 类型： Number

• 详情

  设置搜索触发超时时间。

• 默认值： 500

• 示例： 搜索超时

selectItemName

• 属性： data-select-item-name

• 类型: 字符串

• 详情

  单选按钮或复选框输入的名称。

• 默认值： 'btSelectItem'

• 示例： ID 字段

serverSort

• 属性： data-server-sort

• 类型: 布尔值

• 详情

  设置为 false 以在客户端对数据进行排序，仅在 sidePagination 为 server 时有效。

• 默认值: true

• 示例： 服务器排序

showButtonIcons

• 属性： data-show-button-icons

• 类型: 布尔值

• 详情

  所有按钮都将在其上显示图标。

• 默认值: true

• 示例： 显示按钮图标

showButtonText

• 属性： data-show-button-text

• 类型: 布尔值

• 详情

  所有按钮都将在其上显示文本。

• 默认值: false

• 示例： 显示按钮文本

showColumns

• 属性： data-show-columns

• 类型: 布尔值

• 详情

  设置 true 以显示列下拉列表。我们可以将 switchable 列选项设置为 false 以隐藏下拉列表中的列项。可以使用 minimumCountColumns 表格选项控制所选列的最小数量。

• 默认值: false

• 示例： 基本列 和 大型列

showColumnsSearch

• 属性： data-show-columns-search

• 类型: 布尔值

• 详情

  设置 true 以显示列过滤器搜索。

• 默认值: false

• 示例： 列搜索

showColumnsToggleAll

• 属性： data-show-columns-toggle-all

• 类型: 布尔值

• 详情

  设置 true 以在列选项/下拉菜单中显示全选复选框。

• 默认值: false

• 示例： 列全选

showExtendedPagination

• 属性： data-show-extended-pagination

• 类型: 布尔值

• 详情

  设置 true 以显示分页的扩展版本（包括所有未过滤行的计数）。如果您在服务器端使用分页，请使用 totalNotFilteredField 来定义计数。

• 默认值: false

• 示例： 显示扩展分页

showFooter

• 属性： data-show-footer

• 类型: 布尔值

• 详情

  设置 true 以显示摘要页脚行。

• 默认值: false

• 示例： 显示页脚

showFullscreen

• 属性： data-show-fullscreen

• 类型: 布尔值

• 详情

  设置 true 以显示全屏按钮。

• 默认值: false

• 示例： 显示全屏

showHeader

• 属性： data-show-header

• 类型: 布尔值

• 详情

  设置 false 以隐藏表头。

• 默认值: true

• 示例： 显示表头

showPaginationSwitch

• 属性： data-show-pagination-switch

• 类型: 布尔值

• 详情

  设置 true 以显示分页切换按钮。

• 默认值: false

• 示例： 显示分页切换

showRefresh

• 属性： data-show-refresh

• 类型: 布尔值

• 详情

  设置 true 以显示刷新按钮。

• 默认值: false

• 示例： 显示刷新

showSearchButton

• 属性： data-show-search-button

• 类型: 布尔值

• 详情

  设置 true 以在搜索输入框后面显示一个搜索按钮。只有按下按钮时才会执行搜索（例如，为了防止流量或加载时间）。

• 默认值: false

• 示例： 显示搜索按钮

showSearchClearButton

• 属性： data-show-search-clear-button

• 类型: 布尔值

• 详情

  设置 true 以在搜索输入框后面显示一个清除按钮，该按钮将清除搜索输入框（以及所有来自过滤器控制的过滤器（如果已启用））。

• 默认值: false

• 示例： 显示搜索清除按钮

showToggle

• 属性： data-show-toggle

• 类型: 布尔值

• 详情

  设置 true 以显示切换按钮以切换表格/卡片视图。

• 默认值: false

• 示例： 显示切换

sidePagination

• 属性： data-side-pagination

• 类型: 字符串

• 详情

  定义表格的侧边分页，只能是 'client' 或 'server'。使用 'server' 侧需要设置 'url' 或 'ajax' 选项。

  请注意，所需的服务端响应格式不同，取决于 'sidePagination' 选项是否设置为 'client' 或 'server'。请参见以下示例

  • 没有服务端分页
  • 有服务端分页

  URL 参数

  当 sidePagination 设置为 server 时，bootstrap 表格将使用以下 URL 参数调用 url

  • offset 的值为 0 到 total - 1 之间，表示要包含的第一条记录。
  • limit 的值为每页的行数。

  在实现服务端分页时，您必须以类似 此示例 的格式实现 JSON 视图。该视图必须获取上面指示的 URL 参数值，并返回从 offset 索引开始的记录，并返回 limit 所指示的记录数。例如，如果您需要记录 11-20，您的视图必须从 URL 字符串中获取 offset=10 和 limit=10，并返回类似 此示例 的记录。

• 默认： 'client'

• 示例： 客户端分页 和 服务端分页

silentSort

• 属性： data-silent-sort

• 类型: 布尔值

• 详情

  设置 false 以使用加载消息对数据进行排序。此选项在 sidePagination 选项设置为 'server' 时有效。

• 默认值: true

• 示例： 静默排序

singleSelect

• 属性： data-single-select

• 类型: 布尔值

• 详情

  设置 true 以允许复选框仅选择一行。

• 默认值: false

• 示例： 单选

smartDisplay

• 属性： data-smart-display

• 类型: 布尔值

• 详情

  设置 true 以智能地显示分页或卡片视图。

• 默认值: true

• 示例： 智能显示

可排序

• 属性： data-sortable

• 类型: 布尔值

• 详情

  设置 false 以禁用所有列的可排序性。

• 默认值: true

• 示例： 表格可排序

sortClass

• 属性： data-sort-class

• 类型: 字符串

• 详情

  排序的 td 元素的类名。

• 默认值: 未定义

• 示例： 排序类

sortEmptyLast

• 属性： data-sort-empty-last

• 类型: 布尔值

• 详情

  设置 true 以将 <empty string>、undefined 和 null 排序为最后一个值。

• 默认值: false

• 示例： 将空值排序到最后

sortName

• 属性： data-sort-name

• 类型: 字符串

• 详情

  定义要排序的列。

• 默认值: 未定义

• 示例： 排序名称顺序

sortOrder

• 属性： data-sort-order

• 类型: 字符串

• 详情

  定义列排序顺序，只能是 undefined、'asc' 或 'desc'。

• 默认值: 未定义

• 示例： 排序名称顺序

sortReset

• 属性： data-sort-reset

• 类型: 布尔值

• 详情

  设置 true 以在第三次点击时重置排序。

• 默认值: false

• 示例： 排序重置

sortResetPage

• 属性： data-sort-reset-page

• 类型: 布尔值

• 详情

  设置 true 以在排序时重置页码。

• 默认值: false

• 示例： 排序重置页码

sortStable

• 属性： data-sort-stable

• 类型: 布尔值

• 详情

  设置 true 以获得稳定的排序。我们将向行添加 '_position' 属性。

• 默认值: false

• 示例： 稳定排序

strictSearch

• 属性： data-strict-search

• 类型: 布尔值

• 详情

  启用严格搜索。禁用比较检查。

• 默认值: false

• 示例： 严格搜索

theadClasses

• 属性： data-thead-classes

• 类型: 字符串

• 详情

  表 thead 的类名。Bootstrap v4，使用修饰符类 .thead-light 或 .thead-dark 使 thead 呈现浅灰色或深灰色。

• 默认值： ''

• 示例： Thead 类

工具栏

• 属性： data-toolbar

• 类型: 字符串/节点

• 详情

  一个 jQuery 选择器，指示工具栏，例如：#toolbar、.toolbar 或 DOM 节点。

• 默认值: 未定义

• 示例： 自定义工具栏

toolbarAlign

• 属性： data-toolbar-align

• 类型: 字符串

• 详情

  指示如何对齐自定义工具栏。可以使用 'left'、'right'。

• 默认值： 'left'

• 示例： 工具栏对齐

totalField

• 属性： data-total-field

• 类型: 字符串

• 详情

  传入 JSON 中包含 'total' 数据的键。

• 默认： 'total'

• 示例： 总计/数据字段

totalNotFiltered

• 属性： data-total-not-filtered

• 类型： Number

• 详情

  此属性主要由分页服务器传递，使用起来很方便。

• 默认： 0

totalNotFilteredField

• 属性： data-total-not-filtered-field

• 类型： string

• 详情

  来自 JSON 响应的字段将用于 showExtendedPagination。

• 默认： totalNotFiltered

• 示例： 总计未过滤字段

totalRows

• 属性： data-total-rows

• 类型： Number

• 详情

  此属性主要由分页服务器传递，使用起来很方便。

• 默认： 0

trimOnSearch

• 属性： data-trim-on-search

• 类型: 布尔值

• 详情

  设置 true 以修剪搜索字段中的空格。

• 默认值: true

• 示例： 搜索时修剪

undefinedText

• 属性： data-undefined-text

• 类型: 字符串

• 详情

  定义默认的 undefined 文本。

• 默认： '-'

• 示例： 未定义文本

uniqueId

• 属性： data-unique-id

• 类型: 字符串

• 详情

  指示每行的唯一标识符。唯一 ID 应始终对 html 安全，例如字母数字，它不应包含可能破坏 html 的字符，例如 "。

• 默认值: 未定义

• 示例： getRowByUniqueId

url

• 属性： data-url

• 类型: 字符串

• 详情

  从远程站点请求数据的 URL。

  请注意，所需的服务端响应格式不同，取决于是否指定了 'sidePagination' 选项。请参见以下示例

  • 没有服务端分页
  • 有服务端分页

  URL 参数

  当 sidePagination 设置为 server 时，bootstrap 表格将使用以下 URL 参数调用 url

  • offset 的值为 0 到 total - 1 之间，表示要包含的第一条记录。
  • limit 的值为每页的行数。

  在实现服务端分页时，您必须以类似 此示例 的格式实现 JSON 视图。该视图必须获取上面指示的 URL 参数值，并返回从 offset 索引开始的记录，并返回 limit 所指示的记录数。例如，如果您需要记录 11-20，您的视图必须从 URL 字符串中获取 offset=10 和 limit=10，并返回类似 此示例 的记录。

• 默认值: 未定义

• 示例： 从 URL

• 错误处理

  要获取加载错误，请使用 onLoadError

虚拟滚动

• 属性： data-virtual-scroll

• 类型: 布尔值

• 详情

  设置 true 以启用虚拟滚动以显示虚拟的“无限”列表。

• 默认值: false

• 示例： 大型数据

virtualScrollItemHeight

• 属性： data-virtual-scroll-item-height

• 类型： Number

• 详情

  如果未定义此选项，我们将默认使用第一项的高度。

  如果虚拟项高度明显大于默认高度，则必须提供此选项。此维度用于帮助确定初始化时应创建多少个单元格，并帮助计算可滚动区域的高度。此高度值只能使用 px 单位。

• 默认值: 未定义

visibleSearch

• 属性： data-visible-search

• 类型: 布尔值

• 详情

  设置 true 以仅在可见列/数据中搜索。如果数据包含其他未显示的值，则在搜索时将忽略这些值。

• 默认值: false

• 示例： 可见搜索