1. <!-- 引入bootstrap样式 --> 
2. <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"> 
3. <!-- 引入bootstrap-table样式 --> 
4. <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet"> 

1. <!-- jquery --> 
2. <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script> 
3. <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
4.  
5. <!-- bootstrap-table.min.js --> 
6. <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script> 
7. <!-- 引入中文语言包 --> 
8. <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script> 

1. <table id="table"></table> 

1. <table data-toggle="table" data-url="data1.json"> 
2.     <thead> 
3.         <tr> 
4.             <th data-field="id">序号</th> 
5.             <th data-field="name">名称</th> 
6.             <th data-field="price">价格</th> 
7.         </tr> 
8.     </thead> 
9. </table> 

1. $("#table").bootstrapTable({ // 对应table标签的id 
2.       url: "<%=request.getContextPath()%>/api/getDataList.do", // 获取表格数据的url 
3.       cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true 
4.       striped: true,  //表格显示条纹，默认为false 
5.       pagination: true, // 在表格底部显示分页组件，默认false 
6.       pageList: [10, 20], // 设置页面可以显示的数据条数 
7.       pageSize: 10, // 页面数据条数 
8.       pageNumber: 1, // 首页页码 
9.       sidePagination: 'server', // 设置为服务器端分页 
10.       queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求 
11.  
12.           return { 
13.               pageSize: params.limit, // 每页要显示的数据条数 
14.               offset: params.offset, // 每页显示数据的开始行号 
15.               sort: params.sort, // 要排序的字段 
16.               sortOrder: params.order, // 排序规则 
17.               dataId: $("#dataId").val() // 额外添加的参数 
18.           } 
19.       }, 
20.       sortName: 'id', // 要排序的字段 
21.       sortOrder: 'desc', // 排序规则 
22.       columns: [ 
23.           { 
24.               checkbox: true, // 显示一个勾选框 
25.               align: 'center' // 居中显示 
26.           }, { 
27.               field: 'code', // 返回json数据中的name 
28.               title: '编号', // 表格表头显示文字 
29.               align: 'center', // 左右居中 
30.               valign: 'middle' // 上下居中 
31.           }, { 
32.               field: 'name', 
33.               title: '名称', 
34.               align: 'center', 
35.               valign: 'middle' 
36.           }, { 
37.               field: 'calcMode', 
38.               title: '计算方式', 
39.               align: 'center', 
40.               valign: 'middle', 
41.               formatter: function (value, row, index){ // 单元格格式化函数 
42.                   var text = '-'; 
43.                   if (value == 1) { 
44.                       text = "方式一"; 
45.                   } else if (value == 2) { 
46.                       text = "方式二"; 
47.                   } else if (value == 3) { 
48.                       text = "方式三"; 
49.                   } else if (value == 4) { 
50.                       text = "方式四"; 
51.                   } 
52.                   return text; 
53.               } 
54.           }, { 
55.               title: "操作", 
56.               align: 'center', 
57.               valign: 'middle', 
58.               width: 160, // 定义列的宽度，单位为像素px 
59.               formatter: function (value, row, index) { 
60.                   return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>'; 
61.               } 
62.           } 
63.       ], 
64.       onLoadSuccess: function(){  //加载成功时执行 
65.             console.info("加载成功"); 
66.       }, 
67.       onLoadError: function(){  //加载失败时执行 
68.             console.info("加载数据失败"); 
69.       } 
70.  
71. }) 

1. $("#table").bootstrapTable({ 
2.       method: "post", 
3.       url: "获取后台数据的url", 
4.       ... ... 
5.  
6. });  

1. $("#table").bootstrapTable({ 
2.       method: "post", 
3.       url: "获取后台数据的url", 
4.       columns: [ 
5.           { 
6.               checkbox: true 
7.           }, { 
8.               title: '标准编号' 
9.               field: 'stdCode' 
10.           }, 
11.           ... ... 
12.       ] 
13. });      

1. $("#table").bootstrapTable({ 
2.       method: "post", 
3.       url: "获取后台数据的url", 
4.       onLoadSuccess: function(){  //加载成功时执行 
5.             console.info("加载成功"); 
6.       }, 
7.       onLoadError: function(){  //加载失败时执行 
8.             console.info("加载数据失败"); 
9.       } 
10. });     

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