2

I tried to edit this code http://www.oyecode.com/2013/06/getting-started-with-angularjs-on.html, that implements a table in angualarJS with filtering and sorting functions. Sortiting works fine but filtering doesn't. Here is my VisualForce page:

<apex:page controller="ConfrontiRicaviController"  standardStylesheets="false" sidebar="false" >
<html ng-app="ConfrontiRicavi">
    <head>
        <meta charset="utf-8"/>
        <!--link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.no-icons.min.css" rel="stylesheet"/-->
        <link href="https://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet"/>
        <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js"/>

        <style>  
            .search-query {                
            background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAJ5JREFUeNpi+P//PwMQMANxERCfAeI/UBrEZwbJQ9WAFR0A4u1AbAnEbFB6O1ScGaawGoi3wHQiYyBYDZKHKbwHxLo4FOqC5GEKf4Ksw6EQ5IyfIDYTkPEUiNUZsAOQ+F9GRkYJEKcFiDficSOIcRjE4QTiY0C8DuRbqAJLKP8/FP9kQArHUiA+jySJjA8w4LAS5KZd0MAHhaccQIABALsMiBZy4YLtAAAAAElFTkSuQmCC);
            background-repeat: no-repeat;
            background-position: 125px 4px;
            }
            body {
            padding: 15px;
            }

            table {
            border-collapse: separate;
            border-spacing: 0 2px;
            }

            thead th {
            background-color: #1797c0;
            color: white;
            font-size: 14px;
            font-family: Arial,Helvetica,sans-serif;
            }
            thead tr {
            height: 23px;
            }

            tbody tr #lista {
            font-size:12px;
            height:5px;
            }
            tbody tr #lista td{
            vertical-align: inherit;
            }
            #linline li {
            display: inline;
            }
            tr:nth-child(odd){ background-color:#ffffff; }
            tr:nth-child(even){ background-color:#e3efff; }

            tr td:first-child,
            tr th:first-child {
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;

            }

            tr td:last-child,
            tr th:last-child {
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;
            }

            #angular_table{

            font-size: 17px;
            width: 100%;
            }
            .oRight#bodyCell{
            padding-top: 9px;
            }
        </style>
    </head>
    <!--- Javascript -->
    <script type="text/javascript">

    var myapp = angular.module('ConfrontiRicavi', []);
    var sortingOrder = 'projectName';

    var contrl=myapp.controller('ctrlRead', function ($scope, $filter) {

        $scope.sortingOrder = sortingOrder;
        $scope.reverse = false;
        $scope.filteredItems = [];
        $scope.groupedItems = [];
        $scope.itemsPerPage = 15;
        $scope.pagedItems = [];
        $scope.currentPage = 0;
        $scope.items ={!lstRic};

        var searchMatch = function (haystack, needle) {
            if (!needle) {
                return true;
            }
            return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
        };

        // init the filtered items
        $scope.search = function () {
            $scope.filteredItems = $filter('filter')($scope.items, function (item) {
                for (var attr in item) {
                    if (searchMatch(item[attr], $scope.query))
                        return true;
                }
                return false;
            });
            // take care of the sorting order
            if ($scope.sortingOrder !== '') {
                $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
            }
            $scope.currentPage = 0;
            // now group by pages
            $scope.groupToPages();
        };

        // calculate page in place
        $scope.groupToPages = function () {
            $scope.pagedItems = [];

            for (var i = 0; i < $scope.filteredItems.length; i++) {
                if (i % $scope.itemsPerPage === 0) {
                    $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [$scope.filteredItems[i]];
                } else {
                    $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
                }
            }
        };

        $scope.range = function (start, end) {
            var ret = [];
            if (!end) {
                end = start;
                start = 0;
            }
            for (var i = start; i < end; i++) {
                ret.push(i);
            }
            return ret;
        };

        $scope.prevPage = function () {
            if ($scope.currentPage > 0) {
                $scope.currentPage--;
            }
        };

        $scope.nextPage = function () {
            if ($scope.currentPage < $scope.pagedItems.length - 1) {
                $scope.currentPage++;
            }
        };

        $scope.setPage = function () {
            $scope.currentPage = this.n;
        };

        // functions have been describe process the data for display
        $scope.search();

        // change sorting order
        $scope.sort_by = function (newSortingOrder) {
            if ($scope.sortingOrder == newSortingOrder)
                $scope.reverse = !$scope.reverse;

            $scope.sortingOrder = newSortingOrder;

            // icon setup
            $('th i').each(function () {
                // icon reset
                $(this).removeClass().addClass('icon-sort');
            });
            if ($scope.reverse)
                $('th.' + new_sorting_order + ' i').removeClass().addClass('icon-chevron-up');
            else
                $('th.' + new_sorting_order + ' i').removeClass().addClass('icon-chevron-down');
        };

    });

    contrl.$inject = ['$scope', '$filter'];

    </script>
    <body>  
        <div ng-controller="ctrlRead">

            <div style="text-align:center;font-size:18px;">Elenco progetti senza ricavo</div>

            <div >
                <input type="text" ng-model="query" ng-change="search()" class="input-mysize  search-query" placeholder="Search"/>
            </div>


            <table class="table  table-hover" id="angular_table" border="1">
                <thead>
                    <tr>
                        <th class="code">Codice&nbsp;<a ng-click="sort_by('code')"><i class="icon-sort"></i></a></th>
                        <th class="projectName">Nome progetto&nbsp;<a ng-click="sort_by('projectName')"><i class="icon-sort"></i></a></th>
                        <th class="month">Primo mese mancante&nbsp;<a ng-click="sort_by('month')"><i class="icon-sort"></i></a></th>                            
                    </tr>
                </thead>


                <tbody>
                    <tr ng-repeat="item in pagedItems[currentPage] | orderBy:sortingOrder:reverse " id="lista">
                        <td >{{item.code}}</td>
                        <td style="text-align: -webkit-left;"> <a href="https://cs15.salesforce.com/{{item.id}}" target="_blank">{{item.projectName}}</a></td>
                        <td>{{item.month}}</td>

                    </tr>
                </tbody>
            </table>
        </div>
        <div class="pagination pagination-large pull-left" >
            <ul id="linline">
                <li ng-class="{disabled: currentPage == 0}" id="linline">
                    <a ng-click="prevPage()">&lt; Prev</a>
                </li>
                <li ng-repeat="n in range(pagedItems.length)"
                    ng-class="{active: n == currentPage}"
                    ng-click="setPage()" id="linline">
                    <a ng-bind="n + 1">1</a>
                </li>
                <li ng-class="{disabled: currentPage == pagedItems.length - 1}" id="linline">
                    <a ng-click="nextPage()">Next &gt;</a>
                </li>
            </ul>
        </div>
    </body>
