ng-Table sorting and searching not working when use $resource

Question

i started with an existing example of ngTable an modified it a bit to use ngResource. using resource factory it populates the data but searching and sorting doesn't works.

http://codepen.io/anon/pen/yVGKMZ

Created a pen above.

var app = angular.module("myApp", ["ngTable", "ngResource", "ngTableDemoFakeBackend"]);

app.factory('orderResource', function ($resource) {
    return $resource('https://jsonplaceholder.typicode.com/posts');
});

(function () {

    app.controller("demoController", demoController);
    demoController.$inject = ["NgTableParams", "$resource", "orderResource"];
    function demoController(NgTableParams, $resource, orderResource) {
        //debugger;
        var ordersGet = orderResource.query({ });


        var Api = $resource("/data");
        this.tableParams = new NgTableParams({}, {
            getData: function (params) {

                // **** Section 1 ***  sorting and filter does not work
                    return ordersGet.$promise.then(function (response) {
                    params.total(100);
                    return response;
              // **** Section 1 *** 
              
              
                //****Section 2 *** this works fine
                    // return Api.get(params.url()).$promise.then(function(data) {
                    //           params.total(data.inlineCount);  
                    //           return data.results;
              //****Section 2 ***
              
              
                });
            }
        });
    }
})();

<div ng-app="myApp">
    <div ng-controller="demoController as demo">



        <table ng-table="demo.tableParams" class="table table-bordered table-striped table-condensed">
            <tr ng-repeat="row in $data track by row.id">
                <td data-title="'iss'" filter="{id: 'number'}" sortable="'id'">{{row.id}}</td>

            </tr>
        </table>
    </div>
</div>

In the code if you comment section 1 and un comment section 2 you can observe it working. i also tried simple $http it didn't worked as well.

Answer 1

Angular Table sorting does not work if i use a different api

I asked the same question else where and got a better answer.

First thing was, we were missing filtering.

return $filter('filter')($filter('orderBy')(data, params.orderBy()),params.filter());

and to make sorting work we had to add some logic to remove properties with null filter values.

working code pen is here

http://codepen.io/anon/pen/rWRNjQ

Answer 2

Your Line

 var ordersGet = orderResource.query({ });

Is clearing out the query command for your ordersGet variable. So when you do

return ordersGet.$promise.then there isnt really an ajax call taking place. Nothing is really going on. ngTable calls your ordersGet but since the query command is nothing, it does nothing.

in addition, if some how your ordersGet was working you never pass the params.url() so the pagination would never work.

In my opinion there are two ways of doing this

1. just use your

Section 2 solution and be done with it

2. Override the get URL on your resource and call it similar to this ordersGet(params.url()).$promise.then(); Which is much more complicated, but here are a few links to go down that route.

Great SO question on how to override resource URL

Answer 3

Well I think I've solved it - probably not the cleanest one but still...

  var app = angular.module("myApp", ["ngTable", "ngResource", "ngTableDemoFakeBackend"]);

app.factory('orderResource', function ($resource) {
return $resource('https://jsonplaceholder.typicode.com/posts');
});

(function () {

app.controller("demoController", demoController);
demoController.$inject = ["NgTableParams", "$resource", "orderResource", '$filter'];
function demoController(NgTableParams, $resource, orderResource, $filter) {
    //debugger;
    var ordersGet = orderResource;


    var Api = $resource("/data");
    this.tableParams = new NgTableParams({}, {
        getData: function (params) {
            // **** Section 1 ***  sorting and filter does not work
                return orderResource.query().$promise.then(function (response) {
                params.total(100);

                return $filter('orderBy')($filter('filter')(response, params.filter()), params.orderBy())
          // **** Section 1 ***    

            //****Section 2 *** this works fine
                // return Api.get(params.url()).$promise.then(function(data) {
                //           params.total(data.inlineCount);  
                //           return data.results;
          //****Section 2 ***


            });
        }
    });
}
})();

I've applied $filter service and I'm ordering table results by this filter ( sorting order I already have from component )