首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >ngTable不排序?

ngTable不排序?
EN

Stack Overflow用户
提问于 2016-08-16 13:21:59
回答 3查看 3.5K关注 0票数 4

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

在html中,我使所有列都“可排序”。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
  <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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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文档不足,缺乏示例。有人能告诉我如何在客户端排序吗?

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2016-08-16 13:42:19

自动排序只在与完整的dataset属性一起使用时才起作用(如简单示例这里中所示)。

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

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

票数 1
EN

Stack Overflow用户

发布于 2017-03-10 12:00:09

好的,在我的例子中,我使用getData调用一个rest服务,它只返回一个包含30行数据的页面,所以我需要在我的服务对象中指定当前页面、页面大小、要排序和排序的字段('ASC‘或'DESC')如下:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
http://localhost:3000/api/my_service/?current_page=1&page_size=30&field_sort=date&order_sort=desc

因此,要做到这一点,我在我的getData:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
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)
    }
  )
}
票数 1
EN

Stack Overflow用户

发布于 2016-08-16 13:39:53

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

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/38984690

复制
相关文章
Java集合中对象排序
集合中的对象排序需求还是比較常见的。当然我们能够重写equals方法,循环比較;同一时候Java为我们提供了更易使用的APIs。当须要排序的集合或数组不是单纯的数字型时,通常能够使用Comparator或Comparable。以简单的方式实现对象排序或自己定义排序。
全栈程序员站长
2022/07/08
7720
检查Python对象
编程环境中的对象很象现实世界中的对象。实际的对象有一定的形状、大小、重量和其它特征。实际的对象还能够对其环境进行响应、与其它对象交互或执行任务。计算机中的对象试图模拟我们身边现实世界中的对象,包括象文档、日程表和业务过程这样的抽象对象。 类似于实际的对象,几个计算机对象可能共享共同的特征,同时保持它们自己相对较小的变异特征。想一想您在书店中看到的书籍。书籍的每个物理副本都可能有污迹、几张破损的书页或唯一的标识号。尽管每本书都是唯一的对象,但都拥有相同标题的每本书都只是原始模板的实例,并保留了原始模板的大
张善友
2018/01/22
1.3K0
Javascript中对象如何检查key(键)是否存在
如果要特别测试对象实例的属性(而不是继承的属性),请使用hasOwnProperty:
IT工作者
2022/02/09
26.6K0
vue的$attrs_vue获取list集合中的对象
原文网址:Vue–attrs, listeners–使用/教程/实例_IT利刃出鞘的博客-CSDN博客
全栈程序员站长
2022/09/27
5.2K0
[ Java学习基础 ] Java的对象容器 -- 集合
  当你有很多书时,你会考虑买一个书柜,将你的书分门别类摆放进入。使用了书柜不仅仅使房间变得整洁,也便于以后使用书时方便查找。在计算机中管理对象亦是如此,当获得多个对象后,也需要一个容器将它们管理起来,这个容器就是集合。   集合本质是基于某种数据结构数据容器。常见的数据结构:数组(Array)、集(Set)、队列(Queue)、链表(Linkedlist)、树(Tree)、堆(Heap)、栈(Stack)和映射(Map)等结构。本文将为大家介绍Java中的集合。 一、集合概述   Java中提供了丰富的集
Kevin_Zhang
2018/05/22
1.8K0
PHP检查对象或类中是否存在属性
$obj = \app\common\library\Email::instance(); $obj->p=889; if(isset($obj->p)){ echo 66; }else{ echo 99; } die; isset既可以判断对象的属性是否存在,也可以判断数组的键名是否存在 未经允许不得转载:肥猫博客 » PHP检查对象或类中是否存在属性
超级小可爱
2023/02/20
4.2K0
JS中,如何检查对象是否为数组?
最近开源了一个 Vue 组件,还不够完善,欢迎大家来一起完善它,也希望大家能给个 star 支持一下,谢谢各位了。
前端小智@大迁世界
2021/02/02
7.2K0
JS中,如何检查对象是否为数组?
eclipse快速创建对象的补充的提示
案例: DriverManager.getConnection(url, user, password); 在其后按住“Ctrl+1”就会有提示直接创建new对象,如下: Connecti
兮动人
2021/06/11
4490
eclipse快速创建对象的补充的提示
java8之提取集合中每个对象的属性
要提取属性的话,用Stream中的map,然后使用方法引用,就可以了 例如Student类中有name属性
周杰伦本人
2023/10/12
3120
线程安全集合类中的对象是安全的么?
之前的文章Java并发BUG基础篇中提到过线程安全的集合类如CopyOnWriteArrayList、ConcurrentHashMap等的使用,以及线程安全类的几种创建方法:
FunTester
2020/04/03
6370
mp对象集合in查询
简单说明一下:此处是将入参的list获取到类型,根据表字段和list进行遍历,获取lambda进行取值,然后进行in以及or查询
阿超
2023/02/28
6420
mp对象集合in查询
javalist集合转换数组_集合对象转数组
原链接:https://stackoverflow.com/questions/157944/create-arraylist-from-array
全栈程序员站长
2022/09/25
6460
java8提取对象集合中的一项属性
  java都快出15了,我才开始写8,感觉跟不上时代了[捂脸],如果使用循环的方法提取,比较复杂,代码较多,尝试使用java8提取
彼岸舞
2020/11/03
1.9K0
eclipse中Git的使用
Eclipse从LUNA版本开始默认支持了GIT客户端,可以在导航菜单中windows --> preferences搜索git查看git相关配置。 Eclipse中对于git的操作基本都在右键菜单Team中。
全栈程序员站长
2022/08/04
2K0
eclipse中Git的使用
mybatis查询返回一个对象中带有集合
常用的属性就不说了,特别要注意的是ofType这个要指向各自表的实体类,然后子表的column属性不要和主表重名,一旦重名就会出问题,不知道是不是我配置的问题,希望有大佬指教,反正不重名就可以 接下来就是查询语句了,很简单,只要别名和上面resultMap对的上就ok
星辰sea
2022/10/29
1.9K0
用户代码未处理MetadataException
最近在用EF搭框架的过程中,遇到了很多问题,大部分都是出现在配置文件中,比如说下面这个问题:
全栈程序员站长
2022/08/09
3120
用户代码未处理MetadataException
怎么去掉eclipse对注释的字母语法错误的检查?
操作如下图所示:
黑泽君
2018/10/11
1.2K0
java中的集合
ArrayList和LinkedList的异同? 答:二者都线程不安全,相对线程安全的Vector,执行效率高。此外,ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构。对于随机访问get和set,ArrayList优于LinkedList,因为LinkedList要移动指针。对于新增和删除操作add(特指插入)和remove,LinkedList比较占优势,因为ArrayList要移动数据。
全栈程序员站长
2022/07/18
1.6K0
java中的集合
点击加载更多

相似问题

在Rails3中,可以有一个多部分的form => true和use remote => true吗

22

remote => true和remote: true之间的差异

22

Rails3 + link_to(...,:remote => true) + IE 6/7不起作用

10

用remote=>true阻止Rails link_to吗?

22

:remote=>true的Rails问题

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文