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()
			},
		});

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

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值