how to combine the customer header and filter in ngTable

Question

I would like to create a ngTable that is the combination of the example of #4 (filter) and #18 (custom header) from the ngTable site. I can not get it to work. Can anyone show me an example? Thanks!

Leapt

Answer 1

Since it really doesn't seem to work by just fusing the two examples, I have have created a new table for you based on example #18 of the ng-table site, see http://bazalt-cms.com/ng-table/example/18.

First I have added a new input field with an ng-model in it so that the user-input that is typed into the the field can be bound to the angularjs script. Like so:

<tr>
    <th colspan="3">
        <input class="form-control" type="text" ng-model="filters.myfilter" placeholder="Filter"  />
    </th>
</tr>

In order to have the variable be used by the table as a filter, it has to be "declared" and attached to the ng-table (https://github.com/esvit/ng-table/wiki/Configuring-your-table-with-ngTableParams) in the following way:

$scope.filters = {
    myfilter: ''
};

and

$scope.tableParams = new ngTableParams({
            page: 1,            
            count: 10,           
            filter: $scope.filters, //now the filter is attached to the ng-table
        }

Lastly, I have used a slightly modified version of the filtering script in example #6 (http://bazalt-cms.com/ng-table/example/6) to filter for the said variable (which was bound by the ng-model).

Here is the getData function that filters and orders the data:

getData: function($defer, params) {

    var filtered_data = params.filter() ? $filter('filter')(data, params.filter().myfilter) : data;
    filtered_data = params.sorting() ? $filter('orderBy')(filtered_data, params.orderBy()) : filtered_data;

    $defer.resolve(filtered_data.slice((params.page() - 1) * params.count(), params.page() *   params.count()));
}

This did the trick for me.

You can find the table on this Plunk: http://plnkr.co/edit/ntnNqxmKsQoFmSbo0P57?p=preview

Clausewitz

Answer 2

There were two problems within ng-table which was preventing the customization of the header and showing the filters at the same time.

1. ng-table only looks at the first tr element. So they are not simultaneously possible.
2. If a thead is specified by the user, it completely ignores the filter template as it is attached to the thead provided by the ng-table.

Here is the fix that I made to the ng-table to fix both the issues above. Please alter the ng-table.js as below:

scope.templates = {
                            header: (attrs.templateHeader ? attrs.templateHeader : 'ng-table/header.html'),
                            pagination: (attrs.templatePagination ? attrs.templatePagination : 'ng-table/pager.html'),
                            filter: 'ng-table/filter.html'
                        };


        var trInsideThead = thead.find('tr');
                                if(thead.length > 0 && trInsideThead.length==1){
                                    var filterTemplate = angular.element(document.createElement('tr')).attr({
                                        'ng-include': 'templates.filter',
                                        'ng-show' : 'show_filter',
                                        'class' : 'ng-table-filters'
                                    });            
                                    var headerTemplate = thead.append(filterTemplate);
                                }
                                else{
                                    var headerTemplate = thead.length > 0 ? thead : angular.element(document.createElement('thead')).attr('ng-include', 'templates.header');                   
                                }

        //Put this in the templatecahce

        $templateCache.put('ng-table/filter.html', '<th ng-repeat="column in $columns" ng-show="column.show(this)" class="filter"> <div ng-repeat="(name, filter) in column.filter"> <div ng-if="column.filterTemplateURL" ng-show="column.filterTemplateURL"> <div ng-include="column.filterTemplateURL"></div> </div> <div ng-if="!column.filterTemplateURL" ng-show="!column.filterTemplateURL"> <div ng-include="\'ng-table/filters/\' + filter + \'.html\'"></div> </div> </div> </th>');

    You need to invert the thead and tbody in the html

    <table>
      <tbody>
      </tbody>
      <thead>
      </thead>
   </table>

Boer