官方文档地址：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

表格参数

表格的参数定义在 jQuery.fn.bootstrapTable.defaults 。 

应用示例

无需编写 JavaScript 启用 bootstrap table，仅需对普通的 table 设置 data-toggle="table" 即可。 

1.  
   <table data-toggle="table" data-classes="table table-bordered table-hover" data-striped="true">
2.  
   <thead>
3.  
   <tr>
4.  
   <th>员工编号</th>
5.  
   <th>员工姓名</th>
6.  
   <th>所在部门</th>
7.  
   <th>武功等级</th>
8.  
   </tr>
9.  
   </thead>
10.  
    <tbody>
11.  
    <tr>
12.  
    <td>89757</td>
13.  
    <td>姬如雪</td>
14.  
    <td>幻音坊</td>
15.  
    <td>24</td>
16.  
    </tr>
17.  
    <tr>
18.  
    <td>89756</td>
19.  
    <td>叶星云</td>
20.  
    <td>天元神宗</td>
21.  
    <td>31</td>
22.  
    </tr>
23.  
    <tr>
24.  
    <td>89755</td>
25.  
    <td>唐三</td>
26.  
    <td>史莱克学院</td>
27.  
    <td>33</td>
28.  
    </tr>
29.  
    </tbody>
30.  
    </table>

此外也可以通过设置远程的 url 如 data-url='返回json格式内容的url' 来加载数据。 

1.  
   <table data-toggle="table" data-classes="table table-bordered table-hover" data-url="http://localhost:8080/employee/list" data-striped="true" data-sort-name="id" data-sort-order="desc">
2.  
   <thead>
3.  
   <tr>
4.  
   <th data-field="id">员工编号</th>
5.  
   <th data-field="name">员工姓名</th>
6.  
   <th data-field="deptName">所在部门</th>
7.  
   <th data-field="level">武功等级</th>
8.  
   </tr>
9.  
   </thead>
10.  
    </table>

在 JavaScript 中通过 <table> 的 id 属性来启用 bootstrap table 。 

<table id="example_table"/>

1.  
   $('#example_table').bootstrapTable({
2.  
   data: [{
3.  
   "id": 89757,
4.  
   "name": "姬如雪",
5.  
   "deptName": "幻音坊",
6.  
   "level": 24
7.  
   },
8.  
   {
9.  
   "id": 89756,
10.  
    "name": "叶星云",
11.  
    "deptName": "天元神宗",
12.  
    "level": 31
13.  
    },
14.  
    {
15.  
    "id": 89755,
16.  
    "name": "唐三",
17.  
    "deptName": "史莱克学院",
18.  
    "level": 33
19.  
    }],
20.  
    columns: [{
21.  
    field: 'id',
22.  
    title: '员工编号'
23.  
    },
24.  
    {
25.  
    field: 'name',
26.  
    title: '员工姓名'
27.  
    },
28.  
    {
29.  
    field: 'deptName',
30.  
    title: '所属部门'
31.  
    },
32.  
    {
33.  
    field: 'level',
34.  
    title: '武功等级'
35.  
    }]
36.  
     
37.  
    });

同样地，在JavaScript中也可以通过设置远程的url如url: '返回json格式内容的url'来加载数据。  

1.  
   $('#example_table').bootstrapTable({
2.  
   url: 'http://localhost:8080/employee/list',
3.  
   method: 'get',
4.  
   contentType: 'application/json',
5.  
   dataType: 'json',
6.  
   columns: [{
7.  
   field: 'id',
8.  
   title: '员工编号'
9.  
   },
10.  
    {
11.  
    field: 'name',
12.  
    title: '员工姓名'
13.  
    },
14.  
    {
15.  
    field: 'deptName',
16.  
    title: '所属部门'
17.  
    },
18.  
    {
19.  
    field: 'level',
20.  
    title: '武功等级'
21.  
    }]
22.  
    });

各项参数示例：  

