Menu
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
923
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
