bootstrap-table按某一列搜寻,以及固定某一列详解

先说以某一列的形式模糊查询

先将search:true, 但这仅仅是针对全局的模糊查询,要想针对某一列模糊查询需要加一个函数(如下所示)

customSearch:function customSearch(text) { //搜索--以第一列为导向 text为搜索框内输入的值
    if(text == undefined){  
        return false;
    }
    this.data = body;  //以防前一次的搜索对后边的搜索有影响
    var arr = [];  //用来暂存符合搜索条件的数据
    $.each(this.data, function (index,item){  //逐个比较
        if( item[0].indexOf(text) >= 0 ){
            arr.push(item) 
        }
    })
    this.data = arr;  //将获得数据给this.data
    $('#table').bootstrapTable('refresh'); //重新渲染表格
},

再说一下固定某一列,这个需要一个新的插件bootstrap-table-fixed-columns.js

fixedColumns: true,//固定列
fixedNumber:1,//固定前两列

最后贴一下完整代码

$('table').bootstrapTable('destroy'); 
		$("#table").bootstrapTable({
			url: "/",
            fixedColumns: true,//固定列
            fixedNumber:1,//固定前两列
            data: body,
            columns: head,
            search: true,
			pagination: true,
			sidePagination: 'client', 
			pageSize: 10,
			pageNumber: 1,
			pageList: [],
			paginationLoop: true,
			paginationHAlign: 'left',
			paginationDetailHAlign: 'right',
			paginationPreText: '上一页',
            paginationNextText: '下一页',
            customSearch:function customSearch(text) { //搜索--以第一列为导向
                if(text == undefined){
                    return false;
                }
                this.data = body;
                var arr = []
                $.each(this.data, function (index,item){
                    if( item[0].indexOf(text) >= 0 ){
                        arr.push(item)
                    }
                })
                this.data = arr;
                $('#table').bootstrapTable('refresh');
            },
			onPostBody: function (data) { // 渲染结束后调用的函数
				$('.mask_loading').remove()
			},
		});

然后是效果图(第一列固定)

bootstrap-table按某一列搜寻,以及固定某一列详解_第1张图片

你可能感兴趣的:(插件使用,bootstrap-table,插件扩展)