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

怼烎@ 2024-02-18 19:27 26阅读 0赞

官网：

http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

后端分页问题：后端返回”rows”、“”total，这样才能重新赋值

{
        "total": 35,
        "rows": []
     }

先初始化表格

![复制代码][copycode.gif]

$('#my-table').bootstrapTable({
            method:'POST',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url:url,
            height: $(window).height() - 110,
            width:$(window).width(),
            showColumns:true,
            pagination:true,
            queryParams : queryParams,
            minimumCountColumns:2,
            pageNumber:1,        //初始化加载第一页，默认第一页
            pageSize: 20,            //每页的记录行数（*）
            pageList: [10, 25, 50, 100],       //可供选择的每页的行数（*）
            uniqueId: "id",      //每一行的唯一标识，一般为主键列
            showExport: true,                    
            exportDataType: 'all',
            responseHandler: responseHandler,
            columns: [
            {
                field: '',
                        title: 'Sort No.',
                        formatter: function (value, row, index) {
                        return index+1;
                 }
            },
            {
                field : 'id',
                title : 'User ID',
                align : 'center',
                valign : 'middle',
                sortable : true
            }]
        });
    }

![复制代码][copycode.gif]

//设置查询参数
    function queryParams(params) {
        var param = {
           
            limit : this.limit, // 页面大小
            offset : this.offset, // 页码
            pageindex : this.pageNumber,
            pageSize : this.pageSize
        }
        return param;
    }

做一些操作需要 更新表格数据 用refresh

![复制代码][copycode.gif]

$(‘#my-table’).bootstrapTable(‘refresh’,{
        url:　"demos/list?name="+encodeURIComponent(nameVal),
       silent: true,
       query：{
           status : XXX
    
        }
    });

![复制代码][copycode.gif]

url:请求的服务端接口
    silent: "静悄悄的刷新"
    query：查询参数

如果不止更新数据还需要更新些配置时用refreshOptions--不要用destroy()

$(‘\#my-table’).bootstrapTable(‘refreshOptions’, \{\*\*\}); //第二个参数是一些options设置，参照表格初始化的设置

\-------------------API------------------------------------------

##  ##

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

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

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

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

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

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

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

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

### 事件（Events） ###

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

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

### 方法（Methods） ###

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

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

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

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

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

### 本地化，切换为另一种语言（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'});`

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

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

[copycode.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/075b360d060c4afe8144961923470e01.png