Tips for organizing and refining ngTable data that is stored in milliseconds?

Question

Tips for organizing and refining ngTable data that is stored in milliseconds?

I'm new to Angularjs and I could use some assistance with sorting dates in milliseconds in descending order, as well as implementing a filter for the table columns. I've set up a plunker example, but when I enter a filter parameter, the data doesn't seem to be filtered properly, and it disappears from the table.

Can someone help me with sorting the date column and setting up a case-insensitive filter search? Below is the code I am currently using:

<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,
    count: 10       
}, {
    total: $scope.tasksRunDataForTable.length,
    getData: function($defer, params) {
        
        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);
        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }
});

Update

I managed to get the filter working for the count column, but I'm still struggling with filtering dates and sorting on both columns. Here's the link to the updated plunker.

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

javascript angularjs ngtable

Answer 1

Answer №1

Sorting Dates

The issue at hand is not with ngTable itself, but rather the inner workings of the angular filter for 'OrderBy'.

To address this, simply utilize valueOf()[0] and valueOf()[1] where 0 & 1 represent the indexes of your inner array. Below is the HTML code that doesn't require any modifications to your getData callback function:

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

Note that there is no need to translate dates from milliseconds as it can be achieved using the 'date' angular filter.

For further reference, check out a related post on Stack Overflow:

Filtering Dates (from string)

To enable filtering based on dates, you'll need to implement a custom "comparator" function as the third argument when doing filtering on your controller. Here's an example snippet to get you started:

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

In your controller's getData callback function:

getData: function($defer, params) {
        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); 

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }

UPDATE: The answer has been updated to address filtering concerns. UPDATE 2: Further updates have been made to handle searching based on both date and count.

For a complete demo, refer to this plunker example: http://plnkr.co/edit/D2n7MdAfugXpKeKOGosL?p=preview

I hope this explanation proves helpful.

Answer 2

Sorting Dates

The issue at hand is not with ngTable itself, but rather the inner workings of the angular filter for 'OrderBy'.

To address this, simply utilize valueOf()[0] and valueOf()[1] where 0 & 1 represent the indexes of your inner array. Below is the HTML code that doesn't require any modifications to your getData callback function:

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

Note that there is no need to translate dates from milliseconds as it can be achieved using the 'date' angular filter.

For further reference, check out a related post on Stack Overflow:

Filtering Dates (from string)

To enable filtering based on dates, you'll need to implement a custom "comparator" function as the third argument when doing filtering on your controller. Here's an example snippet to get you started:

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

In your controller's getData callback function:

getData: function($defer, params) {
        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); 

        $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
    }

UPDATE: The answer has been updated to address filtering concerns. UPDATE 2: Further updates have been made to handle searching based on both date and count.

For a complete demo, refer to this plunker example: http://plnkr.co/edit/D2n7MdAfugXpKeKOGosL?p=preview

I hope this explanation proves helpful.

Answer 3

Answer №2

Here is the approach I took:

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

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

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

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

            //Applying General filters:
            if (filters) {
                // using built-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); // setting total for recalculating pagination
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

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

    }
});

Answer 4

Here is the approach I took:

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

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

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

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

            //Applying General filters:
            if (filters) {
                // using built-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); // setting total for recalculating pagination
            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });

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

    }
});

Tips for organizing and refining ngTable data that is stored in milliseconds?

Answer №1

Answer №2

Similar questions

Using Redis for pub/sub functionality within or outside of the io.connect callback

What is the best technique to incorporate dark/light mode in Bootstrap 5?

Utilizing the power of AngularJS directives along with the functionality of a

calling requestAnimationFrame from within a freshly created instance

I can't figure out why my unslider isn't adapting to the screen size. Check out the fiddle for more details

Execute asynchronous JavaScript request

Has the Angular 2 community established a standardized ecosystem?

Tips for identifying a pair of numbers (with varying ranges) in which one number must be present at all times

"Identify the protocol name (string) based on a specific port number in TCP/UDP communication

jQuery array objects are not compatible with Semantic UI transitions

What is the ideal location to set up Content Security Policy?

How to conditionally prevent event propagation to children in VueJs

Javascript's associative arrays: a versatile tool for data organization

Having trouble with Vue.js implementation of Bootstrap tab navigation?

What is the best way to test the output of HTML code in a unit test scenario

The shared global variable or store feature is currently not functioning as expected in Vue JS

Searching for specific items within an array of objects using Mongoose

Utilizing factory service within a decorator in AngularJS

Sending data between two elements when a jQuery event is triggered

When a React component mounts repeatedly, it can lead to complications within the useEffect hook