Bootstrap-table使用小结

 1.首先，先上全部配置：

$tomcatBootstrapTable  = $("#connectionInstances").bootstrapTable({ // 对应table标签的id
            url: "dfc/getDFC", // 获取表格数据的url
            cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,  //表格显示条纹，默认为false
            pagination: true, // 在表格底部显示分页组件，默认false
            pageList: [10, 20], // 设置页面可以显示的数据条数
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码
            idField: "id", //标识哪个字段为id主键
            showColumns: true,  // 显示列多选功能
            showRefresh: true, //显示刷新按钮
            silent: true, //刷新事件必须设置
            clickToSelect: true,//点击行即可选中单选/复选框
            toolbar: "#toolbar", //设置工具栏的Id或者class
            search: true,//是否显示搜索
            // strictSearch: true ,//Enable the strict search.
            sortable: true, //是否启用排序
            sortName: 'id', // 要排序的字段
            sortOrder: 'desc', // 排序规则
            sidePagination: 'server', // 设置为服务器端分页
            editable:true,//开启编辑模式
            queryParamsType : "undefined",
            queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求

                // console.log(params)
                return {
                    pageNumber : params.pageNumber,
                    pageSize : params.pageSize,
                    searchText:params.searchText,
                    sortName:params.sortName, // 要排序的字段
                    sortOrder:params.sortOrder // 排序规则
                }
            },
            columns: [
                {
                    checkbox: true, // 显示一个勾选框
                    align: 'center', // 居中显示
                    valign: 'middle' // 上下居中
                }, {
                    field: 'name', // 返回json数据中的name
                    title: '实例名称', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    sortable:true
                }, {
                    field: 'db_name',
                    title: '数据库名',
                    align: 'center',
                    valign: 'middle',
                    sortable:true,
                    editable: {
                        type: 'text',
                        title: '数据库名',
                        mode: "inline",
                        validate: function (v) {
                            if (!v) return '数据库名不能为空';
                        }
                    }
                }, {
                    field: 'db_type',
                    title: '数据库类型',
                    align: 'center',
                    valign: 'middle',
                    formatter: function (value, row, index){ // 单元格格式化函数
                        if (value == 1) {
                            return "Mysql";
                        } else if (value == 2) {
                            return "Oracle";
                        }
                    }
                }, {
                    field: 'create_time',
                    title: '创建时间',
                    align: 'center',
                    valign: 'middle',
                    sortable:true,
                    formatter: function (value, row, index) {
                        return formatDate(value);
                    }
                }, {
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        // console.log(value, row , index);
                        // 根据 state来设置 启动 / 关闭
                        let state = row.state;
                        let btn = state === 0 ? '<button class="btn btn-info btn-sm" onclick="index.bootstrapTomcat(' + row.id + ',' + row.state  + ')">启动</button>'
                                                : '<button class="btn btn-warning btn-sm" onclick="index.bootstrapTomcat(' + row.id + ',' + row.state  + ')">关闭</button>';

                        return '<button class="btn btn-danger btn-sm" onclick="index.del(\'' + row.id + '\',0)">删除</button> ' + btn;
                    }
                }
            ],
            formatLoadingMessage: function () {
                return "请稍等，正在加载中...";
            },
            formatNoMatches: function () { //没有匹配的结果
                return '无符合条件的记录';
            },
            onLoadSuccess: function(){  //加载成功时执行
                console.info("加载成功");
            },
            onLoadError: function(){  //加载失败时执行
                console.info("加载数据失败");
            },
            onEditableSave: function (field, row, oldValue, $el) {
                console.log(row);
                $.ajax({
                    type: "post",
                    url: "assignment_update.do",
                    data: row,
                    dataType: 'JSON',
                    success: function (data, status) {
                        /*if (status == "success") {
                         alert('提交数据成功');
                         }*/
                        //alert('提交数据成功');
                    },
                    error: function () {
                        //alert('编辑失败');
                    },
                    complete: function () {

                    }

                });
            }

        });

2.在页面上引入这些必要文件：

    <!--table-->
    <link rel="stylesheet" href="common/css/bootstrap-editable.css">
    <link rel="stylesheet" href="common/css/bootstrap-table.min.css">
    <script src="common/js/bootstrap-table.min.js"></script>
    <script src="common/js/bootstrap-table-zh-CN.min.js"></script>
    <!--启用编辑-->
    <script src="common/js/bootstrap-editable.min.js"></script>
    <script src="common/js/bootstrap-table-editable.js"></script>
    <script src="common/js/bootstrap-table-export.js"></script>

3.下是依赖的文件

依赖文件

4.参考链接：https://www.cnblogs.com/wuhuacong/p/7284420.html

5.注意：后台数据分页的时候要注意，在写sql统计数据量的时候不要limit。