在bootstraptable表头中添加筛选条件

本文在bootstraptable表头添加筛选条件，代码如下：

var personStatuCode = "";   //保存查询的状态值
    
function iniTable() {
          
   
   let $table = $("#table");
    $table.bootstrapTable("destroy");
    $table.bootstrapTable({
          
   
        method: "post",
        dataType: "json",
        contentType: "application/json",
        url: "",
        dataField: "rows",
        queryParamsType: "json",
        queryParams: function (params) {
          
   
            return {
          
   
                "pageNum": params.pageNumber,
                "pageSize": params.pageSize,
                	...
                "personStatu": personStatuCode
            };
        },
        pageNumber: 1,
        pagination: true,
        sidePagination: "server",
        pageSize: 10,
        pageList: [5, 10, 20, 30, 50, 100],
        striped: false,
        clickToSelect: true,
        search: true,
        locale: "zh-CN",
        onPostHeader: function () {
          
   
        	//刷新完列表，表头也跟着刷新了，所以把状态值复制进去
        	//保证选择筛选条件后列表刷新完还是选择的刚刚选择的条件，不然每次选择完条件显示的都是默认的选项
            $("#personStatu").val(personStatuCode)
        },
        columns: [
            {
          
   
                field: checked,
                checkbox: true,
            },
            {
          
   
                title: "姓名",
                field: "name",
                align: "center",
            },
            {
          
   
                title: "<select id=personStatu class=form-control style=width: 100%;padding:6px 0px; οnchange=filtrate()>" +
                    "<option value=>全部状态</option>" +
                     "<option value=0>在职</option>" +
                     "<option value=1>病假</option>" +
                     "<option value=2>事假</option>" +
                     "<option value=3>产假</option>" +
                        "</select>",
                field: "personStatu",
                align: "center",
                formatter: function (value, row, index) {
          
   
                    if (value === "0") {
          
   
                        return "<span style=color:lightgreen;font-weight: bold>在职</span>";
                    } else {
          
   
                        return "<span style=color:red;font-weight: bold>" + personStatu[value] + "</span>";
                    }
                }
            }
            ...
        ]
    });
}

function filtrate(){
          
   
	//保存状态值
    personStatuCode =  $("#personStatu").val();
    //并刷新列表
    iniPersonTable();
}

还可以增加一层表头、搜索框、多选等等，具体可以看下方链接。