2017-10-21 22 views
0

J'utilise footable sur une table html. Bien que je puisse filtrer le footable en utilisant la boîte de recherche, je voudrais créer une liste déroulante qui peut filtrer.Comment créer un menu déroulant de filtre en utilisant jquery-footable?

Dans la liste déroulante, j'essaie de créer trois ('Enable', 'Disabled', 'Low stock') qui filtrent pour la valeur 'Activer', 'Désactivé', 'Stock bas' respectivement dans le ' Colonne Statut.

Après avoir lu through this documentation, j'ai mis la fonction ci-dessous (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 
    } 
}); 

Le filtre ne montre pas même lors de l'ajout du javascript ci-dessus.

Répondre

0

This document montre comment déclencher un filtre personnalisé et voir codepen here

Le jquery suivant peut être utilisé:

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