Angularjs ngTable不排序?
我试图使用ngTable在html上显示数据 在html中,我将所有列都设置为“可排序” 它确实会在页面中显示记录。但是,排序对任何列都不起作用。我需要做什么才能让它工作 编辑:Angularjs ngTable不排序?,angularjs,sorting,ngtable,Angularjs,Sorting,Ngtable,我试图使用ngTable在html上显示数据 在html中,我将所有列都设置为“可排序” 它确实会在页面中显示记录。但是,排序对任何列都不起作用。我需要做什么才能让它工作 编辑: 根据“您需要将NgTableParams.sorting()中的值应用于您希望在表中显示的数据。从服务器获取数据时通常会出现这种情况。”但它没有说明如何将此方法应用于数据。表1.0.0似乎没有很好的文档记录,并且缺少示例。有人能告诉我如何在客户端排序吗?将ngTable添加到您声明应用程序模块的位置。 这样地: ang
根据“您需要将NgTableParams.sorting()中的值应用于您希望在表中显示的数据。从服务器获取数据时通常会出现这种情况。”但它没有说明如何将此方法应用于数据。表1.0.0似乎没有很好的文档记录,并且缺少示例。有人能告诉我如何在客户端排序吗?将ngTable添加到您声明应用程序模块的位置。 这样地: angular.module(“myApp”、[“ngTable”]) 然后使用NgTableParams.sorting()
自动排序仅在与完整的
数据集
属性一起使用时有效(从简单示例中可以看出)
当您实现getData()
方法时,轮到您(或者在大多数情况下是服务器的任务)进行排序。在params
属性中,您可以找到排序
,通常需要将其传递给服务器,以便服务器可以进行排序。特别是当使用分页视图(因此不是一次返回所有项目)时,服务器需要在为页面选择相关项目之前进行排序
因此,如果您没有很多项并且不需要分页,那么可以在返回数组之前对其进行排序。如果您不想预先加载所有项目,则需要将排序信息传递给服务器,让服务器进行排序和分页。好的,在我的例子中,我使用getData调用rest api服务,该服务只返回一个包含30行数据的页面,因此我需要在我的服务参数中指定当前页面、页面大小、,要排序和排序的字段('ASC'或'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)
}
)
}
所以,每次我点击网页上每一列的小箭头时,我都会向服务器发送一个请求,并以一定的顺序获得一个json列表?我从服务器获取数据所做的一切就是调用RESTAPI。如何通过http请求中的不同列指定不同的顺序?这在很大程度上取决于您针对的rest api。如果api不支持排序,解决这个问题的唯一方法是加载所有项目并在客户端对项目进行排序。这正是我打算做的——在客户端对它们进行排序。但我该怎么做呢?在将数据应用于表之前,可以使用服务器返回的数据的角度。这样,您就可以在客户端对数据进行排序。如何将sorting()应用于数据?网站似乎没有这种情况的例子。@ddd,您可以使用orderBy。
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();
}
}
}]
)
http://localhost:3000/api/my_service/?current_page=1&page_size=30&field_sort=date&order_sort=desc
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)
}
)
}