Datatables advanced filter menu like Excel or Kendo UI Grid?
datatables, excel, filter, gridview, javascript
Solution
Yet Another DataTables Column Filter (yadcf) for jQuery DataTables
See this example for demonstration or the demo below.
$(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>
Problem
I'm surprised not to find Excel like filtering in DataTables (since it is such a widely used and advanced plugin). Does this exist, or is there an easy way to implement it? Examples of advanced menu filter (like Excel) below. Thanks! Kendo UI: 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