Sort and search ng table not working when using $ resource

Question

i started with the existing ngTable example, modifying it a bit to use ngResource. using the factory resource, it fills the data, but the search and sorting do not work.

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

Created the handle 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 on section 1 and un comment 2, you can watch it work. I also tried plain $ http, it didn't work either.

Answer 1

Angular Sorting tables does not work if I use different api

I asked the same question, where I got the best answer.

First of all, we lacked filtering.

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

and to do the sorting, we had to add some logic to remove properties with zero filter values.

pen working code here

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

Answer 2

Well, I think I decided it - maybe not the cleanest, 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 applied the $ filter service, and I order the results of the table with this filter (I already have the sort order for the component)

Answer 3

Your line

  var ordersGet = orderResource.query({ }); 

Cleans up the query command for your ordersGet variable. Therefore when you do

return ordersGet.$promise.then there really is no ajax call there. Nothing happens. ngTable calls your ordersGet , but since the query command does nothing, it does nothing.

Also, if someone works with your ordersGet , you never pass params.url() , so pagination will never work.

In my opinion, there are two ways to do this.

• just use

Decision section 2 and do with it

2. Override the get URL on your resource and name it similar to this ordersGet(params.url()).$promise.then(); . This is a lot more complicated, but here are some links to go along this route.

Great question on how to redefine a resource URL