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!

Improve this question
3
  • 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, 2015 at 11:20
  • Are you facing any errors on the console?
    – Saket Joshi
    May 5, 2015 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, 2015 at 12:29

1 Answer 1

Reset to default
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
1
  • Thank you very much! Variable code must be a string else it doesn't work.
    – DarkSkull
    May 5, 2015 at 13:14

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .