数据表高级过滤器菜单，如 Excel 或 Kendo UI Grid？
Posted
技术标签:
【中文标题】数据表高级过滤器菜单，如 Excel 或 Kendo UI Grid？【英文标题】：Datatables advanced filter menu like Excel or 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 集合而不是 IEnumerableYet 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>【讨论】：
以上是关于数据表高级过滤器菜单，如 Excel 或 Kendo UI Grid？的主要内容，如果未能解决你的问题，请参考以下文章
如何将EXCEL表1表2里的数据在表三的下拉姓名里选姓名后自动将表一表二信息显示出来
分享使用NPOI导出Excel树状结构的数据，如部门用户菜单权限