如何排序和筛选ngTable日期(毫秒)的数据? [英] How to sort and filter ngTable date (milliseconds) data?

查看:306
本文介绍了如何排序和筛选ngTable日期(毫秒)的数据?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是pretty新Angularjs需要一些帮助,按降序排列,以及为表列过滤器以毫秒为单位整理日期。我创建了一个 plunker这里,但是当我在一些过滤器参数关键我不知道看到任何滤波的数据和该数据从表丢失。

请帮我整理日期列,做不区分大小写的搜索过滤器,下面我提供我的code。

 <表NG表=tableParams显示过滤器=真正的类=表>
  < TR NG重复=项目在$数据HEIGHT =10px的>
    < TD数据标题=日期过滤器={'项目[0]':'日期'}排序=项[0]'> {{翻译(项目[0])} }< / TD>
    < TD数据标题=计数的过滤器={'项目[1]:文本}排序=项目[1]> {{项目[1]}}< / TD>
  < / TR>
< /表>$ scope.translate =功能(值){
    如果(价值== NULL ||值==未定义)
        返回值;
    无功即monthNames =一月,二月,月,月,月,君,月,月,月,月,月,月];
    VAR数值指明MyDate =新的日期(值);
    返回myDate.getDate()++即monthNames [myDate.getMonth()] ++ myDate.getFullYear();
}
$ scope.tableParams =新ngTableParams({
    页面:1,//显示第一页
    数:10 //每页计
},{
    总:数据$ scope.tasksRunDataForTable.length,//长度
    的getData:函数($延迟,则params){
        //使用内置的角度过滤器
        VAR sortedData = params.sorting()?
                            $过滤器('排序依据')($ scope.tasksRunDataForTable,params.orderBy()):
                            $ scope.tasksRunDataForTable;
        VAR orderedData = params.filter()?
               $过滤器('过滤器')(sortedData,params.filter()):
               sortedData;
        params.total(orderedData.length); //设置为总重计算分页
        $ defer.resolve(orderedData.slice((params.page() - 1)* params.count(),params.page()* params.count()));
    }
});

更新

我能够得到计数过滤器的工作,但迄今没有运气和两列排序。 更新plunker

 < TD数据标题=计数的过滤器={1:文本}排序=1> {{项目[ 1]}}&下; / TD>


解决方案

日期排序

这是不是ngTable的问题,而是如何为排序依据作品的基本角度滤波器。

只要使用的valueOf()[0] 的valueOf()[1] 分别,其中0安培; 1是你内心的数组索引。
下面是HTML,也没有必要改变你的getData回调。

 <表NG表=tableParams显示过滤器=真正的类=表>
    < TR NG重复=项目在$数据HEIGHT =10px的>
        < TD数据标题=日期过滤器={'0':'文字'}排序=的valueOf()[0]> {{项目[0] |日期:'D MMM YYYY HH:MM'}}< / TD>
        < TD数据标题=计数的过滤器={1:文本}排序=的valueOf()[1]> {{项目[1]}}< / TD>
    < / TR>
< /表>

请注意,您不需要翻译为$ P $从毫秒psenting日期,因为这是由其它角度过滤器日期的支持。

又见此主题相关职位
http://stackoverflow.com/a/15858739/61577

日期过滤(从字符串)

