前端表格插件 BootstrapTable API 参数查询。

官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Github地址： https://github.com/wenzhixin/bootstrap-table

官网介绍： 
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

主要功能

• 支持 Bootstrap 3 和 Bootstrap 2
• 自适应界面
• 固定表头
• 非常丰富的配置参数
• 直接通过标签使用
• 显示/隐藏列
• 显示/隐藏表头
• 通过 AJAX 获取 JSON 格式的数据
• 支持排序
• 格式化表格
• 支持单选或者多选
• 强大的分页功能
• 支持卡片视图
• 支持多语言
• 支持插件

优点

• 学习成本较低，配置简单，文档齐全
• 跟Bootstrap无缝衔接，整体风格一致，也便于二次开发
• 开发者活跃，Github定期维护

开始使用

• 1、在网页的head标签里插入下面的代码

<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">

<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">


<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js">script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js">script>


<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js">script>

<script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js">script>

• 
  

• 2、在页面body代码块里定义表格展示的区域

<table id="table">table>

• 3、使用data属性来渲染表格 （简单方式）

<table data-toggle="table" data-url="data1.json">
    <thead>
        <tr>
            <th data-field="id">序号th>
            <th data-field="name">名称th>
            <th data-field="price">价格th>
        tr>
    thead>
table>

• 4、编写JavaScript代码渲染表格 （推荐使用这种方式，代码阅读和扩展更为方便）

在网页代码最下面插入js脚本，内容如下：

$("#table").bootstrapTable({ // 对应table标签的id
      url: "<%=request.getContextPath()%>/api/getDataList.do", // 获取表格数据的url
      cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
      striped: true,  //表格显示条纹，默认为false
      pagination: true, // 在表格底部显示分页组件，默认false
      pageList: [10, 20], // 设置页面可以显示的数据条数
      pageSize: 10, // 页面数据条数
      pageNumber: 1, // 首页页码
      sidePagination: 'server', // 设置为服务器端分页
      queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

          return {
              pageSize: params.limit, // 每页要显示的数据条数
              offset: params.offset, // 每页显示数据的开始行号
              sort: params.sort, // 要排序的字段
              sortOrder: params.order, // 排序规则
              dataId: $("#dataId").val() // 额外添加的参数
          }
      },
      sortName: 'id', // 要排序的字段
      sortOrder: 'desc', // 排序规则
      columns: [
          {
              checkbox: true, // 显示一个勾选框
              align: 'center' // 居中显示
          }, {
              field: 'code', // 返回json数据中的name
              title: '编号', // 表格表头显示文字
              align: 'center', // 左右居中
              valign: 'middle' // 上下居中
          }, {
              field: 'name',
              title: '名称',
              align: 'center',
              valign: 'middle'
          }, {
              field: 'calcMode',
              title: '计算方式',
              align: 'center',
              valign: 'middle',
              formatter: function (value, row, index){ // 单元格格式化函数
                  var text = '-';
                  if (value == 1) {
                      text = "方式一";
                  } else if (value == 2) {
                      text = "方式二";
                  } else if (value == 3) {
                      text = "方式三";
                  } else if (value == 4) {
                      text = "方式四";
                  }
                  return text;
              }
          }, {
              title: "操作",
              align: 'center',
              valign: 'middle',
              width: 160, // 定义列的宽度，单位为像素px
              formatter: function (value, row, index) {
                  return ''\')">删除';
              }
          }
      ],
      onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
      }

})

• 
  

组件文档

一、表格参数

设置表格如何显示，下面列举了常用的参数，更全的列表请访问官方网址： 
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#表格参数

使用方式如下：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      ... ...

});      

• 
  

