1

I have created the Visualforce for this use case. . I get work order details in table form, but paging and filtering in not working. My code as follows

  <div ng-controller="searchWOController">
    <p>Filter: <input class="form-control" type="text" ng-model="filter.$" /></p>

    <table ng-table="tableParams" template-pagination="custom/pager" class="table">
        <tr ng-repeat="wo in workOrderRes">
            <td data-title="'Work Order Name'" sortable="'name'">
                {{wo.name}}
            </td>
            <td data-title="'Priority'" sortable="'priority'">
                {{wo.priority}}
            </td>
            <td data-title="'Status'" sortable="'status'">
                {{wo.status}}
            </td>

        </tr>
    </table>

 <script type="text/ng-template" id="custom/pager">

        <ul class="pager ng-cloak">

          <li ng-repeat="page in pages"

                ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}"

                ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type">

            <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">&laquo; Previous</a>

            <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next &raquo;</a>

           </li>
           <li>
           </li>
        </ul>

    </script>
</div>
app.controller('searchWOController', function($scope,$filter,ngTableParams) {
  var workOrderObj = new WorkOrderModels.wo();  
  var workOrderResult=[];
  $scope.tableParams = new ngTableParams(
      {
        page: 1,            // show first page
        count: 10,           // count per page
        sorting: {name:'asc'}
      },
      {
        total: workOrderResult.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                    $filter('orderBy')(workOrderResult, params.orderBy()) :
                    workOrderResult;

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



     workOrderObj.retrieve({limit: 10}, function(err, records, event){
      if(err) {
              alert(err.message);
          }
          else {
              records.forEach(function(record) {
                      workOrderResult.push({name:record.get("Name"),priority:record.get("Priority__c")});
                      //alert(workOrderResult);

              });
          }
        $scope.$apply(function () {               
              $scope.workOrderRes = workOrderResult;
      });

    });
});


    app.controller('searchWOController', function($scope,$filter,ngTableParams) {
  var workOrderObj = new WorkOrderModels.wo();  
  var workOrderResult=[];
  $scope.tableParams = new ngTableParams(
      {
        page: 1,            // show first page
        count: 10,           // count per page
        sorting: {name:'asc'}
      },
      {
        total: workOrderResult.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                    $filter('orderBy')(workOrderResult, params.orderBy()) :
                    workOrderResult;

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



     workOrderObj.retrieve({limit: 10}, function(err, records, event){
      if(err) {
              alert(err.message);
          }
          else {
              records.forEach(function(record) {
                      workOrderResult.push({name:record.get("Name"),priority:record.get("Priority__c")});
                      //alert(workOrderResult);

              });
          }
        $scope.$apply(function () {               
              $scope.workOrderRes = workOrderResult;
      });

    });







});
11
  • @Tushar...where is the code sample here?
    – Ejaz
    Feb 1, 2016 at 10:14
  • there is an unmanaged package you can install and try. Feb 1, 2016 at 10:15
  • @Tushar ok. But i want to utilize angularJS functionality to built a generic table so that i can just pass the data i need and no need to write paging, sorting and filtering again & again. Thats why i am avoiding any third party plugins.
    – Ejaz
    Feb 1, 2016 at 10:31
  • this is not plugin. This is pure angular Js and SF solution. Just try it once. Feb 1, 2016 at 10:40

1 Answer 1

1

Here is some code for your reference.

VF page

 <div ng-app="myApp">
        <div ng-controller="TableCtrl">
            <div class="input-group">
                <input class="form-control" ng-model="searchText" placeholder="Search" type="search" ng-change="search()" /> <span class="input-group-addon">
          <span class="glyphicon glyphicon-search"></span>
    </span>
            </div>
            <table class="table  table-hover data-table myTable">
                <thead>
                    <tr>
                        <th class="EmpId"> <a href="#" ng-click="sort('EmpId',$event)">EmpId
                             <span class="{{Header[0]}}"></span>
                             </a>

                        </th>
                        <th class="name"> <a ng-click="sort('name')" href="#"> Name
                             <span class="{{Header[1]}}"></span></a>
                        </th>
                        <th class="Email"> <a ng-click="sort('Email')" href="#"> Email
                         <span class="{{Header[2]}}"></span></a>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="item in ItemsByPage[currentPage] | orderBy:columnToOrder:reverse">
                        <td>{{item.EmpId}}</td>
                        <td>{{item.name}}</td>
                        <td>{{item.Email}}</td>
                    </tr>
                </tbody>
            </table>
            <ul class="pagination pagination-sm">
                <li ng-class="{active:0}"><a href="#" ng-click="firstPage()">First</a>

                </li>
                <li ng-repeat="n in range(ItemsByPage.length)"> <a href="#" ng-click="setPage()" ng-bind="n+1">1</a>

                </li>
                <li><a href="#" ng-click="lastPage()">Last</a>

                </li>
            </ul>
            <div class="row">
                <div class="col-xs-3">
                    <input type="text" ng-model="newEmpId" class="form-control" placeholder="EmpId">
                </div>
                <div class="col-xs-3">
                    <input type="text" ng-model="newName" class="form-control" placeholder="Name">
                </div>
                <div class="col-xs-4">
                    <input type="email" ng-model="newEmail" class="form-control" placeholder="Email">
                </div>
                <div class="col-xs-1">
                    <button ng-click="add()" type="button" class="btn btn-primary"> <span class="glyphicon glyphicon-plus"></span>

                    </button>
                </div>
            </div>
        </div>
        <!-- Ends Controller -->
    </div>

Javascript Code

//Demo of Searching Sorting and Pagination of Table with AngularJS - Advance Example

var myApp = angular.module('myApp', []);

//Not Necessary to Create Service, Same can be done in COntroller also as method like add() method
myApp.service('filteredListService', function () {

    this.searched = function (valLists, toSearch) {
        return _.filter(valLists,

        function (i) {
            /* Search Text in all 3 fields */
            return searchUtil(i, toSearch);
        });
    };

    this.paged = function (valLists, pageSize) {
        retVal = [];
        for (var i = 0; i < valLists.length; i++) {
            if (i % pageSize === 0) {
                retVal[Math.floor(i / pageSize)] = [valLists[i]];
            } else {
                retVal[Math.floor(i / pageSize)].push(valLists[i]);
            }
        }
        return retVal;
    };

});

//Inject Custom Service Created by us and Global service $filter. This is one way of specifying dependency Injection
var TableCtrl = myApp.controller('TableCtrl', function ($scope, $filter, filteredListService) {

    $scope.pageSize = 4;
    $scope.allItems = getDummyData();
    $scope.reverse = false;

    $scope.resetAll = function () {
        $scope.filteredList = $scope.allItems;
        $scope.newEmpId = '';
        $scope.newName = '';
        $scope.newEmail = '';
        $scope.searchText = '';
        $scope.currentPage = 0;
        $scope.Header = ['', '', ''];
    }

    $scope.add = function () {
        $scope.allItems.push({
            EmpId: $scope.newEmpId,
            name: $scope.newName,
            Email: $scope.newEmail
        });
        $scope.resetAll();
    }

    $scope.search = function () {
        $scope.filteredList = filteredListService.searched($scope.allItems, $scope.searchText);

        if ($scope.searchText == '') {
            $scope.filteredList = $scope.allItems;
        }
        $scope.pagination();
    }

    // Calculate Total Number of Pages based on Search Result
    $scope.pagination = function () {
        $scope.ItemsByPage = filteredListService.paged($scope.filteredList, $scope.pageSize);
    };

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

    $scope.firstPage = function () {
        $scope.currentPage = 0;
    };

    $scope.lastPage = function () {
        $scope.currentPage = $scope.ItemsByPage.length - 1;
    };

    $scope.range = function (input, total) {
        var ret = [];
        if (!total) {
            total = input;
            input = 0;
        }
        for (var i = input; i < total; i++) {
            if (i != 0 && i != total - 1) {
                ret.push(i);
            }
        }
        return ret;
    };

    $scope.sort = function (sortBy) {
        $scope.resetAll();

        $scope.columnToOrder = sortBy;

        //$Filter - Standard Service
        $scope.filteredList = $filter('orderBy')($scope.filteredList, $scope.columnToOrder, $scope.reverse);

        if ($scope.reverse) iconName = 'glyphicon glyphicon-chevron-up';
        else iconName = 'glyphicon glyphicon-chevron-down';

        if (sortBy === 'EmpId') {
            $scope.Header[0] = iconName;
        } else if (sortBy === 'name') {
            $scope.Header[1] = iconName;
        } else {
            $scope.Header[2] = iconName;
        }

        $scope.reverse = !$scope.reverse;

        $scope.pagination();
    };

    //By Default sort ny Name
    $scope.sort('name');

});

function searchUtil(item, toSearch) {
    /* Search Text in all 3 fields */
    return (item.name.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.Email.toLowerCase().indexOf(toSearch.toLowerCase()) > -1 || item.EmpId == toSearch) ? true : false;
}

/*Get Dummy Data for Example*/
function getDummyData() {
    return [{
        EmpId: 2,
        name: 'Jitendra',
        Email: '[email protected]'
    }, {
        EmpId: 1,
        name: 'Minal',
        Email: '[email protected]'
    }, {
        EmpId: 3,
        name: 'Rudra',
        Email: '[email protected]'
    }, {
        EmpId: 21,
        name: 'Jitendra1',
        Email: '[email protected]'
    }, {
        EmpId: 11,
        name: 'Minal1',
        Email: '[email protected]'
    }, {
        EmpId: 31,
        name: 'Rudra1',
        Email: '[email protected]'
    }, {
        EmpId: 22,
        name: 'Jitendra2',
        Email: '[email protected]'
    }, {
        EmpId: 12,
        name: 'Minal2',
        Email: '[email protected]'
    }, {
        EmpId: 32,
        name: 'Rudra2',
        Email: '[email protected]'
    }, {
        EmpId: 23,
        name: 'Jitendra3',
        Email: '[email protected]'
    }, {
        EmpId: 13,
        name: 'Minal3',
        Email: '[email protected]'
    }, {
        EmpId: 33,
        name: 'Rudra3',
        Email: '[email protected]'
    }];
}

Reference Reference

1
  • @Tushar....thnx for your effort, but as i said i dont need to write code for searching, sorting, paging, filtering there is a mechanism using which we just need to pass the appropriate data and its length and all is handle by client libraries using angularjs. You can have a look at my code what i am trying to do. In this way it will be generic.
    – Ejaz
    Feb 1, 2016 at 11:44

You must log in to answer this question.

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