Angular Sort table does not work if I use a different api

Question

I took the ngTable example from

http://ng-table.com/#/loading/demo-external-array

opened it in the code pen, and instead of "/ data" I use api

https://jsonplaceholder.typicode.com/posts

and added isArray: true

var Api = $resource("https://jsonplaceholder.typicode.com/posts", {}, { 'get': { method: 'GET', isArray: true} }); 

In html I got all the columns and saved the id column for simplicity

it loads the id column, but the sort search does not work.

what am I doing wrong?

modified pen here

http://codepen.io/raasmasood/pen/zoeMgx

Answer 1

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

you can check this codfei, now it works .;)

 getData: function(params) { // ajax request to api return Api.get(params.url()).$promise.then(function(data) { params.total(100); // recal. page nav controls return ($filter('orderBy')(data, params.orderBy())); //return data; }); } 

Earlier we missed a part of the filter.

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

to enable the filter :)

Answer 2

I had the same problem and ended up doing a sort / filter / paging manually:

 var app = angular.module("myApp", ["ngTable", "ngResource", "ngTableDemoFakeBackend"]); (function() { app.controller("demoController", demoController); demoController.$inject = ["NgTableParams", "$resource", "$filter"]; function demoController(NgTableParams, $resource, $filter) { //var Api = $resource("/data"); var Api = $resource("https://jsonplaceholder.typicode.com/posts", {}, { // Let make the `query()` method cancellable query: {method: 'get', isArray: true, cancellable: true} }); this.tableParams = new NgTableParams({ count: 5 }, { getData: function(params) { // ajax request to api return Api.query().$promise.then(function(data) { params.total(data.length); // recal. page nav controls var filteredData = params.filter().id ? $filter('filter')(data, params.filter()) : data; var orderedData = params.sorting() ? $filter('orderBy')(filteredData, params.orderBy()) : data; var page = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); return page; }); } }); } })(); 

The disadvantage of this approach is that you use filtering, the more columns you add, the more checks you need to do, because how it works, when you clear the filter, it will not set this object to undefined. It will create an object like this:

 { id: null } 

This means that you cannot use params.filter() on this line:

 var filteredData = params.filter().id ? $filter('filter')(data, params.filter()) : data;