How to create a filter dropdown using jquery-footable?

Question

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.

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.

After reading through this documentation, I've implemented the below function (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
    }
});

The filter does not show up even when adding the above javascript.

score 0 · Answer 1 · answered Oct 23 '17 at 05:45

This document demonstrates how to trigger a custom filter and see codepen here

The following jquery can be utilized:

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

How to create a filter dropdown using jquery-footable?

1 Answers1