名称	标签	类型	默认	描述
method	data-method	String	‘get’	服务器数据的请求方式 ‘get’ or ‘post’
url	data-url	String	undefined	服务器数据的加载地址
undefinedText	data-undefined-text	String	‘-‘	当数据为 undefined 时显示的字符
striped	data-striped	Boolean	false	设置为 true 会有隔行变色效果
columns	-	Array	[]	列配置项,详情请查看 列参数 表格.
data	-	Array	[]	加载json格式的数据
cache	data-cache	Boolean	true	设置为 false 禁用 AJAX 数据缓存
dataType	data-data-type	String	‘json’	服务器返回的数据类型
queryParams	data-query-params	Function	function(params) {  return params;  }	请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数， 例如 toolbar 中的参数  如果 queryParamsType = ‘limit’ ,返回参数必须包含  limit, offset, search, sort, order  否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder.  返回false将会终止请求
pagination	data-pagination	Boolean	false	设置为 true 会在表格底部显示分页条
paginationLoop	data-pagination-loop	Boolean	true	设置为 true 启用分页条无限循环的功能。
sidePagination	data-side-pagination	String	‘client’	设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法
pageNumber	data-page-number	Number	1	如果设置了分页，首页页码
pageSize	data-page-size	Number	10	如果设置了分页，页面数据条数
pageList	data-page-list	Array	[10, 25, 50, 100, All]	如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
search	data-search	Boolean	false	是否启用搜索框
searchOnEnterKey	data-search-on-enter-key	Boolean	false	设置为 true时，按回车触发搜索方法，否则自动触发搜索方法
showRefresh	data-show-refresh	Boolean	false	是否显示 刷新按钮
clickToSelect	data-click-to-select	Boolean	false	设置true 将在点击行时，自动选择rediobox 和 checkbox
singleSelect	data-single-select	Boolean	false	设置True 将禁止多选

二、列参数

针对具体每一列展示的设置参数，最常用的为 title 和 field， 它们分别设置了表头显示文字和对应要显示的每项数据

示例代码：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      columns: [
          {
              checkbox: true
          }, {
              title: '标准编号'
              field: 'stdCode'
          },
          ... ...
      ]
});      

• 
  

名称	标签	类型	默认	描述
title	data-title	String	undefined	表头要显示的文本
field	data-field	String	undefined	要显示数据的字段名称，可以理解为json对象里的key
checkbox	data-checkbox	Boolean	false	设置为True的时候 则显示一列checkbox组件，该列的宽度为固定宽度
radio	data-radio	Boolean	false	设置为True的时候 则显示一列radio组件，该列的宽度为固定宽度
align	data-align	String	undefined	设置单元格数据的左右对齐方式， 可选择的值有：’left’, ‘right’, ‘center’
valign	data-valign	String	undefined	设置单元格数据的上下对齐方式， 可选择的值有：’top’, ‘middle’, ‘bottom’
width	data-width	Number {Pixels or Percentage}	undefined	设置列的宽度。如果没有设置的话则根据表格内容自适应宽度。设置的话，可以使用’%’百分比的方式，也可以设置要显示的像素值， 如果设置像素值的话可以不填’px’， 例如： width : 100 和 width : ‘100px’ ，效果是一样的
visible	data-visible	Boolean	true	显示或隐藏该列， 默认显示， False为隐藏
formatter	data-formatter	Function	undefined	单元格格式化函数，有三个参数： value： 该列的字段值； row： 这一行的数据对象； index： 行号，第几行，从0开始计算 例子： formatter : function(value, row, index){ return value + row.id + index; }

关于列参数，更详细文档请访问 
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#列参数

三、事件

给表格绑定事件，代码：

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
      }
});      

• 
  

Option 事件	jQuery 事件	参数	描述
onLoadSuccess	load-success.bs.table	data	请求加载远程服务器数据成功时的事件
onLoadError	load-error.bs.table	status	请求加载远程服务器数据失败时的事件
onClickRow	click-row.bs.table	row, element|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据 ，<br/>element|当用户点击某一行的时候触发，参数包括： row：点击行的数据， element：tr 元素，  field：点击列的 field 名称。
onDblClickRow	dbl-click-row.bs.table	row, $element	当用户双击某一行的时候触发，参数包括： row：点击行的数据， field：点击列的 field 名称。
onClickCell	click-cell.bs.table	field, value, row, element|当用户点击某一列的时候触发，参数包括：<br/>field：点击列的field名称 ，<br/>value： 点击列的value值，<br/>row：点击列的整行数据，<br/>element|当用户点击某一列的时候触发， 参数包括： field：点击列的field名称， value：点击列的value值， row：点击列的整行数据， element：td 元素。
onDblClickCell	dbl-click-cell.bs.table	field, value, row, element|当用户双击某一列的时候触发 ，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row： 点击列的整行数据，<br/>element|当用户双击某一列的时候触发，参数包括： field：点击列的field名称， value：点击列的value值， row：点击列的整行数据， element：td 元素。

