ngTable does not sort?

Question

I am trying to show data on html using ngTable.

In html, I made all columns "sortable".

  <table ng-table="fm.tableParams" class="table" show-filter="false">
        <tr ng-repeat="report in $data">
            <td title="'ReportId'" sortable="'reportId'" class="text-center">
                {{report.reportId}}</td>
            <td title="'SampleId'" sortable="'sampleId'" class="text-center">
                {{report.sampleId}}</td>
            <td title="'MRN'" sortable="'mrn'" class="text-center">
                {{report.mrn}}</td>
            <td title="'Diagnosis'" sortable="'diagnosis'" class="text-center">
                {{report.diagnosis}}</td>
        </tr>
    </table>

Data is retrieved from server. controller.js

ristoreApp.controller("fmCtrl",
    ['$scope', 'fmFactory', 'NgTableParams', function($scope, fmFactory, NgTableParams) {
        var self = this;
        $scope.selection = '0';
        $scope.fmSearch = function () {
            if ($scope.selection == '0') {
                self.tableParams = new NgTableParams({
                    page: 1,            // show first page
                    count: 10,          // count per page
                }, {
                    getData: function (params) {
                        return fmFactory.getAll().then(function(response) {
                            var reports = response.data;
                            params.total(reports.length);
                            console.log(reports.length);
                            return reports;
                        });

                    }
                });
                self.tableParams.reload();
            }
        }
    }]
)

It does show records in the page. However sorting does not work for any of the columns. What do I need to do to make it work?

EDIT: According to ngtable.com, "you'll need to apply the values from NgTableParams.sorting() to the data you want to display in your table. This is typically the case when the data is being fetched from the server." However it didn't say how to apply this method to data. It seems ngtable 1.0.0 is poorly documented and lacks examples. Can anyone show me how to sort at client side?

score 1 · Accepted Answer · answered Aug 16 '16 at 21:42

1

The automatic sorting only works when used with a full dataset property (as it can be seen in the simple examples here).

When you implement the getData() method, it's your turn (or in most cases the server's task) to do the sorting. In the params property, you find the sorting which you usually need to pass to the server so that the server can do the sorting. Especially when using a paginated view (and thus returning not all items at once) the server needs to do the sorting before choosing the relevant items for the page.

So if you don't have a lot of items and don't need pagination, you can sort your array before returning it. If you don't want to load all items beforehand, you need to pass the sorting information to the server and let the server do the sorting and paging.

answered Aug 16 '16 at 21:42

Andreas Jägle

11,632
3
31
31

1

So every time I click on the little arrows of each column on the webpage, I send a request to server and get a list of json with a certain order? All I did to get data from server is to call a rest api. How do I specify different order by different column in the http request? – ddd Aug 16 '16 at 21:49
1

This is highly depending on the rest api you are targeting. If the api doesn't support sorting, the only way to solve this is by loading all items and sorting the items on client side. – Andreas Jägle Aug 16 '16 at 21:57
That's exactly what I intend to do - sorting them on client side. How do I do that though? – ddd Aug 17 '16 at 00:29
1

You can use the Angular [orderBy filter](https://docs.angularjs.org/api/ng/filter/orderBy) on the data returned from server before applying that data to table. That way you will be able to sort the data on the client side. – jagmohan Aug 17 '16 at 04:03

alex · Answer 2 · 2017-09-09T23:15:31.320

Ok, in my case, I'm using getData to call a rest api service who returns only one page with 30 rows of data, so I need to specify in my sevice's params the current page, page size, field to sort and order ('ASC' or 'DESC') like:

http://localhost:3000/api/my_service/?current_page=1&page_size=30&field_sort=date&order_sort=desc

So, to do that I have in my getData:

getData: function(params){
  var sorter     = params.sorting()
  vm.sortField   = Object.keys(sorter)[0]
  vm.sortOrder   = sorter[Object.keys(sorter)[0]] 
  vm.currentPage = vm.sortField.length == 0 ? params.page() : 1
  vm.pageSize    = params.count()
  return $http.get(get_service()).then(
    function(e){
      vm.posts = e.data.posts
      params.total(vm.totalPosts)
      return vm.posts
    },
    function(e){
      console.error(e)
    }
  )
}

score 0 · Answer 3 · answered Aug 16 '16 at 21:39

0

Add ngTable to where you declared your app module. Like this: angular.module("myApp", ["ngTable"]);

Then use NgTableParams.sorting() http://ng-table.com/#/sorting/demo-sorting-basic

answered Aug 16 '16 at 21:39

taiwoorogbangba

48
8

How do I apply sorting() to data? The website does not seem to have an example for that case. – ddd Aug 17 '16 at 02:49
1

@ddd, you use orderBy for that. https://docs.angularjs.org/api/ng/filter/orderBy https://scotch.io/tutorials/sort-and-filter-a-table-using-angular http://www.w3schools.com/angular/ng_filter_orderby.asp – taiwoorogbangba Aug 17 '16 at 13:11

ngTable does not sort?

3 Answers3