How to sort and filter ngTable date data (milliseconds)?

Question

I am fairly new to Angularjs need some help sorting dates in milliseconds in descending order, as well as a filter for table columns. I created a plunker here , but when I enter some filter parameter, I do not see the filtered data, and the data is lost from the table.

Please help me in sorting the date column and do a case-insensitive filter search below, I provide 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 can get the filter work by account, but not luck with the date and sorting by both columns. Updated plunker

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

Answer 1

ngTable, angular "OrderBy".

valueOf()[0], valueOf()[1] , 0 1 - . html getData.

<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>

, , angular.

- fooobar.com/questions/68422/...

( )

, " comperator" . -

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

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: , . 2: .

plunker http://plnkr.co/edit/D2n7MdAfugXpKeKOGosL?p=preview

, .

Answer 2

:

        $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: STATIC_CONST.COUNT_PAGAING,         // count per page IMPORTANT 
        sorting: { Id: "desc" }

    }, {
        total: data.length, // length of data
        paginationMaxBlocks: 13,
        paginationMinBlocks: 2,
        getData: function ($defer, params) {

            var filters = angular.copy( params.filter() );
            //var filters = params.filter();
            var filteredData = data;

            //Custom filters:
            if (typeof filters['LastUpdateDate'] !== 'undefined') {
                filteredData = $filter('filterByUI')(filteredData, 'LastUpdateDate', filters['LastUpdateDate'], $filter('date'), ['dd.MM.yyyy']);
                delete filters['LastUpdateDate'];
            }

            //General filters:
            if (filters) {
                // use build-in angular filter
                filteredData = $filter('filter')(filteredData, filters);
            }


            //if (filters.FromDate) {
            //    filteredData = $filter('filterDates')(data, filters.FromDate);
            //}

            var orderedData = params.sorting() ?
              $filter('orderBy')(filteredData, params.orderBy()) :
              filteredData;


            params.total(orderedData.length); // set total for recalc pagination
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

Layout.html:

<table ng-table="tableParams" show-filter="true" class="table" >
<tr ng-repeat="item in $data" height="10px">
    <td data-title="'Date'" filter="{ 'LastUpdateDate': '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>

\ Apps\app.module.js:

app.filter("filterByUI", function () {

    debugger;

    return function (arrayData, dateKey, dateValue, filterFunction, filterFunctionParams) {
        var returnarr = [];
        returnarr = arrayData.filter(function (element) {
            var evalCode = "filterFunction( element." +dateKey;
            filterFunctionParams.forEach(function (element, index, array) {
                evalCode += ", filterFunctionParams["+index+"]";
            });
            evalCode += ")";

            try{
                var dudi86 = eval(evalCode);

                if(typeof dudi86 === 'number') {
                    dudi86 = dudi86.toString();
                }

                if(typeof dudi86 === 'string') {
                    return dudi86.toLowerCase().indexOf( dateValue.toString().toLowerCase() ) > -1;
                }

                if( Array.isArray(dudi86) ) {
                    if( Array.isArray(dateValue) ) {
                        return dateValue.every( function(val) { return  dudi86.indexOf(val) >= 0; } );
                    }

                    if(typeof dateValue === 'string' || typeof dateValue === 'number') {
                        //TODO: Consider this case:
                        return dudi86.indexOf( dateValue.toString().toLowerCase() ) > -1;
                    }
                }



            }catch(e){
                console.log("app.filterByUI: Error on evaluating: " +evalCode);
            }


            return false;

        });

        return returnarr;

    }
});