Click here to Skip to main content
15,868,016 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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:
HTML
<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:
JavaScript
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, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900