教你如何使用BootStrap table，BootStrap table使用总结（一） （带有详细的案例）

最近在公司实习接触项目的展示页面是使用的BootStrap table这个前端框架，从刚开始不会用，到后来发现这个框架真是太好用了，所以来写这篇博客来分享一下自己的心得，这里主要分几篇博客来介绍。博主本人也是小白，如果发现错误，请留言说明，大家一块进步，一块探讨技术。下面开始正式介绍bootStrap table的用法。
1、bootStrap table的官网

bootStrap table的官网，里面有详细的帮助文档和案例

2、接和下面的案例来理解bootstrap table 的使用

$(function () {
    var option = {
            url: '../mtsObject/selectAllByPage', //请求后台方法的路径
            pagination: true,	//显示分页条
            sidePagination: 'server',//服务器端分页,这个属性一定要有，否则不能显示查询到的结果（这一点坑了博主一下）
             method: 'GET',                      //请求方式（*）
 9                 //toolbar: '#toolbar',              //工具按钮用哪个容器
10                 striped: true,                      //是否显示行间隔色
11                 cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
12                 pagination: true,                   //是否显示分页（*）
13                 sortable: true,                     //是否启用排序
14                 sortOrder: "asc",                   //排序方式
16                 pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
17                 pageSize: rows,                     //每页的记录行数（*）
18                 pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
19                 search: false,                      //是否显示表格搜索
20                 strictSearch: true,
21                 showColumns: true,                  //是否显示所有的列（选择显示的列）
22                 showRefresh: true,                  //是否显示刷新按钮
23                 minimumCountColumns: 2,             //最少允许的列数
24                 clickToSelect: true,                //是否启用点击选中行
25                 //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
26                 uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
27                 showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
28                 cardView: false,                    //是否显示详细视图
29                 detailView: false,                  //是否显示父子表搜索
            clickToSelect: true,   //是否启用点击选中行
             searchOnEnterKey: true,   //在搜索框内输入内容并且按下回车键才开始搜索
            responseHandler: function (res) { //接受后台返回的结果集
                return {
                    rows: res.list,  // list中包含是要展示的对象
                    total: res.total
                }
            },
            queryParams: function (params) { // 前端向后台传的参数，这里也可以自定义参数，具体实现在后面的文章中介绍
                return {
                    offset: params.offset, //页码
                    limit: params.limit, //页面大小，即每一页显示的条数
                    search: params.search //模糊查询的参数
                }
            },
            //表格中要展示的内容
            //field: 'objectId' 中的值一定是你实体的属性名，一定要书写正确，否则不会显示
            columns: [
                {checkbox: true},
                {title: '监控对象ID', field: 'objectId', visible: false},
                {title: '监控对象名称', field: 'objectName'},
                {title: '所属分组', field: 'mtsGroupInfo.groupName'},
                {title: '创建时间', field: 'creatTime'},
                {title: '更新时间', field: 'upTime'},
                {title: '创建人', field: 'sysUser.cnname'},
                {
                    title: '有效标识', field: 'useFlag', formatter:

                        function (value, row, index) {
                            var a = "";
                            if (value === '0')
                                a = '<span >无效</span>';
                            else if (value === '1')
                                a = '<span >有效</span>';
                            return a;
                        }
                },
                {
                    title: '备注', field:
                        'objectNote', cellStyle: formatTableUnit,
                    formatter: paramsMatter
                }
            ]
        }
    ;
    //#table 是你在html页面中定义的table id 名称
    $('#table').bootstrapTable(option);
});

/*修改备注那一列的属性  文本过长隐藏多余的部分，鼠标悬停显示全部的内容*/
function paramsMatter(value, row, index) {
    var span = document.createElement('span');
    span.setAttribute('title', value);
    span.innerHTML = value;
    return span.outerHTML;
}

function formatTableUnit(value, row, index) {
    return {
        css: {
            "white-space": 'nowrap',
            "text-overflow": 'ellipsis',/*当文本溢出时，溢出的部分隐藏，显示省略号*/
            "overflow": 'hidden',
            "max-width": "100px"
        }
    }
}

html页面

直接引入table就可以啦，就是这么简单
 <table id="table"></table>

后端代码（分页使用的pageHepler 分页插件）

//后端接受的参数是从前端传过来的，一定要和前端保持一致，否则展示的页面不是你想要的样子，
//介绍一下参数的含义：
//Integer offset  : 页面的页码数
//Integer limit : 每页的行数
//String search : 模糊查询的信息，（搜索框中输入的内容）

    @GetMapping("/selectAllByPage")
    @ResponseBody
    public PageInfo<MtsObjectectInfo> selectAllByPage(@RequestParam(defaultValue = "1", value = "offset") Integer offset, @RequestParam(defaultValue = "1", value = "limit") Integer limit,String search) {
        PageHelper.offsetPage(offset, limit);
        List<MtsObjectectInfo> lists = mtsObjectectInfoService.listMtsObjectectInfos(search);
        PageInfo<MtsObjectectInfo> pageInfo = new PageInfo<MtsObjectectInfo>(lists);
        return pageInfo;
    }

这里有彩蛋

BootStrap table 使用总结（二）如何自定义参数，传递给后台以及怎么在表格中添加按钮并绑定事件

bootTrap table 使用总结（三） 点击当前行，弹出具体的详细信息(使用detailFormatter属性）

Bootstrap table 中文帮助文档