title: How to create a filter dropdown using jquery-footable?
body: <p>I'm utilizing footable on an html table. Although I can filter the footable using the search inbox, I would like to create a dropdown that can filter. </p>
  
  <p>Within the dropdown, I'm trying to create three ('Enable','Disabled','Low stock') which filter for the value 'Enable','Disabled','Low stock' respectively within the 'Status' column. </p>
  
  <p>After reading <a href="https://fooplugins.github.io/FooTable/docs/examples/advanced/filter-dropdown.html" rel="nofollow noreferrer">through this documentation</a>, I've implemented the below function (<a href="https://codepen.io/anon/pen/rGRRxR?editors=1000" rel="nofollow noreferrer">see codepen here</a>)</p>
  
  <pre><code>  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 = $('&lt;div/&gt;', {'class': 'form-group'})
                  .append($('&lt;label/&gt;', {'class': 'sr-only', text: 'Status'}))
                  .prependTo(self.$form);
  
          self.$status = $('&lt;select/&gt;', { 'class': 'form-control' })
              .on('change', {self: self}, self._onStatusDropdownChanged)
              .append($('&lt;option/&gt;', {text: self.def}))
              .appendTo($form_grp);
  
          $.each(self.statuses, function(i, status){
              self.$status.append($('&lt;option/&gt;').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
      }
  });
  </code></pre>
  
  <p>The filter does not show up even when adding the above javascript. </p>