ngTable 不排序?

ngTable does not sort?

我正在尝试使用 ngTable 在 html 上显示数据。

在html中,我制作了所有栏目"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>

从服务器检索数据。 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();
            }
        }
    }]
)

它确实在页面中显示了记录。但是,排序不适用于任何列。我需要做什么才能让它发挥作用?

编辑: 根据 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." 但是它没有说明如何将此方法应用于数据。似乎 ngtable 1.0.0 的文档很少并且缺少示例。谁能告诉我如何在客户端排序?

将 ngTable 添加到您声明应用模块的位置。 像这样: angular.module("myApp", ["ngTable"]);

然后使用NgTableParams.sorting() http://ng-table.com/#/sorting/demo-sorting-basic

自动排序仅在与完整 dataset 属性 一起使用时有效(如简单示例 here 所示)。

当您实现 getData() 方法时,就轮到您(或者在大多数情况下是服务器的任务)进行排序了。在 params 属性 中,您找到通常需要传递给服务器以便服务器进行排序的 sorting。特别是在使用分页视图时(因此不会一次返回所有项目),服务器需要在为页面选择相关项目之前进行排序。

所以如果你没有很多项目并且不需要分页,你可以在返回之前对你的数组进行排序。如果你不想预先加载所有项目,你需要将排序信息传递给服务器,让服务器进行排序和分页。

好的,在我的例子中,我正在使用 getData 调用休息 api 服务,该服务 returns 只有一页有 30 行数据,所以我需要在我的服务参数中指定当前页面、页面大小、要排序和排序的字段('ASC' 或 'DESC'),例如:

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

所以,要做到这一点,我在 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)
    }
  )
}