关于事件，更详细文档请访问： 
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#事件

四、方法

使用方法的语法：$(‘#table’).bootstrapTable(‘method’, parameter);。 
示例代码：

// 获取表格所有已经勾选的行数据，为一个对象数组
var selects = $('#table').bootstrapTable('getSelections');

• 1
• 2

名称(method)	参数	描述
getOptions	none	返回表格的 Options。
getSelections	none	返回所选的行，当没有选择任何行的时候返回一个空数组。
getAllSelections	none	返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。
load	data	加载数据到表格中，旧数据会被替换。
append	data	添加数据到表格在现有数据之后。
prepend	data	插入数据到表格在现有数据之前。
insertRow	params	插入新行，参数包括： index: 要插入的行的 index。 row: 行的数据，Object 对象。
refresh	params	更新远程服务器上的数据，可以设置{silent: true}来默认刷新，也可以设置{url: newUrl}来改变获取数据的url接口，也支持设置请求的参数{query: {foo: ‘bar’}}，这点在表单查询时很有用
showLoading	none	显示数据加载状态
hideLoading	none	隐藏数据加载状态
check	index	选择一行，参数为行号，index从0开始
uncheck	index	取消选择一行，参数为行号，index从0开始
destroy	none	销毁一个表格，直接把整个table删掉，需要重新开始渲染table
selectPage	page	跳到指定的页。
prevPage	none	跳到上一页。
nextPage	none	跳到下一页。

名称	属性	类型	默认值	作用描述
showPaginationSwitch	data-show-pagination-switch	Boolean	false	默认为false隐藏每页数据条数选择，设为true显示
minimumCountColumns	data-minimum-count-columns	Number	1	每列的下拉菜单最小数
idField	data-id-field	String	undefined	表明哪个是字段是标识字段
uniqueId	data-unique-id	String	undefined	表明每行唯 一的标识符
cardView	data-card-view	Boolean	false	默认false，设为true显示card view（卡片视图）
detailView	data-card-view	Boolean	false	默认false，设为true显示detail view（细节视图）
detailFormatter	data-detail-formatter	Function	function(index, row, element){ return ”;}	前提：detailView设为true，启用了显示detail view。       - 用于格式化细节视图       - 返回一个字符串，通过第三个参数element直接添加到细节视图的cell（某一格）中，其中，element为目标cell的jQuery element
searchAlign	data-search-align	String	right	搜索框的位置，默认right（最右），可选left
buttonsAlign	data-buttons-align	String	right	工具栏按钮的位置，默认right（最右），可选left
toolbarAlign	data-toolbar-align	String	left	自定义工具栏的位置，默认right（最右），可选left
paginationVAlign	data-pagination-v-align	String	bottom	分页条垂直方向的位置，默认bottom（底部），可选top、both（顶部和底部均有分页条）
paginationHAlign	data-pagination-h-align	String	right	分页条水平方向的位置，默认right（最右），可选left
paginationDetailHAlign	data-pagination-detail-h-align	String	left	如果解译的话太长，举个例子，paginationDetail就是“显示第 1 到第 8 条记录，总共 15 条记录 每页显示 8 条记录”，默认left（最左），可选right
paginationPreText	data-pagination-pre-text	String	‹	还是举例子，如果你内容太多，底部最右边会显示：”‹ 1 2 3 4 5 ›”来选择页数，默认就是最左边那个符号，下同
paginationNextText	data-pagination-next-text	String	›	参考上面一条
clickToSelect	data-click-to-select	Boolean	false	默认false不响应，设为true则当点击此行的某处时，会自动选中此行的checkbox（复选框）或radiobox（单选按钮）
singleSelect	data-single-select	Boolean	false	默认false，设为true则允许复选框仅选择一行
toolbar	data-toolbar	String | Node	undefined	jQuery的选择器，例如：#toolbar，.toolbar，或者是DOM 结点
checkboxHeader	data-checkbox-header	Boolean	true	如果你有声明复选框，默认显示表头行的全选复选框，设为false隐藏（就是表格第一行的不显示，从第二行往后都显示）
maintainSelected	data-maintain-selected	Boolean	false	设为true则保持被选的那一行的状态
sortable	data-sortable	Boolean	true	默认true，设为false禁用所有的行排列（也就是每列表头不会显示排序的按钮，这个需要在th声明data-sortable=”true”，写在js中只是启不启用）
slientSort	data-silent-sort	Boolean	true	前提：sidePagination设为server（服务端）       - 默认true，设为false则静默排序数据
rowStyle	data-row-style	Function	{}	改变某行的格式，需要两个参数：        - row：此行的数据        - index：此行的索引 支持classes和css，用法如下： function rowStyle(row, index){     return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; }
rowAttributes	data-row-attributes	Function	{}	改变某行的属性，需要两个参数：        - row：此行的数据        - index：此行的索引 支持所有自定义的属性。
customSearch	data-custom-search	Function	$.noop	自定义搜索功能（用来代替自带的搜索功能），需要一个参数：        - text：想要搜索的内容 用法如下： function customSearch(text){      //必须使用’this.data’对数据进行过滤（filter the data，感觉这个词也不用译），不要使用’this.options.data’ }
customSort	data-custom-sort	Function	$.noop	自定义排序功能（用来代替自带的排序功能），需要两个参数（可以参考前面）：        - sortName：需要排序的那列        - sortOrder：排序方式 用法：和上面一样，不用担心，注释也一模一样
locale	data-locale	String	undefined	本地化（动词）。 本地化的文件必须被预加载，允许fallback（简单来说就是如果要使用的文件不可用，就可以用别的替代它，例如球场替补，没替补，如果有人受伤了，比赛不就废了），如果加载，将按如下顺序：        - 首先尝试加载的是指定的”本地化”文件        - 然后是’_’（下划线）写成’-‘（破折号），并且区域代码被大写的        - 然后是短区域代码（例如：用’fr’代替’fr-CA’）        - 最后使用的是剩下的本地化文件（当没有文件可加载则使用默认的） 如果剩余的undefined，或者是空字符，则使用最后一次使用的那个文件（当没有本地化文件可被加载，则使用自带的’en_US’）
footerStyle	data-footer-style	Function	{}	改变footer格式，需要两个参数：        - row：此行的数据        - index：此行的索引 支持classes和css，用法如下： function rowStyle(value，row, index){     return { css: { “font-weight”: “bold” } }; }

---

列的各项（Column options ）

定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内

名称	属性	类型	默认值	作用描述
radio	data-radio	Boolean	false	默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的
checkbox	data-checkbox	Boolean	false	默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定
field	data-field	String	undefined	是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一
title	data-title	String	undefined	这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字
titleTooltip	data-title-tooltip	String	undefined	当悬浮在某控件上，出现提示        - 参考 Bootstrap 提示工具（Tooltip）插件
class	class/data-class	String	undefined	没什么好说的，就是class
rowspan	rowspan/data-rowspan	Number	undefined	每格所占的行数
colspan	colspan/data-colspan	Number	undefined	每格所占的列数
align	data-align	String	undefined	每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中）
halign	data-halign	String	undefined	table header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中）
falign	data-falign	String	undefined	table footer（表脚，就这样译，任性，其实随便译啦，知道就好）的对齐方式，有：left（靠左）、right（靠右）、center（居中）
valign	data-valign	String	undefined	每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）
width	data-width	Number（单位：px或%）	undefined	每列的宽度。        - 如果没有自定义宽度，那么宽度会根据内容的宽度自适应。        - 如果表是左适应（left responsive）或者设置的宽度小于内容的宽度，那么，宽度还是会自适应（可以在class或其他的属性中使用 min-width 或 max-width）。        - 你也可以使用”%”作为单位，这样的话，bootstapTable将按百分比划分，如果你想使用”pixels（像素值）”，你可以只写数字（只要不加”%”，单位默认”px”，不嫌麻烦，或者想更清晰，你也可以加上”px”）
sortable	data-sortable	Boolean	false	默认false就默认显示，设为true则会被排序
order	data-order	String	asc	默认的排序方式为”asc（升序）”，也可以设为”desc（降序）”。        - 与上面的结合使用，不然都不让排序了，你还考虑什么升降。
visible	data-visible	Boolean	true	默认为true显示该列，设为false则隐藏该列。         - 还是很有用的，例如隐藏自定义index列，按某属性排序后会变乱，你可以读取某行的index来进行赋值
cardVisible	data-card-visible	Boolean	true	默认为true显示该列，设为false则隐藏。
switchable	data-switchable	Boolean	true	默认为true显示该列，设为false则禁用列项目的选项卡。
clickToSelect	data-click-to-select	Boolean	true	默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮）
formatter	data-formatter	Function	undefined	需要此列的对象。         某格的数据转换函数，需要三个参数：           -value： field（字段名）           -row：行的数据           -index：行的（索引）index
footerFormatter	data-footer-formatter	Function	undefined	需要此列的对象。         某格的数据转换函数，需要一个参数：           -data： 所有行数据的数组         函数需要返回（return）footer某格内所要显示的字符串的格式，还要包括内容
events	data-events	Object	undefined	当某格使用formatter函数时，事件监听会响应，需要四个参数：           -event：jQuery事件（参考Events）。           - value：字段名           - row：行数据           - index：此行的index  举个例子：	var operateEvents = {‘click .like’: function (e, value, row, index) {}};
sorter	data-sorter	Function	undefined	自定义的排序函数，实现本地排序，需要两个参数：           - a：第一个字段名           - b：第二个字段名
sortName	data-sort-name	String	undefined	除了表头默认的sort-name或列的字段名，还可以使用自定义的sort-name         对特殊情况说明：           - 一个列显示的内容或许是”html”代码，如：abc，但是被排列的是html代码中的内容（content）：abc
cellStyle	data-cell-style	Function	undefined	对某格中显示样式（style）进行改变，需要三个函数：           - value：字段名           - row：行数据           - index：此行的index           - field：行的字段名 支持classes和css，用法如下：       function cellStyle(value, row, index, field) { return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; }
searchable	data-searchable	Boolean	true	默认true，表示此列数据可被查询
searchFormatter	data-search-formatter	Boolean	true	默认true，可使用格式化的数据查询
escape	data-escape	Boolean	false	跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，'

---

事件（Events）

定义事件的格式：

$(‘#table’).bootstrapTable({ 
onEventName: function (arg1, arg2, …) { 
// … 
} });

$(‘#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) { 
// … 
});

