javascript - How can I sort items by date in smart-table - Stack Overflow

admin管理员组

文章数量:1279010

How can I sort data by date in smart-table? With st-sort it isn't so good.

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover">
      <thead>
        <tr>
            <th st-sort="id" class="hover">Id</th>
            <th st-sort="firstname" class="hover">Jméno</th>
            <th st-sort="lastname" class="hover">Příjmení</th>
            <th st-sort="registrationDate" class="hover">Datum registrace</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="player in displayedCollection">
            <td class="hover">{{player.id}}</td>
            <td class="hover">{{player.firstname}}</td>
            <td class="hover">{{player.lastname}}</td>
            <td class="hover">{{player.registrationDate}}</td>
        </tr>
      </tbody>
  </table>

Thanks for answers.

How can I sort data by date in smart-table? With st-sort it isn't so good.

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover">
      <thead>
        <tr>
            <th st-sort="id" class="hover">Id</th>
            <th st-sort="firstname" class="hover">Jméno</th>
            <th st-sort="lastname" class="hover">Příjmení</th>
            <th st-sort="registrationDate" class="hover">Datum registrace</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="player in displayedCollection">
            <td class="hover">{{player.id}}</td>
            <td class="hover">{{player.firstname}}</td>
            <td class="hover">{{player.lastname}}</td>
            <td class="hover">{{player.registrationDate}}</td>
        </tr>
      </tbody>
  </table>

Thanks for answers.

• javascript
• html
• angularjs
• smart-table

Share Improve this question Follow asked Apr 5, 2015 at 18:38 Václav PavlíčekVáclav Pavlíček 41922 gold badges1010 silver badges2121 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

It should normally work (cf documentation website). However if your registration date is a date string you should use a getter to return the date object version of it, otherwise you'll have the alphaNumeric order

in your controller

$scope.getters = {
   registrationDate:function(row) {
      return new Date(row.registrationDate);
   }
}

so you can bind your header to this getter

<th st-sort="getters.registrationDate">Datum registrace</th>

Add an order by to your ng-repeat like this:

<tr ng-repeat="player in displayedCollection | orderBy:'registrationDate'">
   <td class="hover">{{player.id}}</td>
   <td class="hover">{{player.firstname}}</td>
   <td class="hover">{{player.lastname}}</td>
   <td class="hover">{{player.registrationDate}}</td>
</tr>

For sorting onclick, you could add a variable to the scope that determines the sorting and used that on the orderBy on the ng-repeat.

Something like this:

<table st-table="displayedCollection" st-safe-src="playerCollection" class="table table-hover">
  <thead>
    <tr>
        <th st-sort="id" class="hover"><a href="" ng-click="predicate = 'id'; reverse=false">Id</a></th>
        <th st-sort="firstname" class="hover"><a href="" ng-click="predicate = 'firstname'; reverse=false">Jméno</a></th>
        <th st-sort="lastname" class="hover"><a href="" ng-click="predicate = 'lastname'; reverse=false">Příjmení</a></th>
        <th st-sort="registrationDate" class="hover"><a href="" ng-click="predicate = 'registrationDate'; reverse=false">Datum registrace</a></th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="player in displayedCollection | orderBy:predicate:reverse">
        <td class="hover">{{player.id}}</td>
        <td class="hover">{{player.firstname}}</td>
        <td class="hover">{{player.lastname}}</td>
        <td class="hover">{{player.registrationDate}}</td>
    </tr>
  </tbody>
</table>

I created a plunker for this. You'll see if you click on a column header it'll sort the table by that column. I hope it helps.

http://plnkr.co/edit/pAJ3PpRwVk7PuTmoMjsr?p=preview

I will add another possible solution related to @laurent answer. His solution wasn't working in my case so I changed a bit the getter:

$scope.getters = {
   registrationDate:function(row) {
      return (new Date(row.registrationDate)).getTime();
   }
}

getTime() returns the number of milliseconds since 1970/01/01, so the column will be ordered by number instead of date (it wasn't working in my case and I didn't figured out why) and the result is the same.

本文标签： javascriptHow can I sort items by date in smarttableStack Overflow