Hi all, i try to make a table with ngTable template. But I have trouble with filtering data. I have three filters - one for each column, and when I filter data with first filter all works fine, but when i filter data with second or third filter and then clear them the amount of data in table decreases.
My view file:
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/ng-table.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/Constants.js"></script>
<script src="~/Scripts/app/controllers/users-controller.js"></script>
<link rel="stylesheet" type="text/css" href="~/Content/css/ng-table.css"/>
<link rel="stylesheet" type="text/css" href="~/Content/css/users.css"/>
@Html.HiddenFor(u=>User.Identity.Name)
<div ng-app="bizPlatformModule" ng-controller="UsersController">
<img src="~/Content/images/ajax_loader/ajax-loader.gif" ng-hide="loadCompleted"/>
<p ng-show="isError==true">{{errorMessage}}</p>
<div class="row" id="table-wrapper" ng-hide='isError==true || loadCompleted==false'>
<table ng-table="tableParams" show-filter="true" class="table">
<tr ng-repeat="user in users">
<td data-title="'@CRMStrings.Name' "sortable="'Name'">
<p class="table-cell"> {{user.Name}}</p>
</td>
<td data-title="'@CRMStrings.Email'" sortable="'Email'" filter="{' Email': 'text' }">
<p class="table-cell"> {{user.Email}}</p>
</td>
<td data-title="'@CRMStrings.Telephone'" sortable="'Telephone'" filter="{ 'Telephone': 'text' }">
<p class="table-cell">{{user.Telephone}}</p>
</td>
<td>
<button type="button" class="btn btn-green">@CRMStrings.Details</button>
</td>
</tr>
</table>
</div>
</div>
And my controller file:
bizPlatfromApp.controller('UsersController', ['RequestURL','$scope', '$http', '$filter', 'ngTableParams', function (RequestURL,$scope, $http, $filter, ngTableParams) {
$scope.loadCompleted = false;
var mail = document.getElementById("User_Identity_Name").value;
var request = RequestURL.url.concat(mail);
var _getData = function(data) {
$scope.isError = false;
$scope.tableParams = new ngTableParams(
{
page: 1,
count: 10,
sorting: {
name: 'asc'
}
}, {
total: data.length,
getData: function ($defer, params) {
var filteredData = params.filter() ?$filter('filter')(data, {Name:"", Email:params.filter().Email}) : data;
var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) :data;
console.log("Name: " + params.filter().Name + " Email:" + params.filter().Email + "Telephone:" + params.filter().Telephone);
params.total(orderedData.length);
var page = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
console.log("Users: " + data.length + "Filtered: " + filteredData.length + "Ordered: "+orderedData.length+"count:"+params.count()+"total: "+ params.total());
$scope.users = page;
console.log(data.length);
$defer.resolve(page);
}
});
}
$http.get(request)
.success(function (data) {
_getData(data);
$scope.loadCompleted = true;
})
.error(function(status) {
$scope.errorMessage = "Some trouble happened.We try to fix it shortly.";
$scope.isError = true;
});
}])
Thanks a lot for any answers.