---

中的内容没显示前触发中的内容被加载完后或者在你所用的DOM中有定义则被触发中的内容被加载完后或者在你所用的DOM中有定义则被触发

事件名	定义在jQuery中的事件名	参数	作用描述
onAll	all.bs.table	name, args	当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括：           - name：事件名           - args：事件的数据
onClickRow	click-row.bs.table	row, $element, field	当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：           - row：哪一行（从0开始）           - $element：该行（tr）           - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名           - 参考：Bootstrap Table 双击或单击行获取该行内容
onDblClickRow	dbl-click-row.bs.table	row, $element, field	和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：           - row：哪一行（从0开始）           - $element：该行（tr）           - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名           - 参考：Bootstrap Table 双击或单击行获取该行内容
onClickCell	click-cell.bs.table	field, value, row, $element	当单击某一格，就会触发该事件，所需参数如下：           - field：此格所在列的字段名           - value：此格的数据           - $element：此行的此列，就是此格（td）
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	当双击某一格，就会触发该事件，所需参数如下：           - field：此格所在列的字段名           - value：此格的数据           - $element：此行的此列，就是此格（td）
onSort	sort.bs.table	name, order	当对某列进行排序时触发该事件，所需参数如下：           - name：所排序的列的字段名           - order：所排的顺序
onCheck	check.bs.table	row, $element	当选择（check）此行时触发，所需的参数如下：           - row：所选择的行的字段名           - $element：此行的DOM元素
onUncheck	uncheck.bs.table	row, $element	当取消选择（uncheck）此行时触发，所需的参数如下：           - row：所取消选择的行的字段名           - $element：此行的DOM元素
onCheckAll	check-all.bs.table	rows	当全选行时触发，所需的参数如下：           - rows：最近（newly）所选择的行的字段名的数组
onUncheckAll	uncheck-all.bs.table	rows	当取消全选行时触发，所需的参数如下：           - rows：之前或上次（previously）所选择的行的字段名的数组
onCheckSome	check-some.bs.table	rows	当选择（check）某些行（多行，rows）时触发，所需的参数如下：           - rows：之前或上次（previously）所选择的行的字段名的数组
onUncheckSome	uncheck-some.bs.table	rows	当取消选择（uncheck）某些行（多行，rows）时触发，所需的参数如下：           - rows：之前或上次（previously）所选择的行的字段名的数组
onLoadSuccess	load-success.bs.table	data	当所有数据被加载时触发
onLoadError	load-error.bs.table	status, res	当加载某些数据出现错误时触发
onColumnSwitch	column-switch.bs.table	field, checked	当某列改变是否可见的状态时触发
onColumnSearch	column-search.bs.table	field, text	当某列被查询时触发
onPageChange	page-change.bs.table	number, size	当改变此页所显示的数据条数或改变页码时触发
onSearch	search.bs.table	text	当查询此表时触发
onToggle	toggle.bs.table	cardView	当改变表的视图时触发
onPreBody	pre-body.bs.table	data	当
onPostBody	post-body.bs.table	data	当
onPostHeader	post-header.bs.table	none	当
onExpandRow	expand-row.bs.table	index, row, $detail	当查看详细视图（点击查看detail的图标）时触发
onCollapseRow	collapse-row.bs.table	index, row	当关闭详细视图（再次点击查看detail的图标）时触发
onRefreshOptions	refresh-options.bs.table	options	当刷新各项后或在初始化表（也包括销毁了再初始化）之前触发
onResetView	reset-view.bs.table		当重置（reset）表的视图时触发
onRefresh	refresh.bs.table	params	当点击刷新按钮（refresh，不是浏览器的，而是表格右上角的刷新按钮）后触发