为了实现从日期过滤你需要使用定制的 comperator 功能的控制器上过滤时作为第三个参数。像这样的东西就可以了。

  VAR dateComperator =功能(OBJ,文字){
   VAR valueAsText = OBJ +'';
    如果(valueAsText.length == 13){//必须是毫秒。
      valueAsText = $过滤器('日期')(OBJ,倒是MMM YYYY HH:MM');
    }
    回报!文本|| (物镜&放大器;&放大器; valueAsText.toLowerCase()的indexOf(text.toLowerCase())-1个);
};

然后在你的控制器的getData回调:

 的getData:功能($延迟,则params){
        //使用内置的角度过滤器
        VAR sortedData = params.sorting()?
                            $过滤器('排序依据')($ scope.tasksRunDataForTable,params.orderBy()):
                            $ scope.tasksRunDataForTable;
        变种filterInfo = params.filter();
        变种比较器=(filterInfo&放大器;&放大器; filterInfo [0])? dateComparer:未定义;
        $ log.log(angular.toJson(filterInfo))
        VAR orderedData = filterInfo?
               $过滤器('过滤器')(sortedData,filterInfo,比较器):
               sortedData;
        params.total(orderedData.length); //设置为总重计算分页
        $ defer.resolve(orderedData.slice((params.page() - 1)* params.count(),params.page()* params.count()));
    }

更新:更新了答案,解决问题的过滤。
更新2:更新了答案,解决与两个日期搜索时,数

下面是完整的plunker http://plnkr.co/edit/D2n7MdAfugXpKeKOGosL? p = preVIEW

希望这有助于。

I am pretty new to Angularjs need some help with sorting date in milliseconds in descending order as well as a filter for the table columns. I created a plunker here but when I key in some filter param I do not see any filtered data and the data is lost from table.

Please help me in sorting date column and doing a case insensitive filter search, below I am providing my code.

<table ng-table="tableParams" show-filter="true" class="table" >
  <tr ng-repeat="item in $data" height="10px">
    <td data-title="'Date'" filter="{ 'item[0]': 'date' }" sortable="'item[0]'">{{translate(item[0])}}</td>
    <td data-title="'Count'" filter="{ 'item[1]': 'text' }" sortable="'item[1]'">{{item[1]}}</td>
  </tr>
</table>

$scope.translate = function(value) {
    if (value == null || value == undefined)
        return value;
    var monthNames = [ "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec" ];
    var myDate = new Date( value );
    return myDate.getDate() + " " + monthNames[myDate.getMonth()] + " "+myDate.getFullYear();
}
$scope.tableParams = new ngTableParams({
    page: 1,            // show first page
    count: 10          // count per page        
}, {
    total: $scope.tasksRunDataForTable.length, // length of data
    getData: function($defer, params) {
        // use build-in angular filter
        var sortedData = params.sorting() ?
                            $filter('orderBy')($scope.tasksRunDataForTable, params.orderBy()) :
                            $scope.tasksRunDataForTable;
        var orderedData = params.filter() ?
               $filter('filter')(sortedData, params.filter()) :
               sortedData;
        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

Update

I am able to get filter work on count, but no luck with date and sorting on both columns. Updated plunker

<td data-title="'Count'" filter="{ '1': 'text' }" sortable="'1'">{{item[1]}}</td>

解决方案

Date Sorting

This is not an issue of the ngTable but how the underlying angular filter for 'OrderBy' works.

Just use valueOf()[0], valueOf()[1] respectively where 0 & 1 are the indexes for your inner array. Here is the html and there is no need to change your getData callback.

<table ng-table="tableParams" show-filter="true" class="table" >
    <tr ng-repeat="item in $data" height="10px">
        <td data-title="'Date'" filter="{ '0': 'text' }" sortable="valueOf()[0]">{{ item[0] | date: 'd MMM yyyy HH:mm' }}</td>
        <td data-title="'Count'" filter="{ '1': 'text' }" sortable="valueOf()[1]">{{ item[1] }}</td>
    </tr>
</table>

Please note that you don't need a translate for presenting your dates from milliseconds as this is supported by an other angular filter 'date'.

See also this somehow related post http://stackoverflow.com/a/15858739/61577

Date Filtering (from string)

In order to achieve filtering from date you need to use a custom "comperator" function as a third argument when filtering on the controller. Something like this will do the trick

var dateComperator = function(obj, text) {
   var valueAsText = obj + '';
    if (valueAsText.length == 13) { // must be milliseconds.
      valueAsText = $filter('date')(obj, 'd MMM yyyy HH:mm');
    } 
    return !text || (obj && valueAsText.toLowerCase().indexOf(text.toLowerCase()) > -1);
};

then on your controller getData callback:

    getData: function($defer, params) {
        // use build-in angular filter
        var sortedData = params.sorting() ?
                            $filter('orderBy')($scope.tasksRunDataForTable, params.orderBy()) :
                            $scope.tasksRunDataForTable;
        var filterInfo = params.filter();
        var comparer = (filterInfo && filterInfo['0']) ? dateComparer : undefined;
        $log.log(angular.toJson(filterInfo))
        var orderedData = filterInfo ?
               $filter('filter')(sortedData, filterInfo, comparer) :
               sortedData;
        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }

UPDATE: updated the answer to tackle the filtering issue. UPDATE 2: Updated the answer to tackle when searching with both date and count.

here is the complete plunker http://plnkr.co/edit/D2n7MdAfugXpKeKOGosL?p=preview

Hope this helps.

这篇关于如何排序和筛选ngTable日期(毫秒)的数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