bootstrap table 方法

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="http://www.itxst.com/package/jquery-3.3.1/jquery.js"></script>
    <link href="http://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
    <link href="http://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
    <script src="http://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>
文章目录
bootstrap table方法 bootstrap table事件 bootstrap table配置 bootstrap table下载 基础方法 getOptions获取配置对象 refreshOptions刷新配置 getData获取表格数据方法 getSelections获取选中行方法 getAllSelections所有选中数据 load加载数据方法 mergeCells合并行和列 checkAll全选的方法 uncheckAll反选所有行方法 checkBy根据条件选中行 uncheckBy条件取消中行 refresh重新加载数据的方法 checkInvert反选的方法 destroy注销表格方法 resetView更新表格UI的方法 resetWidth重新适配宽度 showLoading显示加载提示 hideLoading隐藏加载提示 togglePagination隐藏显示分页 toggleFullscreen全屏显示 toggleView切换卡片视图 resetSearch重置搜索框 filterBy数据刷选过滤器 scrollTo滚动到指定位置 getScrollPosition获取当前位置 增删改操作 append追加数据到末尾方法 prepend追加数据到头部方法 remove删除数据的方法 removeAll删除所有数据 insertRow插入一行数据 updateRow更新行数据方法 getRowByUniqueId获取行数据 updateByUniqueId更新行数据 removeByUniqueId删除数据 updateCell更新单元格数据 updateCellByUniqueId更新数据 隐藏显示操作 showRow显示行 hideRow显示行 getHiddenRows获取隐藏的行 show/hide Column隐藏显示列 getVisibleColumns获取显示列 getHiddenColumns获取隐藏列 showAllColumns显示所有列 hideAllColumns隐藏所有列