Question

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

在html中，我将所有列都“排序”。

  <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();
            }
        }
    }]
)

它确实在页面中显示记录。但是，排序不适用于任何列。我需要做些什么来使其发挥作用？

修改：根据{{3}}，“您需要将NgTableParams.sorting（）中的值应用于要在表中显示的数据。这通常是从服务器获取数据的情况。”但是它没有说明如何将此方法应用于数据。似乎ngtable 1.0.0文档记录不足，缺乏示例。谁能告诉我如何在客户端进行排序？

Answer 1

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

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

因此，如果您没有很多项目并且不需要分页，则可以在返回之前对其进行排序。如果您不想事先加载所有项目，则需要将排序信息传递给服务器，让服务器进行排序和分页。

Answer 2

好吧，在我的情况下，我使用getData来调用一个只返回一页30行数据的rest api服务，所以我需要在我的服务的params中指定当前页面，页面大小，字段来排序和命令（'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)
    }
  )
}

Answer 3

将ngTable添加到您声明应用模块的位置。像这样： angular.module（＆＃34; myApp＆＃34;，[＆＃34; ngTable＆＃34;]）;

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

ngTable不排序？

3 个答案: