一个完整的bootstrap请求

1、HTML页面定义table

    <!--bootstrap表格-->
    <div class="tableBox">
        <table id="userTable"></table>
    </div>

 要引用的文件，注意jQuery在前面引用：

<link rel="stylesheet" href="${root}/app/lib/bootstarp/bootstrap.css">
<link rel="stylesheet" href="${root}/app/lib/bootstarp/bootstrap-table.css"/>

<script type="text/javascript" src="${root}/app/lib/jquery/jquery-2.1.0.js" ></script>
<script type="text/javascript" src="${root}/app/lib/bootstarp/popper.min.js" ></script>
<script type="text/javascript" src="${root}/app/lib/bootstarp/bootstrap.js" ></script>
<script type="text/javascript" src="${root}/app/lib/bootstarp/bootstrap-table.js" ></script>
<script type="text/javascript" src="${root}/app/lib/bootstarp/locale/bootstrap-table-zh-CN.js"></script>

2、js里面

var sysTable = {
    id: 'userTable',
    pageNumber: 1,
    pageSize: 20,
    init: function () {
        var me = this;
        me.initTable();
    },
    initTable: function () {
        var me = this;
        /*查询按钮*/
        $(".btn-search").click(function () {
            $("#" + me.id).bootstrapTable("destroy");
            me.initTable();
        });
        /**
         * 删除
         */
        $(".btn-del").click(function () {
            me.deleteUser();
        });

        $("#" + me.id).bootstrapTable({
            method: "POST",
            url: ROOT + '/users/userPageList',
            contentType: "application/x-www-form-urlencoded; charset=UTF-8",
            cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            pagination: true, // 在表格底部显示分页组件，默认false
            paginationLoop: false,
            pageSize: 10, // 页面数据条数
            pageNumber: 1, // 首页页码
            pageList: [10, 20, 50, 100], // 设置页面可以显示的数据条数
            sidePagination: "server",  //server后台分页    client前台分页  切换为server时，自动显示跳页
            paginationDetailHAlign: 'left',
            queryParamsType: "",
            queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                me.pageSize = params.pageSize;
                me.pageNumber = params.pageNumber;
                var temp = {
                    name: $(".layui-input").val(),
                    jobno: "",
                    sortName: params.sortName, // 要排序的字段
                    sortOrder: params.sortOrder, // 排序规则
                    pageSize: params.pageSize, // 要排序的字段
                    pageNumber: params.pageNumber, // 排序规则
                };
                return temp;
            },
            height: "auto",
            sortName: 'complete', // 要排序的字段
            sortOrder: 'desc', // 排序规则
            striped: false,  //隔行变色，默认为false
            clickToSelect: true, //点击选中行
            singleSelect: false,  //是否单选
            columns: me.initColumns(),
            onLoadSuccess: function (obj) {  //加载成功时执行
                dataList = obj.rows;
            },
            onLoadError: function (obj) {  //加载失败时执行
            }
        })
    },
    initColumns: function () {
        //为了样式同一 所有的复选框列和序号列的宽度统一为60px;   其他列 也必须也设置宽度
        var me = sysTable;
        return [{
            field: "check",
            checkbox: true,
            align: "center",
            halign: 'center',
            valign: "middle",
            width: 60,
        },
            {
                field: "",
                title: "序号",
                halign: 'center',
                align: "center",
                valign: "middle",
                width: 60,
                formatter: function (value, row, index) {
                    return getFormatterNum(index, me.pageNumber, me.pageSize, this);
                }
            },
            {
                field: "jobno",
                title: "工号",
                halign: 'center',
                align: "center",
                valign: "middle",
                width: 100,
                formatter: function (value, row, index) {
                    return getFormatter(value, row, index, this);
                }
            },
            {
                field: "name",
                title: "姓名",
                align: 'center',
                halign: 'center',
                valign: "middle",
                width: 100,
                formatter: function (value, row, index) {
                    return getFormatter(value, row, index, this);
                }
            },
            {
                field: "sex",
                title: "性别",
                align: 'center',
                halign: 'center',
                valign: "middle",
                width: 80,
                formatter: function (value, row, index) {
                    return getFormatter(value, row, index, this);
                }
            },
            {
                field: "tel",
                title: "手机号",
                align: 'center',
                halign: 'center',
                valign: "middle",
                width: 180,
                formatter: function (value, row, index) {
                    return getFormatter(value, row, index, this);
                }
            },
            {
                field: "deptname",
                title: "所属部门",
                align: 'center',
                valign: "middle",
                halign: 'center',
                width: 300,
                formatter: function (value, row, index) {
                    return getFormatter(value, row, index, this);
                    ;
                }
            },
            {
                field: '#',
                title: '',
                align: 'center',
                halign: 'center',
                valign: "middle",
                width: 300,
                formatter:function(value,row,index){
                    var str="<div class=\"tab-left flex-column\">" +
                        "            <div class=\"tab-title\">机构名称："+row.deptname+"</div>" +
                        "            <div class=\"tab-content\">\n" +
                        "                <div class=\"tab-content-left\">分行："+row.deptname+"</div>" +
                        "                <div class=\"tab-content-right\">机构号："+row.deptname+"</div>" +
                        "            </div>\n" +
                        "        </div>";
                    return str;
                }
            }
        ]

    },
    /**
     * 删除用户
     */
    deleteUser: function () {
        var me = this;
        if (commFun.checkMore(me)) {
            var resourceIds = commFun.appendStr(me.seItem, "prid");
            layer.confirm("确定要删除选中的数据吗", function (obj) {
                layer.close(obj);
                me.deleteAjax(resourceIds);
            })
        }
    },
    deleteAjax: function (resourceIds) {
        var me = this;
        $.ajax({
            type: "POST",//方法类型
            dataType: "json",//预期服务器返回的数据类型
            url: ROOT + "/users/deleteUserByPrimaryKey",//url
            data: {id: resourceIds},
            success: function (data) {
                if (data.code == -1) {
                    toast("删除失败");
                } else {
                    toast("删除成功");
                }
                $("#" + me.id).bootstrapTable("refresh");
            },
            error: function (result) {
                layer.msg("删除失败");
                $("#" + me.id).bootstrapTable("refresh");
            }
        });
    }
}
sysTable.init();