How to filter and update ngtable pagination on custom pattern
I want to filter ngtable based on a value taken from a dropdown.
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 5, // count per page
sorting: {
name: 'asc' // initial sorting
},
}, {
total: tabledata.length, // length of data
getData: function($defer, params) {
// use build-in angular filter
filteredData = params.filter() ?
$filter('filter')(tabledata, params.filter()) :
tabledata;
var orderedData = params.sorting() ?
$filter('orderBy')(filteredData, params.orderBy()) : filteredData;
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
I posted my complete code on plunker: http://plnkr.co/edit/YbCe5Y6qIxN18yHCrzwW?p=preview .
The problem is that the number of pages remains the same, but if some of my results were on page 5, they will stay there. Basically I have blank pages and there will be filter result pages among them (there are no pages).
I tried to include my own filter - viewFilter, but I was not successful with it. This is another plunker example where filtering is basic (based on column name) and works: http://plnkr.co/edit/CbmbXTXukNxC1ZzkJNKO?p=preview
Does anyone know if an ad can help me integrate this custom filter? Thanks to
source to share
you are not calling the table filter, you are just filtering the page you are on. To solve the problem, you have to call the ng-table filter function from the viewFilter function. I've made a few changes to your code and it works as expected. In the controller, I change the viewOptions values, I included the filter in the table, and I called the filter function from your viewFilter. It now looks like this:
$scope.viewOptions = [
{
name: 'All',
value: ''
},
{
name: 'Approved',
value: 'Y'
},
{
name: 'Declined',
value: 'N'
}
];
$scope.view = { type: '' };
$scope.viewFilter = function (data) {
var filter = $scope.view.type;
$scope.tableParams.filter(filter, data);
};
$scope.tableParams = new ngTableParams({
page: 1, // show first page
count: 10, // count per page
sorting: {
name: 'asc' // initial sorting
},
filter:{
flag_approved:''
}
}, {
total: tabledata.length, // length of data
getData: function ($defer, params) {
// use build-in angular filter
var filteredData = params.filter() ? $filter('filter')(tabledata, params.filter()) : tabledata;
var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : filteredData;
params.total(filteredData.length);
$defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
}
});
}); `
Blockquote
In html, I call the viewFilter function every time the dropdown is changed and I removed the filter from the table. Now it looks like this:
Page: {{tableParams.page ()}}
Number of pages: {{tableParams.count ()}}
Sorting: {{tableParams.sorting () | json}}
Filter: {{tableParams.filter () | json}}
Data: {{tableParams.ordered () | json}}
<div class="row">
<div class="col-xs-6 text-left">
<form class="filter-form form-inline" role="form">
<div class="form-group">
<label for="drop-actions">View:</label>
<select id="drop-actions" class="form-control" ng-model="view.type" ng-options="opt.value as opt.name for opt in viewOptions" ng-change="viewFilter()">
</select>
</div>
</form>
</div>
</div>
<table class="table table-bordered" ng-table="tableParams">
<tr ng-repeat="g in $data">
<td data-title="'Name'" sortable="'name'">
{{ g.name }}
</td>
<td data-title="'Head2'">
{{ g.flag_approved }}
</td>
</tr>
</table>
source to share