i have tried implement paging solution found online link:
http://jasonwatmore.com/post/2016/01/31/angularjs-pagination-example-with-logic-like-google.aspx
i think issue in way functions called, because setpage function gets called before have data not know how many total items there displayed etc. can take quick , see i'm doing wrong?
function historycontroller($window, $scope, $modal, $state, toaster, pagerservice, historyfactory, $timeout) { var vm = this; vm.uploads = []; vm.includecancelled = false; vm.uploaddatamodal = {}; vm.pager = {}; vm.setpage = setpage; activate(); function activate() { gethistory(); vm.setpage(1); } function setpage(page) { if (page < 1 || page > vm.pager.totalpages) { return; } // pager object service vm.pager = pagerservice.getpager(vm.uploads.length, page); // current page of items vm.items = vm.uploads.slice(vm.pager.startindex, vm.pager.endindex + 1); } function gethistory() { historyfactory.gethistory(vm.includecancelled).then( function(response) { _.each(response.data, function(upload) { upload.inprogress = upload.status && ['inprogress','new'].indexof(upload.status.statuscd.trim()) > -1; }); vm.uploads = response.data; if($state.params.reupload){ uploadproductiondata(); $state.params.reupload = false; } }); } here html
<div class="chrthdr" ui-view="header"></div> <div id="userresults"> <div class="card card-full-width"> <div class="card-header dark-blue"> <a class="card-config" data-toggle="uploadhistory" data-placement="left"><i class="glyphicon glyphicon-info-sign"></i></a> <div class="card-title">data history</div> </div> <div class='form-horizontal range-date' style="overflow-y: auto;"> <form> <div class="panel-body"> <div> <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-right: 5px" type="button" ng-click="vm.uploadproductiondata()">upload data</span> <label> <input type="checkbox" ng-model="vm.includecancelled">include removed executions </label> <!--<span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; margin-left: 5px" type="button" ng-click="vm.viewtemplates()">download template</span>--> </div> <div> <table class="table"> <tr> <th>upload date</th> <th>product</th> <th>comments</th> <th>template</th> <th>last updated by</th> <th>last updated</th> <th>status</th> <th>actions</th> </tr> <tr ng-repeat="upload in vm.uploads | orderby:'uploaddate':true"> <td style="white-space: nowrap;">{{upload.uploaddate}}</td> <td>{{upload.product}}</td> <td style="white-space: nowrap;">{{upload.comments}}</td> <td style="white-space: nowrap;">{{upload.templatename}}</td> <td style="white-space: nowrap;">{{upload.lastupdatedbyuser}}</td> <td style="white-space: nowrap;">{{upload.lastupdatedate}}</td> <td style="white-space: nowrap;">{{upload.status.statusname}}</td> <td> <button class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " ng-hide="upload.status.statuscd === 'new' || upload.status.statuscd === 'error'" ng-click="vm.loadstagingpage(upload.dataloadexecutionid, upload.product, upload.status)">view</button> <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " type="button" ng-click="vm.canceldataexecution(upload.dataloadexecutionid)" ng-show="upload.inprogress || upload.status.statuscd === 'error'">remove</span> </td> </tr> </table> </div> <div class="text-center"> <ul ng-if="vm.pager.pages.length" class="pagination"> <li ng-class="{disabled:vm.pager.currentpage === 1}"> <a ng-click="vm.setpage(1)">first</a> </li> <li ng-class="{disabled:vm.pager.currentpage === 1}"> <a ng-click="vm.setpage(vm.pager.currentpage - 1)">previous</a> </li> <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentpage === page}"> <a ng-click="vm.setpage(page)">{{page}}</a> </li> <li ng-class="{disabled:vm.pager.currentpage === vm.pager.totalpages}"> <a ng-click="vm.setpage(vm.pager.currentpage + 1)">next</a> </li> <li ng-class="{disabled:vm.pager.currentpage === vm.pager.totalpages}"> <a ng-click="vm.setpage(vm.pager.totalpages)">last</a> </li> </ul> </div> </div> </form> </div> </div>
this very common mistake of not understanding asynchronous calls.
historyfactory.gethistory(vm.includecancelled).then({}) async, meaning make call , continue executing code after async call. when async call has finished, code inside .then({}) execute 5 milliseconds or 5 seconds.
so here:
function activate() { gethistory(); // async call, doesn't wait vm.setpage(1); // executed after, data not ready } needs be:
function activate() { gethistory(); } and changegethistory() to:
function gethistory() { historyfactory.gethistory(vm.includecancelled).then( function(response) { _.each(response.data, function(upload) { upload.inprogress = upload.status && ['inprogress','new'].indexof(upload.status.statuscd.trim()) > -1; }); vm.uploads = response.data; if($state.params.reupload){ uploadproductiondata(); $state.params.reupload = false; } // call setpage after data finished vm.setpage(1); }); } 
Comments
Post a Comment