新手浅谈，多多包涵。最近使用boostrap-table的次数较频繁，在这里总结总结。

• 一般常用的情况和功能（在html中定义表头）

<div>
<table id="tablerow"><thead class="tablehead">
<tr><th class="border-top-0 info1" data-field="***ID">列标题</th><th class="border-top-0 info1" data-field="ClientName">列标题</th><th class="border-top-0 info1" data-field="************">列标题</th>:::</tr>
</thead></table>
</div>

<script>
$(document).ready(function(){
$('#tablerow').bootstrapTable(bootstrapTableOption());//调用bootstrap-table的方法//定义bootstrap-table的方法
var bootstrapTableOption = function () {var option = {url: '/***/****',   //Controller中方法的路径method: 'Get',      //传参的方法striped: true,      //设置每行表格的背景是否会显示灰白相间cache: false,       //默认缓存ajax请求，设为false则禁用缓存（就是每次请求时是否刷新整个页面）queryParams: queryParams, //定义需要传的一些参数（queryParams这个方法在下面定义）sidePagination: "server", //选择分页的方式（server则是向后台传参数自己在数据库中写分页的方法，client则为假分页，不需要传分页的参数，只需要获取到所有的数据，它会自动给你分页）minimumCountColumns: 2,   //每列的下拉菜单最少多少条uniqueId: "*****ID",      //表明每行唯一的标识符idField: "******ID",      //表明标识字段pagination: true,         //默认为false，设置表格的底部工具栏是否显示分页条paginationPreText: "«",   //设置分页条上一页的样式paginationNextText: "»",  //设置分页条下一页的样式pageList: [20, 50, 100],  //设置可选每页可显示条数smartDisplay: true,       //设置当table的内容为空的时候，table底部的分页条和可选数据条数是否显示。true则帮你处理好，没有数据就不会显示分页pageSize: 20,             //设置默认的每页显示几条数据onPageChange: function () {  //在这个function中可以设置 当table刷新数据时要做的其他操作。$('#btnCont').attr("disabled", true);},onLoadSuccess: function (data) { //设置每次刷新数据成功之后你所想要做的操作//这里的data就是从后台获取到的数据，例如：可以通过判定是否有数据，然后进行一些操作。var count = data.rows.length;if (count == 0) {} else {}}};return option;};//设置想要传给后台的参数
var queryParams = function (params) {var temp = {limit: params.limit,     //每页的条数offset: params.offset,   //第几页sortOrder: params.order, //排序方式//sortName: params.sort,sortField: params.sort,  //那个字段需要排序//上面那些字段都是bootstrap-table 分页排序需要的，下面举个设置自己想要传的参数的写法ClientName: $('#txtsepid').val(),  };return temp;}})
</script>

• 另一种情况（在bootstrap-table的设置中来设置表头的内容）

<div class="row"><table id="InformTable"></table>
</div>

<script>
$(document).ready(function () {var queryParams = function (params) {var temp = {//params：limit: params.limit,offset: params.offset,//pageNum*limitsortOrder: params.order,//sortName: params.sort,sortField: params.sort,CompetitorName: $("#Name").val(),DanceId: parseInt($("#kindslist").val() == "" ? 0 : $("#kindslist").val()) //做判断，当数据为空时转换成0；};return temp;}//bootstrap table：var bootstrapTableOption = function () {var option = {url: '/***/******',method: 'Get',//request Method URL（*）columns: [{title: 'Participant Id',field: 'CompetitorId',align: 'left',valign: 'middle',sortable: 'true'},{title: 'Participant Name',field: 'CompetitorName',align: 'left',valign: 'middle',sortable: 'true'},{title: 'Participant Kinds',field: 'DanceKinds',align: 'left',valign: 'middle'},{title: 'Modify',field: 'CompetitorId',align: 'center',valign: 'middle',formatter: formattertempLink},],//],striped: true,  //是否显示行间隔色cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）pagination: true,                   //是否显示分页（*）queryParams: queryParams,//传递参数（*）sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）pageSize: 3,                       //每页的记录行数（*）pageList: [3, 5, 10, 20],        //可供选择的每页的行数（*）showRefresh: true,                  //是否显示刷新按钮minimumCountColumns: 2,             //最少允许的列数clickToSelect: true,                //是否启用点击选中行uniqueId: "CompetitorId",                     //每一行的唯一标识，一般为主键列//onLoadSuccess: function (res) { console.log('asd') }};return option;};//formattertempLink
//需要此列的对象。
//某格的数据转换函数，需要三个参数：
//-value： field（字段名）
//-row：行的数据
//-index：行的（索引）indexvar formattertempLink = function (value) {var temp = "<a href='#' onclick='GoToController(\"" + value + "\")'>Modify</a>";return temp;}$('#InformTable').bootstrapTable(bootstrapTableOption());});</script>

• bootstrap-table 还有很多属性，如果有需求都可以用上

• 表的各项(Table options )

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

  名称	属性	类型	默认值	作用描述
  -	data-toggle	String	table	只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用
  classes	data-classes	String	table table-hover	表的class属性，如果没有自己定义，则默认有边框，并且当鼠标悬浮在那一行，背景会变为浅灰色.
  sortClass	data-sort-class	String	undefined	声明表格td的class名，代表此列元素的class名将被排序
  height	data-height	Number	undefined	表格的高度
  undefinedText	data-undefined-text	String	-	当不写任何内容默认显示’-‘
  striped	data-striped	Boolean	false	默认false，当设为true，则每行表格的背景会显示灰白相间
  sortName	data-sort-name	String	undefined	定义哪一列的值会被排序，写data-field的自定义名，默认递增（asc）
  sortOrder	data-sort-order	String	asc	同上面的结合使用，默认递增（asc），也可设为递减（desc）
  sortStable	data-sort-stable	Boolean	false	（别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加’_position’属性
  iconsPrefix	data-icons-prefix	String	glyphicon	定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
  iconSize	data-icon-size	String	undefined	定义的图标大小：       - undefined =>默认表示默认的按钮尺寸（btn）       - xs   =>超小按钮的尺寸（btn-xs）       - sm  =>小按钮的尺寸（btn-sm）       - lg    =>大按钮的尺寸（btn-lg）
  buttonsClass	data-buttons-class	String	default	按钮的类，默认为default。       - 可选的有：primary、danger、warning等等       - 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加”btn-“，默认为btn-default（白色）       - 参考菜鸟教程：Bootstrap 按钮
  icons	data-icons	Object	{ paginationSwitchDown: ‘glyphicon-collapse-down icon-chevron-down’, paginationSwitchUp: ‘glyphicon-collapse-up icon-chevron-up’, refresh: ‘glyphicon-refresh icon-refresh’, toggle: ‘glyphicon-list-alt icon-list-alt’, columns: ‘glyphicon-th icon-th’, detailOpen: ‘glyphicon-plus icon-plus’, detailClose: ‘glyphicon-minus icon-minus’ }	定义在工具栏、分页、详细视图中使用的图标       - 没办法解释，请参考菜鸟教程的图标：Bootstrap 字体图标
  columns	-	Array	[]	默认空数组，在JS里面定义，field即data-field，title就是每列表头名等等。       - 请参考：点击Bootstrap-table的右侧边栏Usage
  data	-	Array	[]	被加载的数据。       - 也就是从服务器获取的数据，通过”.”运算符获取，例如”data.date/data.anything”，后面是服务器发来的字段名
  dataField	data-data-field	String	rows	- 名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value。       - 原文：获取每行数据json内的key       - 例如：{“name”:”zz”,”age”:20}，name和age就是key，如果这是从服务端请求的json，那可能和每列定义的字段不同，但都是唯一的
  ajax	data-ajax	Function	undefined	- ajax方法，和jQuery的ajax方法类似       - 参考 BootstrapTable实现定时刷新数据，只是参考，因为那是jQuery的ajax方法
  method	data-method	String	get	向服务器请求远程数据的方式，默认为’get’，可选’post’
  url	data-url	String	undefined	向服务器请求的url。       - 例如：server + “get_app_player”和server + ‘get_channel_list’，两者都是向server（server是自己定义的，例如”http://kanshakan.nichousha.com/”）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息 下面看看原文：       - 向远程站点请求数据的URL       - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：       Without server-side pagination（没有启用服务端分页 - data1.json）       With server-side pagination（启用服务端分页 - data2.json）
  cache	data-cache	Boolean	true	默认缓存ajax请求，设为false则禁用缓存
  contentType	data-content-type	String	application/json	请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。       - 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串
  dataType	data-data-type	String	json	期望从服务器获取的数据的类型，默认为json格式字符串
  ajaxOptions	data-ajax-options	Object	{}	向服务器请求ajax时的附加项，默认无附加       - 参考 jQuery.ajax()
  queryParams	data-query-params	Function	function(params){ return params;}	当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。        - queryParamsType=”limit”，它的参数包括：limit，offset，search，sort，order Else        - params包括：pageSize，pageNumber，searchText，sortName，sortOrder       - 当return false，请求则终止
  queryParamsType	data-query-params-type	String	limit	默认”limit”，设置该属性用来发送符合RESTful格式的参数
  responseHandler	data-response-handler	Function	function(res){ return res;}	在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
  pagination	data-pagination	Boolean	false	默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示
  paginationLoop	data-pagination-loop	Boolean	true	默认true，分页条无限循环
  onlyInfoPagination	data-only-info-pagination	Boolean	false	前提：pagination设为true，启用了分页功能。       - 默认false，设为true显示总记录数
  sidePagination	data-side-pagination	String	client	设置在哪进行分页，默认”client”，可选”server”，如果设置 “server”，则必须设置url或者重写ajax方法       - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：       Without server-side pagination（没有启用服务端分页）       With server-side pagination（启用服务端分页）
  pageNumber	data-page-number	Number	1	前提：pagination设为true，启用了分页功能。       - 默认第1页，用于设置初始的页数
  pageSize	data-page-size	Number	10	前提：pagination设为true，启用了分页功能。       - 默认每页显示10条记录，用于设置每页初始显示的条数
  pageList	data-page-list	Array	[10, 25, 50, 100]	前提：pagination设为true，启用了分页功能。       - 默认为[10, 25, 50, 100]，即可以选择”每页显示10/25/50/100条记录”，用于设置选择每页显示的条数
  selectItemName	data-select-item-name	String	btSelectItem	radio（单选按钮）或checkbox（复选框）的字段名
  smartDisplay	data-smart-display	Boolean	true	默认为true，会 机智地（<_<） 根据情况显示分页（pagination）或卡片视图（card view）
  escape	data-escape	Boolean	false	跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，'
  search	data-search	Boolean	false	默认false不显示表格右上方搜索框 ，可设为true，在搜索框内只要输入内容即开始搜索
  searchOnEnterKey	data-search-on-enter-key	Boolean	false	默认false不启用，设为true启用，比功能是与上面相比，在搜索框内输入内容并且按下回车键才开始搜索
  strictSearch	data-strict-search	Boolean	false	设为true，开启精确搜索
  searchText	data-search-text	String	“”	前提：search设为true，启用了搜索功能。       - 搜索框初始显示的内容，默认空字符串
  searchTimeOut	data-search-time-out	Number	500	前提：search设为true，启用了搜索功能。       - 设置搜索文件的超时时间（原文：Set timeout for search fire，不知道是写错了还是我知识面太窄，”search fire”是什么意思，官方API错了？给我整蒙逼了）
  trimOnSearch	data-trim-on-search	Boolean	true	默认true，自动忽略空格
  showHeader	data-show-header	Boolean	true	默认为true显示表头，设为false隐藏
  showFooter	data-show-footer	Boolean	false	默认为false隐藏表尾，设为true显示
  showColumns	data-show-columns	Boolean	false	默认为false隐藏某列下拉菜单，设为true显示
  showRefresh	data-show-refresh	Boolean	false	默认为false隐藏刷新按钮，设为true显示
  showToggle	data-show-toggle	Boolean	false	默认为false隐藏视图切换按钮，设为true显示

  新版的CSDN有bug，所以其余的Table options另写一个表格 [ BootstrapTable 文档 ]

  名称	属性	类型	默认值	作用描述
  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  举个例子：       <th .. data-events=”operateEvent”> 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”代码，如：<b><span style=”color:red”>abc</span></b>，但是被排列的是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, …) { 
  // … 
  });

  ---

  事件名	定义在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	当<tbody></tbody>中的内容没显示前触发
  onPostBody	post-body.bs.table	data	当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发
  onPostHeader	post-header.bs.table	none	当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发
  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	返回被选择的行，当没有行被选择，则返回空数组	$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’);
  destory	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’);        - 参考上面

后面的一些关于bootsrap-table的一些知识借鉴于别人的整理。

Bootstrap-table 的使用相关推荐

1. bootstraptable 汇总_JS组件系列——表格组件神器：bootstrap table

   前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

2. Bootstrap table表格

   Bootstrap table 使用类 Class="table" 既可让table美化样式 table 相关的Class 隔行换色      :   table-striped ...

3. vue下的bootstrap table + jquery treegrid, treegrid无法渲染的问题

   在mian.js导入的包如下:该bootstrap-table-treegrid.js需要去下载,在复制到jquery-treegrid/js/ 1 import $ from 'jquery' 2 ...

4. bootstrap Table API和一些简单使用方法

   官网: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/ 后端分页问题:后端返回"rows"."& ...

5. php bootstraptable分页,Bootstrap table分页问题汇总【附答案代码】

   本篇文章为大家总结了几个使用bootstrap table实现分页时可能会遇到的问题,希望能够对大家有所帮助. 问题1 :服务器端取不到form值,querystring没有问题,但是request. ...

6. bootstrap table 表头与内容不对齐问题解决

   bootstrap table 表头与内容不对齐问题解决 参考文章: (1)bootstrap table 表头与内容不对齐问题解决 (2)https://www.cnblogs.com/sky-zk ...

7. JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案

   JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 参考文章: (1)JS组件系列--Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 (2) ...

8. bootstrap table php,bootstrap table Tooltip

   bootstrap table Tooltip怎么用?直接上代码$("#tables").bootstrapTable({ search: true, pagination: tr ...

9. Bootstrap table方法，Bootstrap table事件，配置

   调用 BootStrap Table 方法的语法: $('#table').bootstrapTable('method', parameter); 例如: $('#my_table').bootst ...

10. [转]bootstrap table 动态列数

    原文地址:https://my.oschina.net/u/2356355/blog/1595563 据说bootstrap table非常好用,从入门教程中了解到它的以下主要功能: 由于固定表头意味 ...

最新文章

1. 使用Edge.js，在JavaScript中调用C# .Net
2. 创建vue项目+总结使用(跨域问题+vue 创建)
3. Robotaxi有进账了！中国自动驾驶商业化迈出一大步
4. duilib 修复Text控件无法设置宽度的bug，增加自动加算宽度的属性
5. js中(function(){}()),(function(){})(),$(function(){});之间的区别
6. Linux中shell模块的考试,linux下的shell编程要考试了题目这里有可是表示不会 求帮忙...
7. 企业网站之html，httpd概述
8. 【转】先说IEnumerable，我们每天用的foreach你真的懂它吗？
9. mysql常用命令英文词汇_MySQL中文全文索引插件 mysqlcft 1.0.0 安装使用文档
10. vs 2017 无法安装任何 nuget package，提示“库没有注册。。。”
11. 电子商务ICP经营许可证申请条件
12. VS程序发布之NetFramework版本选择
13. exe 反编译 java_.exe文件怎么反编译为java代码（有木有造的）
14. sublime快捷键(mac版)一览
15. maven install 报错 error:java找不到符号
16. 读懂西瓜书 14 : 概率图模型
17. UCI行为识别——Activity recognition with healthy older people using a batteryless wearable sensor Data Set
18. 如何用chrome浏览器 开发插件 自动答题 自动抢票 自动选课
19. 分析网站如何检测已经登录的QQ帐号
20. 如何让代码在word中显示行号？

热门文章

1. web网页设计期末课程大作业：旅游网页主题网站设计——中国风的温泉酒店预订网(13页)HTML+CSS+JavaScript
2. Win10系列，大型打印机扫描文件无法收到的解决方案
3. jQuery源码解析之replaceWith()/unwrap()
4. Border of CSS3
5. 兰彻斯特方程用计算机实现,兰彻斯特方程在现代战争中的应用
6. 浏览器兼容问题汇总-蒙多_李
7. 卷积神经网络概述以及简单案列
8. 一个月写完vue音乐播放器
9. SQLSERVER基础--视图
10. 博图Professional创建文件，用Scripting.FileSystemObject类