如何使用jquery-footable创建过滤器下拉菜单？

Question

我正在使用HTML表格上的footable。尽管我可以使用搜索收件箱来过滤脚架，但我想创建一个可以过滤的下拉框。

在下拉列表中，我试图创建三个（'Enable'，'Disabled'，'Low stock'），它们分别为'Enable'，'Disabled'，'Low stock'状态“栏。

阅读through this documentation后，我已经实现了以下功能（see codepen here）

FooTable.MyFiltering = FooTable.Filtering.extend({ 
    construct: function(instance){ 
     this._super(instance); 
     this.modeles = ['Enable','Disabled','Low stock']; 
     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); 
     } 
    } 
}); 

    $('.table').footable({ 
    components: { 
     filtering: FooTable.MyFiltering 
    } 
}); 

将上述JavaScript的过滤器不显示均匀。

Answer 1

This document演示如何触发自定义过滤器并查看codepen here

以下的jquery可以利用：

$("#enable_button").click(function() { 
    $('.footable').trigger('footable_filter', {filter: "Enable"}); 
}); 

$("#disable_button").click(function() { 
    $('.footable').trigger('footable_filter', {filter: "Disabled"}); 
}); 

$("#low_button").click(function() { 
    $('.footable').trigger('footable_filter', {filter: "Low stock"}); 
});