我是按照创建下拉式过滤器的指导原则,[。https:/fooplugins.github.ioFooTabledocsexamplesadvancedfilter-dropdown.html][1] 。
我做了一个愚蠢的表。
<div class="container">
<table id="tabella" class="table is-bordered is-fullwidth" style="margin-top: 16px;">
<thead>
<tr>
<th data-breakpoints="xs">PL</th>
<th data-type="html">Status</th>
<th data-breakpoints="xs sm">Total Time</th></tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><a href="#">GAR</a></td>
<td>20:04:12</td>
</tr>
<tr>
<td>2</td>
<td><a href="#">AUG1</a></td>
<td>20:13:35</td>
</tr>
<tr>
<td>3</td>
<td><a href="#">JAIL</a></td>
<td>10:17:35</td>
</tr>
</tbody>
</table>
</div>
我有下面的脚本
$(function() {
$('.table').footable({
filtering: {
enabled: true
},
components: {
filtering: FooTable.MyFiltering
}
});
});
$('.footable').trigger('footable_filter', {filter: "Enable"});
FooTable.MyFiltering = FooTable.Filtering.extend({
construct: function(instance){
this._super(instance);
this.statuses = ['GAR','AUG1'];
this.def = 'Any Status';
this.$status = null;
},
$create: function(){
this._super();
var self = this,
$form_grp = $('<div/>', {'class': 'form-group'})
.append($('<label/>', {'class': 'sr-only', text: 'Status'}))
.prependTo(self.$form);
self.$status = $('<select/>', { 'class': 'form-control' })
.on('change', {self: self}, self._onStatusDropdownChanged)
.append($('<option/>', {text: self.def}))
.appendTo($form_grp);
$.each(self.statuses, function(i, status){
self.$status.append($('<option/>').text(status));
});
},
_onStatusDropdownChanged: function(e){
var self = e.data.self,
selected = $(this).val();
if (selected !== self.def){
self.addFilter('status', selected, ['status']);
} else {
self.removeFilter('status');
}
self.filter();
},
draw: function(){
this._super();
var status = this.find('status');
if (status instanceof FooTable.Filter){
this.$status.val(status.query.val());
} else {
this.$status.val(this.def);
}
}
});
可惜的是滤镜不能用,我不明白自己错在哪里。感谢那些能帮助我的人!
这是我的codepen。https:/codepen.ioarfrypenOJMNVNV。
解决了!
需要在你要过滤的列的第3个列中添加data-name。
我的表的行从。
<th data-type="html">Status</th>
变为
<th data-type="html" data-name='status'>Status</th>
并且工作正常!