---

方法（Methods）

定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

方法名	参数	描述	举例
getOptions	none	返回各项的object	$table.bootstrapTable(‘getOptions’);       - 请查看： getOptions
getSelections	none	返回被选择的行，当没有行被选择，则返回空数组（但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行）	$table.bootstrapTable(‘getSelections’);       - 请查看： getSelections
getAllSelections	none	返回所有被选的行（原文中：contain search or filter，其实就是你选择的筛选之后的数据），当没有行被选择，则返回空数组	$table.bootstrapTable(‘getAllSelections’);       - 请查看： getAllSelections
showAllColumns	none	显示所有的列	$table.bootstrapTable(‘showAllColumns’);       - 就是显示所有的列，并没什么可说的
hideAllColumns	none	隐藏所有的列	$table.bootstrapTable(‘hideAllColumns’);       - 就是隐藏所有的列
getData	useCurrentPage	获取被加载的表的数据，如果你设置了使用当前页的数据（useCurrentPage），则返回当前页的数据	$table.bootstrapTable(‘getData’);       - 请查看： getData
getRowByUniqueId	id	获取你想要的某行的数据（设置某行的id）	$table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID       - 请查看： getRowByUniqueId
load	data	向表中加载数据，原来的数据将被移除	$table.bootstrapTable(‘load’, data);       - 请查看： load

