function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Brandon Barb 4Brandon Barb 4 

Pagination for Remote Object?

I have created a visualforce page that displays an object and allows searching/sorting of the list with AngularJS and remote objects. 

How would I go about adding pagination to my list? My code is below. 

Thanks for any help you can provide!

 

<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
<style>
body { font-size: 12px !important; }
</style>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<apex:remoteObjects >
<apex:remoteObjectModel name="con_AppCatalog__c" fields="Name,Branch__c,Id,Functional_Area__c,Description__c" jsShorthand="dbContacts"/>
</apex:remoteObjects>
<script>
                    var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope) {
                $scope.sortType = 'Name'; // set the default sort type
                $scope.sortReverse = false;
                $scope.contacts=[];
                $scope.searchText='';
                $scope.fetchContacts = function() {
                    var dbCon = new SObjectModel.dbContacts();
                    console.log(dbCon);
                    dbCon.retrieve({where: {
                        or:{
                            Name: {
                                like: '%'+$scope.searchText+'%'
                            },
                            Branch__c: {
                                like: '%'+$scope.searchText+'%'
                            }
                        }
                    },
                                    limit: 500
                                   },
                                   function(err, records, event){
                                       $scope.$apply(function () {
                                           if(err) {
                                               alert(err.message);
                                           }
                                           else {
                                               $scope.contacts.splice(0,$scope.contacts.length);
                                               records.forEach(function(record) {
                                                   $scope.contacts.push({"Name" :record.get("Name"),"Id" :record.get("Id"),"Functional_Area__c":record.get("Functional_Area__c"),"Description__c":record.get("Description__c"),"Branch__c":record.get("Branch__c")}); // it was % in place of $ with scope earlier
                                               });
                                           }
                                       });
                                   });
                };
            });
            

            </script>
</head>

<body>
<div class="container" ng-app="myApp" ng-controller="myCtrl" ng-init="fetchContacts()">

<div class="col-sm-4 pull-left">
<div class="col-sm-2">
<label for="searchText">Search:</label>
</div>
<div class="col-sm-10">
<input class="form-control" type="text" ng-model="searchText" id="searchText" ng-change="fetchContacts()"/>
</div>
</div>

<table class="table table-bordered table-striped">
<thead><tr>
<th>
<a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
First Name
<span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Branch__c'; sortReverse = !sortReverse">
Branch
<span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
Functional Area
<span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
<th>
<a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
Description
<span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
<span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in contacts | orderBy:sortType:sortReverse">
<td><a href="https://toolingorg-cbpoit--toolingsand.cs32.force.com/s/detail/{{ c.Id }}"> {{ c.Name }} </a></td>
<td>{{ c.Branch__c }}</td>
<td>{{ c.Functional_Area__c }}</td>
<td>{{ c.Description__c }}</td>
</tr>
</tbody>
</table>
</div>
</body>


</html>
</apex:page>

Raj VakatiRaj Vakati
You need to use some plugin-ins 

Please refer this link 

http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview
Brandon Barb 4Brandon Barb 4
Hey Raj, thanks for the help again! This is exactly what I'm looking for, but I'm running into trouble trying to get it to work. Would you know how I could incorporate that into my code?
Raj VakatiRaj Vakati
<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false">
    <style>
        body { font-size: 12px !important; }
    </style>
    <html>
        <head>
            <title>Testing</title>
            <meta charset="utf-8"/>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
            
            <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
                <script data-require="angular.js@*" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
            <script data-require="ui-bootstrap@*" data-semver="0.12.1" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
            
            
            <apex:remoteObjects >
                <apex:remoteObjectModel name="Contact" fields="Name,Phone,Id" jsShorthand="dbContacts"/>
                    </apex:remoteObjects>
                <script>
                    var app = angular.module('myApp', ['ui.bootstrap']);
            app.controller('myCtrl', function($scope) {
                $scope.sortType = 'Name'; // set the default sort type
                $scope.sortReverse = false;
                $scope.contacts=[];
                $scope.searchText='';
                $scope.currentPage = 1;
                $scope.numPerPage = 5;
                $scope.maxSize = 5;
                $scope.filteredContacts = [];
                
                $scope.fetchContacts = function() {
                    var dbCon = new SObjectModel.dbContacts();
                    console.log(dbCon);
                    dbCon.retrieve({ limit: 500
                                   },
                                   function(err, records, event){
                                       $scope.$apply(function () {
                                           if(err) {
                                               alert(err.message);
                                           }
                                           else {
                                               $scope.contacts.splice(0,$scope.contacts.length);
                                               records.forEach(function(record) {
                                                   $scope.contacts.push({"Name" :record.get("Name"),"Id" :record.get("Id"),"Phone":record.get("Phone")
                                                                        }); // it was % in place of $ with scope earlier
                                               });
                                               
                                               
                                               $scope.$watch('currentPage + numPerPage', function() {
                                                   var begin = (($scope.currentPage - 1) * $scope.numPerPage)
                                                   , end = begin + $scope.numPerPage;
                                                   
                                                   $scope.filteredContacts = $scope.contacts.slice(begin, end);
                                               });
                                               
                                               
                                           }
                                       });
                                   });
                };
            });
            
            
            </script>
        </head>
        
        <body>
            <div class="container" ng-app="myApp" ng-controller="myCtrl" ng-init="fetchContacts()">
                
                <div class="col-sm-4 pull-left">
                    <div class="col-sm-2">
                        <label for="searchText">Search:</label>
                    </div>
                    <div class="col-sm-10">
                        <input class="form-control" type="text" ng-model="searchText" id="searchText" ng-change="fetchContacts()"/>
                    </div>
                </div>
                
                <table class="table table-bordered table-striped">
                    <thead><tr>
                        <th>
                            <a href="#" ng-click="sortType = 'Name'; sortReverse = !sortReverse">
                                First Name
                                <span ng-show="sortType == 'Name' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Name' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        <th>
                            <a href="#" ng-click="sortType = 'Branch__c'; sortReverse = !sortReverse">
                                Branch
                                <span ng-show="sortType == 'Branch__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Branch__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        <th>
                            <a href="#" ng-click="sortType = 'Functional_Area__c'; sortReverse = !sortReverse">
                                Functional Area
                                <span ng-show="sortType == 'Functional_Area__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Functional_Area__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        <th>
                            <a href="#" ng-click="sortType = 'Description__c'; sortReverse = !sortReverse">
                                Description
                                <span ng-show="sortType == 'Description__c' && !sortReverse" class="glyphicon glyphicon-sort-by-attributes"></span>
                                <span ng-show="sortType == 'Description__c' && sortReverse" class="glyphicon glyphicon-sort-by-attributes-alt"></span>
                            </a>
                        </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="c in filteredContacts | orderBy:sortType:sortReverse">
                            <td><a href="https://toolingorg-cbpoit--toolingsand.cs32.force.com/s/detail/{{ c.Id }}"> {{ c.Name }} </a></td>
                            <td>{{ c.Phone }}</td>
                        </tr>
                    </tbody>
                    
                </table>
                <pagination 
                            ng-model="currentPage"
                            total-items="contacts.length"
                            max-size="maxSize"  
                            boundary-links="true">
                </pagination>
            </div>
            
        </body>
        
        
    </html>
</apex:page>