Bootstrap table 使用总结

本文主要介绍了：Bootstrap table列参数、格式优化、服务端请求、居中等内容。了解更多，请前往个人博客：风尘博客  http://www.dustyblog.cn/222.html

1. table中的列参数：

• data-field：理解成id，因为后台传送过来的数据就是根据data-field的来区分，那个数据发送给谁的。
• data-formatter：它是一个函数，有三个参数，value，row，index（定义格式）
• data-events：配合上一个属性使用（定义点击操作）

2. table样式优化：

• table-bordered:带边框的表格;
• table-striped:条纹状表格;
• table-hover:悬停变色;
• table-condensed:紧凑风格

3. 服务端请求格式：（注意：在controller处理返回时一定要加上@ResponseBody注解，因为该请

求是封装的ajax请求！！！）

 

1. //加载同时发送的表格数据请求
2. function initTable() {
3.     $("#table").bootstrapTable('destroy');//将table摧毁，否则会保留上次加载缓存
4.     $("#table").bootstrapTable({
5.         url: "../link/searchData",//请求地址
6.         dataType: "json",//数据类型
7.         method: "post",//请求方式
8.         contentType: "application/x-www-form-urlencoded",//表单请求信息格式（默认）
9.         cache: false,//是否使用缓存（默认为true）
10.         showColumns: true,  //是否显示所有的列
11.         showRefresh: true,  //是否显示刷新按钮
12.         pagination:true,//分页
13.         pageSize:50,//每页记录的行数
14.         pageList:[50,100,200],//可供选择的每页行数
15.         sidePagination:'server',//服务端处理页数
16.         queryParams: function queryParams(params) {
17.             return "pager.pageSize=" + params.limit + "&pager.pageNum=" + (params.offset/params.limit + 1);//发送的参数
18.         }
19.     });
20. }

4. BootStrap table 常用操作：

1. // 某列的显示/隐藏
2. $('#table').bootstrapTable('hideColumn', data-field);
3. $('#table').bootstrapTable('hideColumn', data-field);

使表格标题和内容都居中显示，使用到了强大的表格插件datatables：

 

1. /* dataTables表头居中 */
2. .table>thead:first-child>tr:first-child>th{
3.     text-align:center;
4. }
5. /* dataTables列内容居中 */
6. .table>tbody>tr>td{
7.     text-align:center;
8. }