Click here to Skip to main content
14,668,708 members
Rate this:
Please Sign up or sign in to vote.
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) {
    //url patter for api request

    $scope.loadCompleted = false;
    
    //email adress of concrete venue owner
    var mail = document.getElementById("User_Identity_Name").value;
    //concatenated request url
    var request = RequestURL.url.concat(mail);
    //var Ousers = [];
    var _getData = function(data) {
            $scope.isError = false;
           
            $scope.tableParams = new ngTableParams(
            {
                page: 1,            // show first page
                count: 10,          // count per page
                sorting: {
                    name: 'asc'     // initial sorting
                }
              
                    
            }, {
                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);
                    
                    // use build-in angular filter
                    
                    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);
                }
            });
    }
        //make a request 
    $http.get(request)
        .success(function (data) {
            //Ousers = 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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100