数据表高级过滤器菜单，如 Excel 或 Kendo UI Grid？答案

【问题标题】：Datatables advanced filter menu like Excel or Kendo UI Grid?数据表高级过滤器菜单，如 Excel 或 Kendo UI Grid？
【发布时间】：2015-01-24 23:12:13
【问题描述】：

我很惊讶没有在 DataTables 中找到类似 Excel 的过滤功能（因为它是一个使用广泛且先进的插件）。这是否存在，或者是否有一种简单的方法来实现它？下面是高级菜单过滤器（如 Excel）的示例。谢谢！

剑道用户界面：http://demos.telerik.com/kendo-ui/grid/filter-menu-customization

http://dev.sencha.com/deploy/ext-4.0.0/examples/grid-filtering/grid-filter-local.html

【问题讨论】：

带有列菜单的默认过滤机制与您给出的第二个示例非常相似。 demos.telerik.com/kendo-ui/grid/column-menu 或者，您现在也可以使用新的过滤器行功能，然后将其预设为特定的过滤器操作，例如包含、等于等。或者，您可以为列添加自己的自定义过滤器，例如您想根据国家、城市等项目的谨慎列表进行过滤。
这是一个很棒的例子，但是如何使用 DataTables 来实现呢？
那么您是说要将网格绑定到 DataTable 集合而不是 IEnumerable 集合？
我是说我想要在我的表格标题中添加过滤器图标以获得更深入的过滤能力。
那么你没有使用剑道网格来显示这些数据吗？如果您有专业许可证，那么您可以将您的数据源/数据表绑定到网格，然后实现这些功能。如果你没有这个，那么你想要实现的目标的 jsfiddle 会很棒。

标签： javascript excel gridview filter datatables

【解决方案1】：

Yet Another DataTables Column Filter (yadcf) 用于 jQuery 数据表

请参阅this example 以获得演示或下面的演示。

$(document).ready( function () {
   
   var table = $('#example').DataTable();
   
   yadcf.init(table, [{
       column_number: 0
   }, {
       column_number: 1,
       filter_type: "range_number_slider"
   }, {
       column_number: 2,
       filter_type: "date"
   }, {
       column_number: 3,
       filter_type: "auto_complete",
       text_data_delimiter: ","
   }, {
       column_number: 4,
       column_data_type: "html",
       html_data_type: "text",
       filter_default_label: "Select tag"
   }]);
  
   // BOOTSTRAP: Tweaks
   $('.yadcf-filter-wrapper').addClass('input-group');
   $('.yadcf-filter, .yadcf-filter-date', this).addClass('form-control input-sm');
   $('.yadcf-filter-reset-button', this).addClass('btn btn-default btn-sm').wrap('<span class="input-group-btn"></span>');    
});

table.dataTable thead .sorting::after, table.dataTable thead .sorting_asc::after, table.dataTable thead .sorting_desc::after, table.dataTable thead .sorting_asc_disabled::after, table.dataTable thead .sorting_desc_disabled::after {
   top: 8px;  
}

.yadcf-number-slider-filter-wrapper-inner {
   width:100px !important;  
}

<!DOCTYPE html>
<html>

<head>
<meta charset=utf-8 />
<title>jQuery DataTables</title>  

<link href="https://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css" rel="stylesheet"/>  
<link href="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.css" rel="stylesheet" type="text/css" />
  
<link href="http://yadcf-showcase.appspot.com/resources/css/jquery.dataTables.yadcf.css" rel="stylesheet" type="text/css" />


<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>  
<script src="https://cdn.datatables.net/r/bs-3.3.5/dt-1.10.9/datatables.min.js"></script>
<script src="http://yadcf-showcase.appspot.com/resources/js/jquery.dataTables.yadcf.js"></script>
</head>
  
<body>
<table cellpadding="0" cellspacing="0" border="0" class="table table-stripped table-bordered" id="example">
 <thead>
   <tr>
    <th>Some Data</th>
    <th>Numbers</th>
    <th>Dates</th>
    <th>Values</th>
    <th>Tags</th>
   </tr>
 </thead>
 <tbody>
   <tr>
    <td>Some Data 1</td>
    <td>1000</td>
    <td>01/24/2014</td>
    <td>a_value,b_value</td>
    <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 2</td>
    <td>22</td>
    <td>02/20/2014</td>
    <td>b_value,c_value</td>
    <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td>
   </tr>
   <tr>
    <td>Some Data 3</td>
    <td>33</td>
    <td>02/26/2014</td>
    <td>a_value</td>
    <td><span class="label label-primary">Tag2</span> <span class="label label-primary">Tag3</span></td>
   </tr>
   <tr>
    <td>Some Data 4</td>
    <td>44</td>
    <td>02/11/2014</td>
    <td>b_value</td>
    <td><span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 5</td>
    <td>55</td>
    <td>02/29/2014</td>
    <td>a_value,b_value</td>
    <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 1</td>
    <td>111</td>
    <td>11/24/2014</td>
    <td>c_value,d_value</td>
    <td><span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 2</td>
    <td>222</td>
    <td>02/03/2014</td>
    <td>e_value,f_value</td>
    <td><span class="label label-primary">Tag3</span> <span class="label label-primary">Tag4</span> <span class="label label-primary">Tag5</span></td>
   </tr>
   <tr>
    <td>Some Data 3</td>
    <td>33</td>
    <td>02/03/2014</td>
    <td>a_value,bb_value</td>
    <td><span class="label label-primary">Tag5</span></td>
   </tr>
   <tr>
    <td>Some Data 4</td>
    <td>444</td>
    <td>03/24/2014</td>
    <td>a_value,f_value</td>
    <td><span class="label label-primary">Tag4</span></td>
   </tr>
   <tr>
    <td>Some Data 5</td>
    <td>55</td>
    <td>03/22/2014</td>
    <td>a_value,c_value</td>
    <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 1</td>
    <td>300</td>
    <td>02/20/2014</td>
    <td>a_value,b_value</td>
    <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag3</span></td>
   </tr>
   <tr>
    <td>Some Data 2</td>
    <td>242</td>
    <td>02/04/2014</td>
    <td>d_value,aa_value</td>
    <td><span class="label label-primary">Tag1</span></td>
   </tr>
   <tr>
    <td>Some Data 3</td>
    <td>703</td>
    <td>02/05/2014</td>
    <td>a_value,c_value</td>
    <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 4</td>
    <td>604</td>
    <td>02/25/2014</td>
    <td>a_value,bb_value</td>
    <td><span class="label label-primary">Tag1</span> <span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 5</td>
    <td>550</td>
    <td>02/01/2014</td>
    <td>c_value,e_value</td>
    <td><span class="label label-primary">Tag2</span></td>
   </tr>
   <tr>
    <td>Some Data 1</td>
    <td>901</td>
    <td>02/02/2014</td>
    <td>a_value,e_value</td>
    <td><span class="label label-primary">Tag1</span></td>
   </tr>
   <tr>
    <td>Some Data 11</td>
    <td>911</td>
    <td>02/22/2014</td>
    <td>a_value,e_value</td>
    <td><span class="label label-primary">Tag11</span></td>
   </tr>             
 </tbody>
</table>

</body>
</html>

【讨论】：