html表格根据查询条件去,bootstrap table filterBy数据刷选过滤器和查询条件
bootstrap table filterBy数据刷选过滤器和查询条件
bootstrap table filterBy数据刷选过滤器，对表格数据进行刷选，比如找出ID为1、10 用户名为itxst的数据。注意这个方法只针对前端有效，如果要服务器后端刷选请参考我们的服务器端分页教程。
filterBy方法
参数名称
filter刷选条件，如果刷选Id字段为1和10的数据{Id:[1,10]}
options刷选方法
默认为 {'filterAlgorithm': 'and'}
还是支持 {'filterAlgorithm': 'or'}
当然你也可以自定义刷选方法,文章后半段会详解。
{'filterAlgorithm': function(row,filters){
return ture;
}}
代码例子//刷选Id字段 10和20的数据
$('#table').bootstrapTable('filterBy', {Id: [10,20]); }
//刷选Id字段 10和20 和 Car字段为C7 的数据
$('#table').bootstrapTable('filterBy',
{'Id': [10,20],'Car':['C7']},
{ 'filterAlgorithm': 'and'} );
//刷选Id字段 1和10 或 Car字段为C7 的数据
$('#table').bootstrapTable('filterBy',
{'Id': [10,20],'Car':['C7']},
{ 'filterAlgorithm': 'or'} );
自定义刷选函数//刷选出Id字段 大于等于10和小于等于30的数据
$('#table').bootstrapTable('filterBy', {Id: [10,30]},
{
'filterAlgorithm': function(row,filters)
{
if(row.Id>=filters.Id[0] && row.Id<=filters.Id[1]) return true;
// alert(JSON.stringify(filters));
return false;
}
});
恢复原始数据$('#table').bootstrapTable('filterBy', {},
{
'filterAlgorithm': function(row,filters)
{
return true;
}
});
完整例子
bootstrap table filterBy在线例子.table-demo {
width: 80%;
margin: 30px auto 0px auto;
}
.titles {
float: right;
clear: both;
}
Id字段10和20的数据
刷选Id字段 10和20 和 Car字段为C6 的数据
刷选出Id字段 大于等于10和小于等于30的数据
恢复数据
//设置列
var columns = [
{
field:"Id",
title: 'ID'
}, {
field: 'Car',
title: '品牌'
} ];
var data= [{
Id: 10,
Car: 'C5',
}, {
Id: 20,
Car: 'C6',
}, {
Id: 30,
Car: 'C7',
} , {
Id: 50,
Car: 'C81',
}
, {
Id: 60,
Car: 'C82',
}];
//bootstrap table初始化数据
$('#table').bootstrapTable({
toolbar:"#toolbar",
data:data,
columns: columns,
});
function s1()
{
$('#table').bootstrapTable('filterBy', {Id: [10,20]});
}
function s2()
{
$('#table').bootstrapTable('filterBy',
{'Id': [10,20],'Car':['C6']},
{ 'filterAlgorithm': 'and'});
}
function s3()
{
$('#table').bootstrapTable('filterBy', {Id: [10,30]},
{
'filterAlgorithm': function(row,filters)
{
if(row.Id>=filters.Id[0] && row.Id<=filters.Id[1]) return true;
// alert(JSON.stringify(filters));
return false;
}
});
}
function s4()
{
$('#table').bootstrapTable('filterBy', {},
{
'filterAlgorithm': function(row,filters)
{
return true;
}
});
}