bootstrap table的使用

在html添加标签

<table id="job_list_table"></table>

设置js

$(function(){
    datatable.init_Table("job_list_table", "/test", "get");
});
var datatable = {
    init_Table: function (tablePosition,url,method) {
        $("#"+tablePosition).bootstrapTable({ // 对应table标签的id
            url: url,                         // 获取表格数据的url
            method: method,                   //请求方式（*）
            dataType: "json",                 //返回数据的格式
            cache: false,                     // 设置为 false 禁用 AJAX 数据缓存， 默认为true
            striped: true,                    //表格显示条纹，默认为false
            locale:'zh-CN',                   //中文支持
            undefinedText: "-",               //当数据为 undefined 时显示的字符。
            pagination: true,                 // 在表格底部显示分页组件，默认false
            pageList: [10, 20],               // 设置页面可以显示的数据条数
            pageSize: 10,                     // 页面数据条数
            pageNumber: 1,                    // 首页页码
            sidePagination: 'server',         // 设置为服务器端分页
            queryParams: function (params) {  // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
                return {
                    pageSize: params.limit,   // 每页要显示的数据条数
                    offset: params.offset,    // 每页显示数据的开始行号
                    sort: params.sort,        // 要排序的字段
                    sortOrder: params.order,  // 排序规则
                    request_type: "job_list",
                    status: $("#status").val()//自定义查询条件
                }
            },
            sortName: 'createTime', // 要排序的字段
            sortOrder: 'desc', // 排序规则
            columns: [
                {
                    field: 'id',
                    title: '序号', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle', // 上下居中
                    formatter: function (value, row, index) {
                        return index+1;
                    }
                }, {
                    field: 'jobid', // 返回json数据中的name
                    title: 'ITSM单号', // 表格表头显示文字
                    align: 'center', // 左右居中
                    valign: 'middle' // 上下居中
                }, {
                    field: 'sysname',
                    title: '系统名',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'configType',
                    title: '变更类型',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'createTime',
                    title: '创建时间',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'creator',
                    title: '创建人',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'flag',
                    title: '状态',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'jobstep01',
                    title: '核查',
                    align: 'center',
                    valign: 'middle'
                }, {
                    field: 'id',
                    title: "操作",
                    align: 'center',
                    valign: 'middle',
                    width: 160, // 定义列的宽度，单位为像素px
                    formatter: function (value, row, index) {
                        var chakan = '<button class="btn btn-primary btn-xs" onclick="getJobDetail(\'' + row.id + '|' + row.jobid + '\')">查看</button>';
                        var shanchu  = '<button class="btn btn-primary btn-xs" onclick="delJob(\'' + row.id + '\')">删除</button>';
                        return chakan + "&nbsp;&nbsp;" + shanchu
                    }
                }
            ],
            formatLoadingMessage: function () {
               return "请稍等，正在加载中...";
            },
            formatNoMatches: function () {
                return '无符合条件的记录';
            }
        });
    }
}

如果要按照条件查询的话，只需要调用如下代码即可刷新表格的数据

$("#job_list_table").bootstrapTable('refresh');

注意：/test接口返回的数据必须包含{"total":200, "rows":[{"id":0,"name":"zhangshan"},{"id":0,"name":"lisi"}]}