confusion in implementing http://jasonwatmore.com/post/2016/01/31/angularjs-pagination-example-with-logic-like-google -
http://jasonwatmore.com/post/2016/01/31/angularjs-pagination-example-with-logic-like-google have show 10 items per page on basis of ajax call. unable reach on condition ng-if="pager.pages.length" pagination panel not coming on screen. have function name fetchedtrans() through per ajax call can data server end each pages. have users array(client side) in array elements transaction array(server side). please suggest me appropriate solution this.
app.factory('pagerservice', function () { console.log("in pagerservice"); // service definition var service = {}; service.getpager = getpager; return service; // service implementation function getpager(totalitems, currentpage, pagesize) { // default first page currentpage = currentpage || 1; // default page size 10 pagesize = pagesize || 10; // calculate total pages var totalpages = math.ceil(totalitems / pagesize); var startpage, endpage; if (totalpages <= 10) { // less 10 total pages show startpage = 1; endpage = totalpages; } else { // more 10 total pages calculate start , end pages if (currentpage <= 6) { startpage = 1; endpage = 10; } else if (currentpage + 4 >= totalpages) { startpage = totalpages - 9; endpage = totalpages; } else { startpage = currentpage - 5; endpage = currentpage + 4; } } // calculate start , end item indexes var startindex = (currentpage - 1) * pagesize; var endindex = math.min(startindex + pagesize - 1, totalitems - 1); // create array of pages ng-repeat in pager control.......................... var pages = _.range(startpage, endpage + 1); // return object pager properties required view return { totalitems: totalitems, currentpage: currentpage, pagesize: pagesize, totalpages: totalpages, startpage: startpage, endpage: endpage, startindex: startindex, endindex: endindex, pages: pages }; } }); app.controller('dashctrl',function ($rootscope,$scope,$location,$filter,$stateparams,$state,$cookies,$http,pagerservice) { console.log("$location.search().param1"+$location.search().param1); $scope.check = function () { console.log("in check fn"); var mobilereg = /^(?:(?:\+|0{0,2})91(\s*[\-]\s*)?|[0]?)?[789]\d{9}$/; var digitreg = /^\d+$/; var dashno = { user_name: $cookies.get('user_name'), token: $cookies.get('token'), //mobile_no:$scope.dash.mobile }; if ($location.search().param1 == undefined) { console.log("$scope.dash.mobile"); dashno.mobile_no = $scope.dash.mobile; } else { console.log("in else"); dashno.mobile_no = $location.search().param1;//........ } $scope.mobile_no=dashno.mobile_no; if(mobilereg.test($scope.mobile_no)&&digitreg.test($scope.mobile_no)){ $scope.dashform1hide = true; $http.post('some url', dashno).success(function (data) { if(data.success==1){ $scope.showdetails = true; //$stateparams.param1=dashno.mobile_no; $state.go('add',{param1: $scope.mobile_no}); $scope.email_id = data.email_id; $scope.user_name = data.user_name; $scope.default_vpa = data.default_vpa; $scope.def_vpa_name = data.def_vpa_name; } }) } } if($location.search().param1!=undefined){ console.log("calling check"); $scope.check(); } //dummyitems = _.range(1, 151); // dummy array of items paged //$scope.totalitems; $scope.users=[]; pager = {}; setpage = setpage; //console.log("pagerservice.getpager().currentpage"+pagerservice.getpager().currentpage); initcontroller(); function initcontroller() { fetchedtrans(); } function setpage(page) { console.log("in setpage fn"); console.log("pagerservice.getpager() in setpage: %j",pagerservice.getpager()); //console.log("pager.totalpages"+pager.totalpages); if (page < 1 || page > pager.totalpages) { return; } // pager object service console.log("$scope.users.length"+$scope.users.length); pager = pagerservice.getpager($scope.users.length, page); console.log("pager in setpage fn: %j",pager); //pager.pages.length=$rootscope.pageslength; //pager.pages.length=$scope.users.length; console.log("pager.pages.length"+pager.pages.length); console.log("pager.currentpage in setpage fn"+pager.currentpage); // current page of items $scope.users= $scope.users.slice(pager.startindex, pager.endindex + 1); console.log("$scope.users setpage fn: %j",$scope.users); } function fetchedtrans() { console.log("in fetchtrans"); console.log("pagerservice.getpager(): %j",pagerservice.getpager()); var dashno1 = { mobile_no: $scope.mobile_no, user_name: $cookies.get('user_name'), token: $cookies.get('token'), page: pagerservice.getpager().currentpage-1 }; if (pagerservice.getpager().totalitems == undefined) { dashno1.fetch_tot_trans = 1; } else { dashno1.fetch_tot_trans = 0; } $http.get('/some url',{ params:dashno1 }).success(function (data, status, header, config) { console.log("data: %j",data); if(data.success==1){ console.log("data.total_trans "+data.total_trans); if (pagerservice.getpager().totalitems == undefined) { pagerservice.getpager().totalitems = data.total_trans; console.log("totalitems after getting success"+pagerservice.getpager().totalitems); } if(dashno1.page==0){ $scope.users=data.transactions; } else { var i; (i = dashno1.page * 10; <= (dashno1.page * 10) + 9; i++) { $scope.users[i] = data.transactions[i - (dashno1.page * 10)]; } console.log("$scope.users in fetchtans: %j", $scope.users) } // initialize page 1 setpage(1); } }); } });
Comments
Post a Comment