jquery-footable을 사용하여 필터 드롭 다운을 만드는 방법은 무엇입니까?

저는 HTML 테이블에서 footable을 사용하고 있습니다. 검색받은 편지함을 사용하여 footable을 필터링 할 수 있지만 필터 할 수있는 드롭 다운을 만들고 싶습니다.jquery-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 
    } 
});

을 구현했습니다.

$("#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"}); 
});

출처

2017-10-21 Chris