BootStrap table使用1

官网：https://bootstrap-table.com/

有两个翻译API的网址：

https://blog.csdn.net/S_clifftop/article/details/77937356?locationNum=3&fps=1

https://blog.csdn.net/mrczr/article/details/64441265

 

 

https://www.cnblogs.com/zhangdongya/p/11242732.html

https://blog.csdn.net/weixin_43610698/article/details/103832376

HTML页面

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

bs-table 初始化

$(function () {
　　　　
    var option = {
            url: '../mtsObject/selectAllByPage', //请求后台方法的路径
            pagination: true,    //显示分页条
            sidePagination: 'server',//服务器端分页,这个属性一定要有，否则不能显示查询到的结果（这一点坑了博主一下）
            method: 'GET',                      //请求方式（*）
            //toolbar: '#toolbar',              //工具按钮用哪个容器
            striped: true,                      //是否显示行间隔色
            cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
            pagination: true,                   //是否显示分页（*）
            sortable: true,                     //是否启用排序
            sortOrder: "asc",                   //排序方式
            pageNumber: 1,                      //初始化加载第一页，默认第一页,并记录
            pageSize: rows,                     //每页的记录行数（*）
            pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
            search: false,                      //是否显示表格搜索
            strictSearch: true,
            showColumns: true,                  //是否显示所有的列（选择显示的列）
            showRefresh: true,                  //是否显示刷新按钮
            minimumCountColumns: 2,             //最少允许的列数
            clickToSelect: true,                //是否启用点击选中行
            //height: 500,                      //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "ID",                     //每一行的唯一标识，一般为主键列
            showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
            cardView: false,                    //是否显示详细视图
            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').bootstrapTable(option);
});

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

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

后端代码（分页使用的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;
    }