我试图使用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();
}
}
}]
)
它确实会在页面中显示记录。但是,排序对任何列都不起作用。我需要做些什么才能让它发挥作用?
编辑:根据ngtable.com,“您需要将来自NgTableParams.sorting()的值应用于您想要在表中显示的数据,这通常是从服务器获取数据时的情况。”然而,它没有说明如何将此方法应用于数据。似乎ngtable 1.0.0文档不足,缺乏示例。有人能告诉我如何在客户端排序吗?
发布于 2016-08-16 13:42:19
自动排序只在与完整的dataset
属性一起使用时才起作用(如简单示例这里中所示)。
当您实现getData()
方法时,由您来执行排序(在大多数情况下是服务器的任务)。在params
属性中,您找到通常需要传递给服务器的sorting
,以便服务器能够进行排序。特别是当使用分页视图(因此不是同时返回所有项)时,服务器需要在选择页面的相关项之前进行排序。
因此,如果您没有很多项,并且不需要分页,则可以在返回数组之前对数组进行排序。如果不希望预先加载所有项,则需要将排序信息传递给服务器,并让服务器进行排序和分页。
发布于 2017-03-10 12:00:09
好的,在我的例子中,我使用getData调用一个rest服务,它只返回一个包含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)
}
)
}
发布于 2016-08-16 13:39:53
将ngTable添加到您声明应用程序模块的位置。像这样: angular.module("myApp","ngTable");
然后使用NgTableParams.sorting() http://ng-table.com/#/sorting/demo-sorting-basic
https://stackoverflow.com/questions/38984690
复制相似问题