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

在线试一试

完整例子

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="https://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
    <link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
    <script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script> 
    <title>bootstrap table filterBy在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
      .titles {
  float: right;
  clear: both;
}
    </style>
</head>
<body>
  <div id="toolbar">
    <button onclick="s1()">Id字段10和20的数据</button> 
      <button onclick="s2()">刷选Id字段 10和20 和 Car字段为C6 的数据</button> 
      <button onclick="s3()">刷选出Id字段 大于等于10和小于等于30的数据</button> 
    <button onclick="s4()">恢复数据</button> 
  </div>
    <div class="table-demo">
        <table id="table"  ></table>
    </div>
    <script>
        //设置列
       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;
        }
        });
      }
    </script>
</body>
</html>