可脚踏实地,下拉式过滤器

问题描述 投票:0回答:1

我是按照创建下拉式过滤器的指导原则,[。https:/fooplugins.github.ioFooTabledocsexamplesadvancedfilter-dropdown.html][1] 。

我做了一个愚蠢的表。


    <div class="container">

  <table id="tabella" class="table is-bordered is-fullwidth" style="margin-top: 16px;">
  <thead>
    <tr>
      <th data-breakpoints="xs">PL</th>
      <th data-type="html">Status</th>
      <th data-breakpoints="xs sm">Total Time</th></tr>
   </thead>
   <tbody>
     <tr>
       <td>1</td>
       <td><a href="#">GAR</a></td>
       <td>20:04:12</td>
     </tr>
     <tr>
       <td>2</td>
       <td><a href="#">AUG1</a></td>
       <td>20:13:35</td>
     </tr>
      <tr>
       <td>3</td>
       <td><a href="#">JAIL</a></td>
       <td>10:17:35</td>
     </tr>
   </tbody>
</table>
</div>

我有下面的脚本

$(function() {
  $('.table').footable({
    filtering: {
      enabled: true
    }, 
    components: {
        filtering: FooTable.MyFiltering
    }
  });  
});

 $('.footable').trigger('footable_filter', {filter: "Enable"});
FooTable.MyFiltering = FooTable.Filtering.extend({
    construct: function(instance){
        this._super(instance);
        this.statuses = ['GAR','AUG1'];
        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);
        }
    }
});


可惜的是滤镜不能用,我不明白自己错在哪里。感谢那些能帮助我的人!

这是我的codepen。https:/codepen.ioarfrypenOJMNVNV。

html jquery dropdown codepen footable
1个回答
0
投票

解决了!

需要在你要过滤的列的第3个列中添加data-name。

我的表的行从。

 <th data-type="html">Status</th>

变为

 <th data-type="html" data-name='status'>Status</th>

并且工作正常!

© www.soinside.com 2019 - 2024. All rights reserved.