使用 NG-TABLE 对列进行排序

我是Angular的新手。我创建了一个表，该表成功加载了一组 JSON 数据并显示在我创建的表中。问题是列的排序。我想让用户能够根据显示的每一列对显示的数据进行排序。

我试图按照ng表页面中的教程进行操作，但不知何故它似乎不起作用。我尝试仅按特定列（timestampCreated，请参阅下面的示例）对数据进行排序，但即使这样也不起作用。可能是什么问题？

这是 HTML 文件：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade Demo</title>
  </head>
  <body>
    <div class="col-lg-10">
      <div class="panel panel-default">
        <div class="panel-heading">
          <div class="panel-title">
            <h3>Purchases</h3>
          <div style="margin-top: 10px; margin-bottom:10px">
            <label ng-repeat="col in ctrl.cols" class="checkbox-inline">
            <input type="checkbox" ng-model="col.show">{{col.title}}
          </label>
        </div>
      </div>
     </div>
     <div class="panel-wrapper">
       <div class="panel-body">
         <table ng-table-dynamic="ctrl.tableParams with ctrl.cols" class="table table-condensed table-bordered table-striped">
           <tr ng-repeat="row in $data">
             <td ng-repeat="col in $columns">{{row[col.field]}}</td>
           </tr>
         </table>
       </div>
     </div>
   </div>
  </div>
 </body>
</html>

这是 JS 文件：

(function() {
'use strict';
angular
    .module('purchases')
    .controller('AnomaliesController', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {
        this.cols = [
            {field:"purchaseID", title: "ID", sortable: "purchaseID", show: true },
            {field:"timestampCreated", title: "Date Created", sortable: "timestampCreated", show: true },
            {field:"customerNumber", title: "Customer Number", sortable: "customerNumber", show: true },
            {field:"contractNumber", title: "Contract Number", sortable: "contractNumber", show: true },
            {field:"reg", title: "Registration Number", sortable: "reg", show: true },
            {field:"iptf", title: "IPTF", sortable: "iptf", show: true },
            {field:"type", title: "Type", sortable: "type", show: true },
            {field:"status", title: "Status", sortable: "status", show: true },
            {field:"reviewStatus", title: "Review Status", sortable: "reviewStatus", show: true }
        ];
        $scope.populateTable = function () {
            this.tableParams = new NgTableParams({}, {
                filterDelay: 300,
                sorting: { timestampCreated: "asc" },
                getData: function (params) {
                    return $http({
                        method: 'GET',
                        url: '/server/purchases.json'
                    }).then(function (response) {
                        return response.data;
                    }, function (response) {
                        $log.log(response);
                        return [];
                    });
                }
            });
        }.bind(this);
        
    }]);
})();

将可排序的列名放在单引号中：

  <td title="'Name'"  sortable="'name'">
                {{user.name}}</td>

在你这样的情况下

 sortable: "'timestampCreated'"

尝试以下代码

(function() {
'use strict';
angular
    .module('purchases')
    .controller('AnomaliesController', ['$log', '$scope', '$http', 'NgTableParams', function ($log, $scope, $http, NgTableParams) {
        this.cols = [
            {field:"purchaseID", title: "ID", sortable: "purchaseID", show: true },
            {field:"timestampCreated", title: "Date Created", sortable: "timestampCreated", show: true },
            {field:"customerNumber", title: "Customer Number", sortable: "customerNumber", show: true },
            {field:"contractNumber", title: "Contract Number", sortable: "contractNumber", show: true },
            {field:"reg", title: "Registration Number", sortable: "reg", show: true },
            {field:"iptf", title: "IPTF", sortable: "iptf", show: true },
            {field:"type", title: "Type", sortable: "type", show: true },
            {field:"status", title: "Status", sortable: "status", show: true },
            {field:"reviewStatus", title: "Review Status", sortable: "reviewStatus", show: true }
        ];
        $scope.populateTable = function () {
            this.tableParams = new NgTableParams({
                sorting: { timestampCreated: "asc" }
              }, {
                filterDelay: 300,
                getData: function (params) {
                    return $http({
                        method: 'GET',
                        url: '/server/purchases.json'
                    }).then(function (response) {
                        return response.data;
                    }, function (response) {
                        $log.log(response);
                        return [];
                    });
                }
            });
        }.bind(this);
    }]);
})();

来源： http://ng-table.com/#/sorting/demo-sorting-basic

相关内容

最新更新

热门标签：