1.  
   $(function() {
2.  
   $('#example_table').bootstrapTable({
3.  
   //设置表格的 class 属性
4.  
   classes: 'table table-bordered table-hover',
5.  
   //设置表格的高度
6.  
   height: 500,
7.  
   //设置当数据为 undefined 时显示的字符
8.  
   undefinedText: '空',
9.  
   //设置表格隔行变色效果
10.  
    striped: true,
11.  
    //设置表格使用的字体库
12.  
    iconsPrefix: 'glyphicon',
13.  
    //自定义表格中的图标
14.  
    icons: {
15.  
    paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
16.  
    paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
17.  
    refresh: 'glyphicon-refresh icon-refresh',
18.  
    toggle: 'glyphicon-list-alt icon-list-alt',
19.  
    columns: 'glyphicon-th icon-th',
20.  
    detailOpen: 'glyphicon-plus icon-plus',
21.  
    detailClose: 'glyphicon-minus icon-minus'
22.  
    },
23.  
    //设置数据的加载地址
24.  
    url: 'http://localhost:8080/employee/list',
25.  
    //设置数据的请求方式
26.  
    method: 'get',
27.  
    //设置发送到服务器的数据编码类型
28.  
    contentType: 'application/json',
29.  
    //设置服务器返回的数据类型
30.  
    dataType: 'json',
31.  
    //发送符合 RESTFul 格式的参数
32.  
    queryParamsType: 'limit',
33.  
    //设置数据请求的额外参数
34.  
    queryParams: function(params) {
35.  
    var param = {};
36.  
    param['offset'] = params.offset; // 页码
37.  
    param['limit'] = params.limit; // 条数
38.  
    param['search'] = '搜索内容'; // 搜索内容
39.  
    param['sort'] = '排序字段'; // 排序字段
40.  
    param['order'] = '排序方式'; // 排序方式
41.  
    return param;
42.  
    },
43.  
    //对请求到的数据进行处理
44.  
    responseHandler: function(res) {
45.  
    for (var index in res) {
46.  
    var id = res[index]['id'];
47.  
    res[index]['id'] = 'No.' + id;
48.  
    };
49.  
    res[0]['deptName'] = undefined;
50.  
    return res;
51.  
    },
52.  
    //对返回数据中的特殊字符进行转义
53.  
    escape: true,
54.  
    //自定义Ajax请求
55.  
    //ajax : ajaxReqData(),
56.  
    //禁用Ajax数据缓存
57.  
    //cache : false,
58.  
    //Ajax请求时的附加参数
59.  
    //ajaxOptions : {},
60.  
    //设置排序列
61.  
    sortName: 'level',
62.  
    //设置排序方式
63.  
    sortOrder: 'desc',
64.  
    //自定义Ajax请求
65.  
    sortClass: 'sort_class',
66.  
    //获得稳定的排序
67.  
    sortStable: true,
68.  
    //表格底部显示分页条
69.  
    pagination: true,
70.  
    //启用分页条无限循环的功能
71.  
    paginationLoop: true,
72.  
    //只显示总数据数
73.  
    onlyInfoPagination: true,
74.  
    //采用 client 分页模式
75.  
    sidePagination: 'client',
76.  
    //首页页码
77.  
    pageNumber: 1,
78.  
    //每页数据条数
79.  
    pageSize: 2,
80.  
    //设置可供选择的页面数据条数
81.  
    pageList: [2, 5, 10],
82.  
    //radio 或者 checkbox 的字段 name 名
83.  
    selectItemName: 'btSelectItem',
84.  
    //自动判断显示分页信息和 card 视图
85.  
    smartDisplay: true,
86.  
    //启用搜索框
87.  
    search: true,
88.  
    //按回车触发搜索方法
89.  
    searchOnEnterKey: true,
90.  
    //e启用全匹配搜索
91.  
    strictSearch: true,
92.  
    //初始化搜索文字
93.  
    searchText: '',
94.  
    //设置搜索超时时间
95.  
    searchTimeOut: 500,
96.  
    //自动去掉搜索字符的前后空格
97.  
    trimOnSearch: true,
98.  
    //显示列头
99.  
    showHeader: true,
100.  
     //显示列脚
101.  
     showFooter: true,
102.  
     //显示内容列下拉框
103.  
     showColumns: true,
104.  
     //显示刷新按钮
105.  
     showRefresh: true,
106.  
     //显示切换视图（table/card）按钮
107.  
     showToggle: true,
108.  
     //显示切换分页按钮
109.  
     showPaginationSwitch: true,
110.  
     //显示全屏按钮
111.  
     showFullscreen: true,
112.  
     //最小隐藏列的数量
113.  
     minimumCountColumns: 1,
114.  
     //指定主键列
115.  
     idField: 'id',
116.  
     //对每一行指定唯一标识符
117.  
     uniqueId: 'id',
118.  
     //使用table试图，适用于pc端
119.  
     cardView: false,
120.  
     //显示详细页面模式
121.  
     detailView: true,
122.  
     //格式化详细页面模式的视图
123.  
     detailFormatter: function(index, row) {
124.  
     return '<span style="color:blue;font-weight:bold">员工编号</span>:' + row.id + '，<span style="color:red;font-weight:bold">员工姓名：</span>' + row.name
125.  
     },
126.  
     //指定 搜索框 水平方向的位置
127.  
     searchAlign: 'right',
128.  
     //指定 按钮栏 水平方向的位置
129.  
     buttonsAlign: 'right',
130.  
     //指定 toolbar 水平方向的位置
131.  
     toolbarAlign: 'right',
132.  
     //指定 分页条 在垂直方向的位置
133.  
     paginationVAlign: 'bottom',
134.  
     //指定 分页条 在水平方向的位置
135.  
     paginationHAlign: 'right',
136.  
     //指定 分页详细信息 在水平方向的位置
137.  
     paginationDetailHAlign: 'right',
138.  
     //指定分页条中上一页按钮的图标或文字
139.  
     paginationPreText: '<',
140.  
     //指定分页条中下一页按钮的图标或文字
141.  
     paginationNextText: '>',
142.  
     //点击行时自动选择 rediobox 和 checkbox
143.  
     clickToSelect: true,
144.  
     //返回 true 时点击事件会被忽略
145.  
     ignoreClickToSelectOn: function(ele) {
146.  
     return $.inArray(ele.tagName, ['A', 'BUTTON']);
147.  
     },
148.  
     //禁止多选
149.  
     singleSelect: true,
150.  
     //自定义 toolbar
151.  
     toolbar: '#my_toolbar',
152.  
     //自定义 buttons toolbar
153.  
     buttonsToolbar: '#my_buttonsToolbar',
154.  
     //列头隐藏全选复选框
155.  
     checkboxHeader: false,
156.  
     //点击分页按钮或搜索按钮时，记住checkbox的选择项
157.  
     maintainSelected: true,
158.  
     //启用排序
159.  
     sortable: true,
160.  
     //静默排序
161.  
     //silentSort : true,
162.  
     //自定义行样式
163.  
     rowStyle: function(row, index) {
164.  
     return {
165.  
     css: {
166.  
     "color": "gray"
167.  
     }
168.  
     }
169.  
     },
170.  
     //自定义行属性
171.  
     rowAttributes: function(row, index) {
172.  
     return {
173.  
     css: {
174.  
     "row_index": index
175.  
     }
176.  
     }
177.  
     },
178.  
     //自定义搜索方法
179.  
     customSearch: function(text) {
180.  
     console.log(text);
181.  
     },
182.  
     //自定义排序方法
183.  
     customSort: function customSort(sortName, sortOrder) {
184.  
     console.log(sortName);
185.  
     console.log(sortOrder);
186.  
     },
187.  
     //设置显示字段内容
188.  
     columns: [{
189.  
     field: 'id',
190.  
     title: '员工编号'
191.  
     },
192.  
     {
193.  
     field: 'name',
194.  
     title: '员工姓名'
195.  
     },
196.  
     {
197.  
     field: 'deptName',
198.  
     title: '所属部门'
199.  
     },
200.  
     {
201.  
     field: 'level',
202.  
     title: '武功等级'
203.  
     }]
204.  
      
205.  
     });
206.  
     });
207.  
     function ajaxReqData() {
208.  
     $.ajax({
209.  
     type: "GET",
210.  
     url: "http://localhost:8080/employee/list",
211.  
     contentType: "application/json;charset=utf-8",
212.  
     dataType: "json",
213.  
     data: "",
214.  
     success: function(data) {
215.  
     $('#example_table').bootstrapTable('load', data);
216.  
     },
217.  
     error: function(data) {
218.  
     console.log("数据加载错误");
219.  
     }
220.  
     })
221.  
     }

  原文链接：https://blog.csdn.net/pengjunlee/java/article/details/80630172

注意：本文归作者所有，未经作者允许，不得转载