</html>

And here is my controller:

public with sharing class ConfrontiRicaviController {
public String ProceedsList { get; set; }


public class ProceedWrap {
    ProceedWrap() {
        code = 0;
    }
    public string id;
    public string projectName;
    public string month;
    public Decimal code;

}

public String getlstRic() {
    List <ProceedWrap > lstWrap = new List <ProceedWrap>();
    List <B2W_Ricavo_Mensile__c> lstRic = [SELECT B2W_Project__r.Id, B2W_Project__r.Name, B2W_Month__c, B2W_Project__r.B2W_Codice_COGEN__c FROM B2W_Ricavo_Mensile__c ORDER BY B2W_Month__c];
    ProceedWrap pWrap;
    for (B2W_Ricavo_Mensile__c r: lstRic) {
        pWrap = new ProceedWrap();

        pWrap.Id = r.B2W_Project__r.Id;
        pWrap.projectName = r.B2W_Project__r.Name;
        pWrap.month = r.B2W_Month__c;
        if(r.B2W_Project__r.B2W_Codice_COGEN__c != null)
            pWrap.code = r.B2W_Project__r.B2W_Codice_COGEN__c;

        lstWrap.add(pWrap);
    }

    return JSON.serialize(lstWrap);
 }

}

Can anyone know how I resolve? Thanks!

  • DarkSkull, is there an indication that this is related to this being in Visualforce ? That'd be essential for anyone trying to help out. Please keep in mind that this site is dedicated to questions related to salesforce products/code/platforms. – Samuel De Rycke May 5 '15 at 11:20
  • Are you facing any errors on the console? – Saket Joshi May 5 '15 at 11:31
  • @SaketJoshi here is my error in the console: code Error: haystack.toLowerCase is not a functioncode. I can't copy all errors. The strange fact is that with default objects Account works. Did you have any idea? – DarkSkull May 5 '15 at 12:29
0

The error Error: haystack.toLowerCase is not a function might be occurring because of the data type issues. What I see from your code is you are iterating over every attribute of your list item, but there is a data type Decimal; which does not support toLowerCase() method.

This might be the cause of the issue, try changing the data type and see if it works

| improve this answer | |
  • Thank you very much! Variable code must be a string else it doesn't work. – DarkSkull May 5 '15 at 13:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.