Incorporating Code for Pagination

I have created a visualforce page that displays an object and allows searching/sorting of the list with AngularJS and now I am trying to add pagination.

Here is a perfect example of what I'm looking for - http://plnkr.co/edit/81fPZxpnOQnIHQgp957q?p=preview

How would I incorporate this code into my own (below)?

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

March 24, 2018
·
Answer
·
Like
0
·
Follow
1

Raj Vakati
Working Copy .. Change object name and fields in remote objects

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

March 24, 2018
·
Like
1
·
Dislike
0

Brandon Barb 4
Thank you Raj! The paging works! The only thing (which I'm just now noticing), is that my object has ~350 records, but my initial code only pulls 100. And when I use pagination, it only pulls 50. Yet I'm still able to search for the records that aren't showing, and they then appear. Any ideas?

March 24, 2018
·
Like
0
·
Dislike
0

Brandon Barb 4
Ahh nevermind, just found out that the 100 is the maximum in a batch of results. Bummer. I wonder if there's a workaround for this

March 24, 2018
·
Like
0
·
Dislike
0

Raj Vakati
Yes .. Instead of the Remote Object .. use apex controller to fetch data and use action function

March 24, 2018
·
Like
0
·
Dislike
0

Raj Vakati
Sample code is here .. You need to fix it

public class exampleCon { String uname; public String getUsername() { return uname; } public List<Contact> sayHello() { // uname = UserInfo.getName(); return [Select Id , Name ,Phone from Contact]; } public void setState(String n) { state = n; } public String getState() { return state; } public PageReference methodOne() { return null; } private String state = 'no'; }

<apex:page applyHtmlTag="false" applyBodyTag="false" showHeader="false" sidebar="false" standardStylesheets="false" controller="exampleCon"> <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:form> <apex:actionFunction name="sayHello" action="{!sayHello}" rerender="out" status="myStatus"/> </apex:form> <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 arr =sayHello(); arr.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>

March 24, 2018
·
Like
0
·
Dislike
0

Brandon Barb 4
Hey Raj, I tried it out with the standard Contact object and I get this error when I try to preview -
Return type of an Apex action method must be a PageReference. Found: visualforce.el.VisualforceArrayList

March 24, 2018
·
Like
0
·
Dislike
0

Raj Vakati
Close this thread well. we are able fix this issue

March 26, 2018
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

Incorporating Code for Pagination

You need to sign in to do that.