Angular-footable filter by specific column?

问题

I haven't found on the docs of angular-footable on how to filter by a specific column. However, in this link http://fooplugins.github.io/FooTable/docs/examples/component/filtering.html footable has support to filter by specific column. Does anyone know if it is possible to achieve the same result with the angular-footable?

回答1:

After searching through the internet, I found a code and made some changes on the way the filter of angular-footable works.

So, to filter by specific column and in my case, wants to find everything that matches what you have typed, you should put this code in your controller:

window.footable.options.filter.filterFunction = function(index) {
                var $t = $(this),
                  $table = $t.parents('table:first'),
                  filter = $table.data('current-filter'),
                  columns = $t.find('.filterByMe');


                var row = $(this).parents('tr:first');
                var someColumn = $('td',row)[1];

                var regEx = new RegExp("\\b" + filter + "\\b");
                var result = false;
                for (var i = 0; i < columns.length; i++) {
                  var text = $(columns[i]).text();
                  result = text.indexOf(filter) >= 0;
                  if (result === true)
                    break;

                  if (!$table.data('filter-text-only')) {
                     text = $(columns[i]).data("value");
                     if (text)
                       result =  text.indexOf(filter) >= 0;
                  }

                  if (result === true)
                    break;
                }

                return result;
              };

The line columns = $t.find('.filterByMe'); is where you should put another logic in your html. In my case, I added checkboxes that are related with each column of my table. If the user checks a checkbox on the search field, it means he/she wants to look for data based on that column/columns.

When the user clicks on the checkbox, the class filterByMe is added to the tag <td> of my table.

Doing that, you will be able to search by specific column.

I hope this helps anyone who is using the angular-footable and always wanted to filter by a specific column

回答2:

Here is a shorter version:

    window.footable.options.filter.filterFunction = function(index) {
        var $t = $(this),
            $table = $t.parents('table:first'),
            filter = $table.data('current-filter').toUpperCase(),
            text = $t.find('td:not([data-value])').text(); // replace with data-value instead of append! can be used to disable filtering by some columns
        if (!$table.data('filter-text-only')) {
            $t.find('td[data-value]').each(function () {
                text += $(this).data('value'); 
            });
        }
        return text.toUpperCase().indexOf(filter) >= 0;
    };

The difference here is that we use already existing property "data-value", but the difference from the original filterFunction is only that we don't append the value to the column's text, but replace it. Simply put data-value="" on each td element that you don't want to be filtered.

来源：https://stackoverflow.com/questions/37353766/angular-footable-filter-by-specific-column

标签

angularjs

footable