新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstraptable API 中文文档 ]

方法名	参数	描述	举例
append	data	将数据追加在最后一行后	$table.bootstrapTable(‘append’, data);data可以是数组       - 请查看： append
prepend	data	也是追加，只是在第一行之前	$table.bootstrapTable(‘prepend’, data);data可以是数组       - 请查看： prepend
remove	params	移除一行或多行你所选的数据	$table.bootstrapTable(‘remove’, {field: ‘id’, values: ids});        - id：所需移除的那一行（rows，一或多行）的字段        - values：被移除的行的数组        - 请查看： remove
removeAll	-	移除表中所有的数据	$table.bootstrapTable(‘removeAll’);        - 请查看： removeAll
removeByUniqueId	-	移除某行数据（设置某行的id）	$table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID        - 请查看： removeByUniqueId
insertRow	params	新增一行，所需的参数如下：        - index：你想插入到哪（只要愿意，想插哪就插哪，想插谁就插谁）        - row：你想插入的数据	$table.bootstrapTable(‘insertRow’, {index: 1, row: row});        - 请查看： insertRow
updateRow	params	更新行数据，所需的参数如下：        - index：所要更新的行的索引（index）        - row：你想换的新的数据	$table.bootstrapTable(‘updateRow’, {index: 1, row: row});        - 请查看： updateRow        - 请查看： Bootstrap Table实现定时刷新数据
updateByUniqueId	params	更新某行数据，所需的参数如下：        - id：你想更新那行的id（唯一），（只要愿意，想换哪个换哪个）        - row：你想换的新的数据	$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row});        - 请查看： updateByUniqueId
showRow	params	显示特定行，所需的参数至少包括下面所列的一个：        - id：所要显示的行的索引（index）        - uniqueId：那一行的id	$table.bootstrapTable(‘showRow’, {index:1});        - 请查看： showRow/hideRow
hideRow	params	隐藏特定行，所需的参数至少包括下面所列的一个：        - id：所要隐藏的行的索引（index）        - uniqueId：那一行的id	$table.bootstrapTable(‘hideRow’, {index:1});        - 请查看： showRow/hideRow
getRowsHidden	boolean	获取隐藏的行（官方原话很多，其实总结起来就前面那一句）	$table.bootstrapTable(‘getRowsHidden’);

