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()
},
});
然后是效果图(第一列固定)
上一篇: 原生js轮播图
下一篇: 简单实现Table固定表头