7

如何在智能表中按日期对数据进行排序？使用 st-sort 它不是那么好。

<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>

感谢您的回答。

4

3 回答 3

8

它应该正常工作（参见文档网站）。但是，如果您的注册日期是日期字符串，您应该使用 getter 来返回它的日期对象版本，否则您将拥有 alphaNumeric 顺序

在你的控制器中

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

所以你可以将你的标题绑定到这个getter

<th st-sort="getters.registrationDate">Datum registrace</th>
于 2015-04-07T02:11:12.197 回答
1

像这样添加订单ng-repeat：

<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>

对于排序onclick，您可以将一个变量添加到确定排序的范围并orderBy在ng-repeat.

像这样的东西：

<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>

我为此创建了一个 plunker。您将看到如果您单击列标题，它将按该列对表格进行排序。我希望它有所帮助。

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

于 2015-04-06T00:48:53.423 回答
0

我将添加与@laurent 答案相关的另一个可能的解决方案。他的解决方案在我的情况下不起作用，所以我改变了一点吸气剂：

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

getTime()返回自 1970/01/01 以来的毫秒数，因此该列将按数字而不是日期排序（在我的情况下它不起作用，我不知道为什么），结果是相同的。

于 2016-09-05T09:09:56.680 回答