本文在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();
}

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

参考文章

bootstraptable表头添加自定义搜索框(带文本,下拉,弹窗多选搜索)

更多推荐

在bootstraptable表头中添加筛选条件