新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文文档 ]

方法名	参数	描述	举例
mergeCells	options	融合~（把多格合并为一格），所需的参数如下：        - index：所要合并的格所在行的索引（index）        - field：所在列的字段名        - rowspan：合并的行总数目        - colspan：合并的列总数目	$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3});       - 请查看： mergeCells
updateCell	params	更新某格数据，所需的参数如下：        - index：所要合并的格所在行的索引（index）        - field：所在列的字段名        - value：要换的新的数据  你也可以设置{reinit:false}来禁用表格的再次初始化	$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value});
refresh	params	刷新服务端的数据：        - 可以设置{silent:true}来 偷偷地（<_<） 刷新        - 设置{url:newUrl,pageNumber:pageNumber, pageSize:pageSize}改变请求的地址，页数，每页所显示的条数        - 可以设置{query:{foo:’bar’}}增加特定的参数	$table.bootstrapTable(‘refresh’);       - 请查看： refresh
refreshOptions	options	看例子吧	- 请查看： refreshOptions
resetSearch	text	重置搜索的文本（text）	- 请查看： resetSearch
showLoading	none	显示正在加载……	- 请查看： showLoading/hideLoading
hideLoading	none	隐藏正在加载……	- 请查看： showLoading/hideLoading
checkAll	none	选择当前页的所有行	$table.bootstrapTable(‘checkAll’);       - 请查看： checkAll/uncheckAll
uncheckAll	none	取消选择当前页的所有行	$table.bootstrapTable(‘uncheckAll’);       - 请查看： checkAll/uncheckAll
checkInvert	none	反向选择，不难理解吧	$table.bootstrapTable(‘checkInvert’);
check	index	选择某一行，索引（index）从0开始	$table.bootstrapTable(‘check’, 1);       - 请查看： check/uncheck
uncheck	index	取消选择某一行，索引（index）从0开始	$table.bootstrapTable(‘uncheck’, 1);       - 请查看： check/uncheck
checkBy	params	通过数组选择某一行，所需的参数如下：        - field：所要选的字段名        - values：所要选的那些值（数组）	官方没，啊，有例纸： - $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});       - 请查看： checkBy/uncheckBy
uncheckBy	params	通过数组选择某一行，所需的参数如下：        - field：所要取消选择的字段名        - values：所要取消选择的那些值（数组）	$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});       - 请查看： checkBy/uncheckBy
resetView	params	改变表格的样式，例如改变表格的高度（height）	$table.bootstrapTable(‘resetView’);       - 请查看： resetView
resetWidth	none	自动改变表头和表脚（就译成脚，任性）的宽度来适应每列的宽度	$table.bootstrapTable(‘resetWidth’);
destroy	none	销毁表格 A！T！T！A！C！K！	$table.bootstrapTable(‘destroy’);       - 请查看： destroy
showColumn	field	显示特定的列	$table.bootstrapTable(‘showColumn’, ‘name’);       - 请查看： showColumn/hideCoulumn
hideColumn	field	隐藏特定的列	$table.bootstrapTable(‘hideColumn’, ‘name’);       - 请查看： showColumn/hideCoulumn

