欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-02 11:30:12
...

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

先将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按某一列搜寻,以及固定某一列详解