12

I'm using angular v1.3.15. I'm fetching data by hitting an api and passing it through the scope to the smart table like so

enter image description here

Here is the data format of the 'scope.rowCollection' as seen on the console

enter image description here

Data populates fine but When i'm trying to click on the table-header and sort it using st-sort method, the table values go blank clearly not sorting the column. Here is a view of my html snippet

enter image description here

Can you please tell me what exactly am i doing wrong. The moment i use my own data collection set(NOT hard coded) the whole table values go haywire. I have a feeling its something to do with the variable names that i'm using on the angular end. Any help is much appreciated....Thanks

Nikhil Nanjappa
  • 6,454
  • 3
  • 28
  • 44

3 Answers3

29

Following your comment Nikhil. Use st-safe-src like so:

HTML

<table st-table="displayedCollection" st-safe-src="rowCollection">
      <thead>
        <tr>
          <th st-sort="firstName">First Name</th>
          <th st-sort="lastName">Last Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="row in displayedCollection">
          <td>{{row.firstName}}</td>
          <td>{{row.lastName}}</td>
        </tr>
      </tbody>
</table>

JS

app.controller('Ctrl', function($scope, service) {
    $scope.displayedCollection = [];

    service.all.then(function(list) {
        $scope.rowCollection = list;
        $scope.displayedCollection = list;
    });
});

That's it.

overlord
  • 1,059
  • 1
  • 14
  • 21
Luis Crespo
  • 1,610
  • 1
  • 20
  • 33
  • This answer is helpful for me. Thank you ! –  Jan 27 '16 at 03:43
  • 1
    Another common reason for non-sorting is described here and this one solved my problem of not beeing able to sort: http://stackoverflow.com/a/28773921/2580805 – DerWOK Feb 28 '16 at 20:30
5

If you are bringing in data asynchronously (from a remote database, restful endpoint, ajax call, etc) you must use the stSafeSrc attribute. You must use a seperate collection for both the base and safe collections or you may end up with an infinite loop.

Since I am getting data from restful service st-table="displayedCollection" st-safe-src="rowCollection" solve my issue

Nayyar Abbas
  • 61
  • 1
  • 3
1

I think it is trying to sort on row.name in the way that you code it. Try the following to see if it works:

     st-sort="employee.name"
Kay Tsar
  • 1,428
  • 11
  • 14
  • 3
    Hey Kay.. Thanks for your suggestion. I tried that too but didn't seem to work. Apparently i believe as my data is loading asynchronously, i should have used ```st-safe-src``` attribute according to the smart-table doc [here](http://lorenzofox3.github.io/smart-table-website/#examples-section) – Nikhil Nanjappa Apr 01 '15 at 05:35