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.

Matuszew · Answer 1 · 2016-12-22T15:48:25.343

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 )

Thanx mate. i got what you meant but with this approach searching still doesn't work. — Raas Masood, Dec 22 '16 at 15:26
yes this is almost the same as answer given below. searching doesn't clears up when filter is cleared because it makes the number filters {id: null} so there was a code injected to remove null values. not a clean way but kind of works. but if you see ng table examples. they simply work in all cases, without any manual interference. — Raas Masood, Dec 22 '16 at 15:56
Not necessarily, if you take a closer look when data is fetched from backend via getData function then you can clearly see that data is sorted on backend not by component itself. You can see that component do not provide itself sorting for fetched data by ajax because every time you sort then getData is loaded for fetching data. That's why your section 2 example works ( it is sorted on backend and not on frontend ). Even on ngTable site you have example with sorting on backend based on parameters from ngTable. — Matuszew, Dec 22 '16 at 18:23

score 0 · Answer 2 · edited May 23 '17 at 12:09

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

just use your

Section 2 solution and be done with it

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

i tried this, didn't worked. app.factory('orderResource', function ($resource) { return $resource('https://jsonplaceholder.typicode.com/posts', {}, { get: {method: 'GET'}, update: {method: 'POST'} }); }); — Raas Masood, Dec 19 '16 at 18:05

score 0 · Accepted Answer · edited May 23 '17 at 12:32

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

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

3 Answers3