As someone new to angular js, I am embarking on the task of creating a simple grid with pagination. Within my project, there is a factory object called Entities with a specific structure:
//app module
angular.module('project',['ngRoute','controllers', 'services'])
.config(['$routeProvider', function($routeProvider){
$routeProvider
.when('/',{
controller:'ListCtrl',
templateUrl:'list.html'
})
.when('/edit/:id',{
controller:'EditCtrl',
templateUrl:'form.html'
})
.otherwise({
redirectTo:'/'
})
}]);
//controller
angular.module('controllers',[])
.controller('ListCtrl',['$scope','Entities',function($scope ,Entities){
Entities.get(function(data){
$scope.entityCaption='Projects';
$scope.entities=data;
});
}])
// services module
angular.module('services', [])
.value('dataConfigs',
{
fetchUrl:'../fetch.php',
saveUrl:'../save.php',
entityName:'projects'
}
)
.factory('Entities', ['$http','$filter','dataConfigs', function($http,$filter,dataConfigs){
return{
pageNo:1,
rows:2,
sortBy:'id',
sortOrder:'desc',
get: function(callback){
$http({
url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&page='+this.pageNo+'&rows='+this.rows+'&sidx='+this.sortBy+'&sord='+this.sortOrder+'&format=assoc',
method: "POST"
}).success(function (data) {
callback(data);
});
},
getById:function(id,callback){
$http({
url: dataConfigs.fetchUrl + '?method=grid&table='+dataConfigs.entityName+'&where_id='+id+'&page=1&rows=1&sidx=id&sord=asc&format=assoc',
method: "POST"
}).success(function (data) {
if(data.records==1)
callback(data.rows[0]);
else
callback({});
});
},
prevPage:function(){
this.pageNo--;
},
setPage:function(){
//set pageNo to N
},
nextPage:function(){
this.pageNo++;
}
};
}]);
I am seeking guidance on how to utilize the Entities factory object within the ListCtrl's list.html view, for example:
list.html
<div class="pagination pull-right">
<ul>
<li ng-class="{disabled: Entities.pageNo == 0}">
<a href ng-click="Entities.prevPage();prePage()">« Prev</a>
</li>
<li ng-repeat="n in range(entities.total)" ng-class="{active: n == Entities.pageNo}" ng-click="Entities.setPage()">
<a href ng-bind="n + 1">1</a>
</li>
<li ng-class="{disabled: Entities.pageNo == entities.total - 1}">
<a href ng-click="Entities.nextPage()">Next »</a>
</li>
</ul>
</div>
I'm unsure about the feasibility of this approach. Please provide insights on how to address this issue. My goal is to connect the pagination with the Entities object while ensuring that all pagination and sorting operations are performed server-side, allowing the object to retain page numbers and sort orders when switching between Edit and List views.
The server-side script provides information such as the number of records, pages, and rows for the current page, for instance:
{"page":"1","total":4,"records":"8","rows":[..]}
Another key aspect is to observe the values of pageNo, sortOrder, and sortBy attributes within the Entities object.