Before reading this post, I recommend you to visit the ng-table official documentation and site and get the basic ng-table working.

Below is my api which accepts some grid params like

  • PageNumber
  • PageSize
  • SortColumn
  • SortOrder
  • SearchTerm

for simplicity I have not involved database in this example. This api method return a CustomerGridResult object, which has two properties first – Count i.e the count of the total records present and Data – the data to be returned after applying the above filters.

WEB API

// POST api/testapi
public CustomerGridResult Post(GridParams gridParam)
{
    var col = typeof(Customer).GetProperty(gridParam.SortColumn);
    var c = new List<Customer>();

    Customers =
        Customers.Where(
            m =>
            m.DisplayName.ToLower().Contains(gridParam.SearchTerm.ToLower())
        ).ToList();

    if(gridParam.SortOrder == "asc")
    {
        c = Customers
         .OrderBy(x => col.GetValue(x, null))
         .Skip((gridParam.PageNumber - 1) * gridParam.PageSize)
         .Take(gridParam.PageSize).ToList();
    }
    else
    {
        c = Customers
         .OrderByDescending(x => col.GetValue(x, null))
         .Skip((gridParam.PageNumber - 1) * gridParam.PageSize)
         .Take(gridParam.PageSize).ToList();    
    }

    return new CustomerGridResult
               {
                   Count = Customers.Count(),
                   Data = c
               };
}

HTML

<div data-ng-app="main" data-ng-controller="GridController">
     <table data-ng-table="tableParams">
        <tr data-ng-repeat="user in $data">
            <td data-title="'First Name'" data-sortable="'FirstName'">
                {{user.FirstName}}
            </td>
            <td data-title="'Last Name'" data-sortable="'LastName'">
                {{user.LastName}}
            </td>
            <td data-title="'Team'" data-sortable="'Company'">
                {{user.Company}}
            </td>
            <td data-title="'Pay'" data-sortable="'Salary'" class="currency">
                ${{user.Salary}}
            </td>
            <td data-title="'DOB'" data-sortable="'DateOfBirth'">
                {{user.DateOfBirth | date:'dd MMM yyyy'}}
            </td>
        </tr>
    </table>
</div>

AngularJs

var app = angular.module('main', ['ngTable', 'ngResource', 'ui.bootstrap']);

app.factory('customer', ['$http', function ($http) {
    return {
        getCustomers: function ($params) {
            return $http({
                headers: { 'Content-Type': 'application/json' },
                url: '/api/TestApi/',
                method: "POST",
                data: $params
            });
        }
        , getPlayersNames: function (searchTerm) {
            return $http.get('/api/testapi', { params: { searchTerm: searchTerm } });
        }
    };
} ]);

app.controller('GridController', ['$scope', '$http', 'ngTableParams', 'customer', function ($scope, $http, ngTableParams, customer) {

    // set defaults
    $scope.total = 5;
    $scope.page = 1;
    $scope.pageSize = 10;
    $scope.SortColumn = "FirstName";
    $scope.SortOrder = "asc";
    $scope.SearchTerm = "";

    $scope.tableParams = new ngTableParams(
        {
            page: $scope.page,
            count: $scope.total
        },
        {
            total: $scope.total, // length of data
            getData: function ($defer, params) {

                for (var i in params.sorting()) {
                    $scope.SortColumn = i;
                    $scope.SortOrder = params.sorting()[i];
                }

                var paramToPost = {
                    PageNumber: $scope.tableParams.page(),
                    PageSize: $scope.tableParams.count(),
                    SortColumn: $scope.SortColumn,
                    SortOrder: $scope.SortOrder,
                    SearchTerm: $scope.SearchTerm
                };

                customer.getCustomers(paramToPost)
                        .success(function (gridData) {
                            $defer.resolve(gridData.Data);
                            params.total(gridData.Count);
                        })
                        .error(function () {
                            alert("oops! something went wrong.");
                        });
            }
        }
    );
    // end of tableParams

    $scope.searchSubmit = function (val) {
        $scope.SearchTerm = val;
        $scope.tableParams.page(1);
        $scope.tableParams.reload();
    };

    $scope.clearSearch = function() {
        $scope.asyncSelected = "";
        $scope.searchSubmit("");
    };

    $scope.getLocation = function (val) {
        return customer.getPlayersNames(val)
            .then(function (res) {
                var players = [];
                angular.forEach(res.data, function (item) {
                    players.push(item.FirstName + ' ' + item.LastName);
                });
                console.log(players);
                return players;
            });
    };

} ]);