本文转载@Sclifftop Bootstrap Table API 中文版（完整翻译文档）

ゞ浴缸里的玫瑰 2022-05-16 03:42 201阅读 0赞

/*
    *
    *$('#table').bootstrapTable({});
    *看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽
    *最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型，
    *默认值不翻译，例如："class"、"id"等不翻译。
    *有错请提出，会及时改正，谢谢。
    *Bootstrap table 中文文档（完整翻译文档）如果想转请注明@Sclifftop
    *
    */
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10

--------------------

*  “名称”可以写在`$('#table').bootstrapTable({});`的大括号中，可以定义一些想要的值，如：

$("#realTime_Table").bootstrapTable({
                   search: true,
                    pagination: false,
                    pageSize: 15,
                    pageList: [5, 10, 15, 20],
                    showColumns: true,
                    showRefresh: false,
                    showToggle: true,
                    locale: "zh-CN",
                    striped: true
            });  
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11

*  “属性”放在声明表内，如：

<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>
    
     <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
          <thead>
              <tr >
                  <th data-sortable="true" data-field="realTimeDate">日期</th>
                  <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
                  <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
              </tr>
          </thead>
          <tbody>
          </tbody>
    </table>
       
        
         1
         2
         3
         4
         5
         6
         7
         8
         9
         10
         11
         12
         13

*  如果名称和属性功能类似，则任意一个地方就够了，不用重复定义，有的属性写在js里比名称写在声明表中更为简单，or vice verse（有的属性必须要写，对应的名称只是表示是否启用那个属性）

--------------------

## 表的各项(Table options ) ##

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

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

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

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

--------------------

## 列的各项（Column options ） ##

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

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

--------------------

## 事件（Events） ##

> 定义事件的格式：
> 
> $(‘\#table’).bootstrapTable(\{  
> onEventName: function (arg1, arg2, …) \{  
> // …  
> \} \});
> 
> $(‘\#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) \{  
> // …  
> \});

--------------------

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

--------------------

## 方法（Methods） ##

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

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

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

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

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

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

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

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

--------------------

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

> 默认显示英文，如果想使用中文，首先引入：
> 
> `<script src="bootstrap-table-zh-CN.js"></script>`
> 
> 然后是三种声明使用的方法（个人只使用第二、三种），如下：

*  第一种：
    
    > `$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);`
 *  第二种：
    
    > `<table data-toggle="table" data-locale="zh-CN"></table>`
 *  第三种：
    
    > `$('table').bootstrapTable({locale:'zh-CN'});`

--------------------

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

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

--------------------

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

--------------------

其他相关：

*  Bootstrap Table实现定时刷新数据 [http://blog.csdn.net/s\_clifftop/article/details/77744791][http_blog.csdn.net_s_clifftop_article_details_77744791]
 *  Bootstrap Table 双击或单击行获取该行内容 [http://blog.csdn.net/s\_clifftop/article/details/77915934][http_blog.csdn.net_s_clifftop_article_details_77915934]

[http_blog.csdn.net_s_clifftop_article_details_77744791]: http://blog.csdn.net/s_clifftop/article/details/77744791
[http_blog.csdn.net_s_clifftop_article_details_77915934]: http://blog.csdn.net/s_clifftop/article/details/77915934