新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap table API 中文文档 ]

方法名	参数	描述	举例
getHiddenColumns	-	获取所有隐藏的列	$table.bootstrapTable(‘getHiddenColumns’);
getVisibleColumns	-	获取所有显示的列	$table.bootstrapTable(‘getVisibleColumns’);
scrollTo	value	滚……到哪个位置，单位是’px’，如果设为’bottom’，嗖，恭喜你已到表尾	$table.bootstrapTable(‘scrollTo’, 0);       - 请查看： scrollTo
getScrollPosition	none	获取当前所滚到的位置，单位你懂得，就是’px’	$table.bootstrapTable(‘getScrollPosition’);
filterBy	none	只能在客户端（client-side，相对server-side）这边用，过滤表中的数据  例如：        - 可以设置{age:10}来只显示age为10的数据        - 不仅单的，你还可以双飞，甚至多p，设置{age: 10, hairColor: [“blue”, “red”, “green”]} ，这样你就得到了一群10岁的，头发颜色为蓝，红，绿的……数据	$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] });       - 请查看： filterBy
selectPage	page	跳转到特定的页面	$table.bootstrapTable(‘selectPage’, 1);       - 请查看： selectPage/prevPage/nextPage
prevPage	none	跳转到上一页	$table.bootstrapTable(‘prevPage’);       - 请查看： selectPage/prevPage/nextPage
nextPage	none	跳转到下一页	$table.bootstrapTable(‘nextPage’);       - 请查看： selectPage/prevPage/nextPage
togglePagination	none	词穷，请看例纸	$table.bootstrapTable(‘togglePagination’);       - 请查看： togglePagination
toggleView	none	改变视图	$table.bootstrapTable(‘toggleView’);       - 请查看： toggleView
expandRow	index	可使用条件：detail view设为了true，不然无法使用视图功能，这个也没用        - 通过参数index来展开此列的详细视图	- 请查看： expandRow-collapseRow
collapseRow	index	可使用条件：detail view设为了true        - 通过参数index来关闭此列的详细视图	- 请查看： expandRow-collapseRow
expandAllRow	is subtable	可使用条件：detail view设为了true        - 展开所有列的详细视图	$table.bootstrapTable(‘expandAllRow’);        - 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的
collapseAllRow	is subtable	可使用条件：detail view设为了true        - 关闭所有列的详细视图	$table.bootstrapTable(‘collapseAllRow’);        - 参考上面

---

本地化，切换为另一种语言（Localizations）

默认显示英文，如果想使用中文，首先引入：

然后是三种声明使用的方法（个人只使用第二、三种），如下：

• 第一种：

  $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

• 第二种：

• 第三种：

  $('table').bootstrapTable({locale:'zh-CN'});

---

• 以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了

名称	参数	默认	说明
formatLoadingMessage	-	‘Loading, please wait…’	“加载中，请等待……”
formatRecordsPerPage	pageNumber	‘%s records per page’	“每页显示 15 条记录”
formatShowingRows	pageFrom, pageTo, totalRows	‘Showing %s to %s of %s rows’	“显示第 1 到第 15 条记录”
formatDetailPagination	totalRows	‘Showing %s rows’	“总共 15 条记录”
formatSearch	-	‘Search’	“搜索”（占位符）
formatNoMatches	-	‘No matching records found’	“没有找到匹配的记录”
formatRefresh	-	‘Refresh’	“刷新”（鼠标悬浮显示的文字，下同）
formatToggle	-	‘Toggle’	“切换”
formatColumns	-	‘Columns’	“列”

---

有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