Search code examples
javascriptasp.netangularjsngtable

Sort and Filters Do not Work - Ngtable

I have had some difficulty getting started with ngtables. Right now, pagination is correct, but I can not do sorting and filtering. Neither the initial sort order that is defined works Any suggestion? Thanks

Script

var app = angular.module('ruyapp', ['ngTable']);

app.controller('equipasCtrl', function ($scope, $filter, NgTableParams) {

var tamanho = $("#Tamanho").val();

$scope.init = function (equipasCT) {
    $scope.equipas = equipasCT;
};

$scope.equipasTable = new NgTableParams({
    page: 1,
    sorting:{Nome: 'asc'},
    count: $("#Npagina").val()
}, {
    total: tamanho,
    getData: function ($defer, params) {
        $scope.data = params.sorting() ? $filter('orderBy')($scope.equipas, params.orderBy()) : $scope.equipas;
        $scope.data = params.filter() ? $filter('filter')($scope.data, params.filter()) : $scope.data;
        $scope.data = $scope.equipas.slice((params.page() - 1) * params.count(), params.page() * params.count());
        $defer.resolve($scope.data);
    }
});
});

View

<div ng-app="ruyapp" ng-controller="equipasCtrl" ng-init="init(@Newtonsoft.Json.JsonConvert.SerializeObject(Model))">

<table class="table" ng-table="equipasTable" show-filter="true">
            <tbody>
                <tr ng-repeat="row in $data">

                    <td data-title="'Nome'" sortable="'Nome'" filter="{ 'Nome': 'text'}">
                        {{row.Nome}}
                    </td>
                    <td data-title="'Country'" sortable="'Country'" filter="{ 'Country': 'text'}">
                        {{row.Country}}
                    </td>

                    <td data-title="'Abreviatura'" sortable="'Abreviatura'" filter="{ 'Abreviatura': 'text'}">
                        {{row.Abreviatura}}
                    </td>
                    <td>
                        <a href="Equipas/Edit/{{row.EquipaID}}"> Editar</a> |
                        <a href="Equipas/Details/{{row.EquipaID}}"> Detalhes</a> |
                        <a href="Equipas/Delete/{{row.EquipaID}}"> Eliminar</a>
                    </td>
                </tr>

            </tbody>
    </table>


</div>

View

Solution

  • Here is a working example. http://codepen.io/mkl/pen/KWjbKV This is how I changed the code around the getData to make the sort and filtering work.

    {
    //total: $scope.data.length,
    getData: function(params) {
      var data = $scope.equipas;
      data = params.filter() ? $filter('filter')(data, params.filter()) : data;
      data = params.orderBy() ? $filter('orderBy')(data, params.orderBy()) : data;
      params.total(data.length);
      data = data.slice((params.page() - 1) * params.count(), params.page() * params.count());
      return data;
    }