AngularJS - A pagination demonstration incorporating intelligent logic inspired by Google's approach

Question

AngularJS - A pagination demonstration incorporating intelligent logic inspired by Google's approach

I struggled to implement a paging solution that I came across online. The issue seems to be related to the timing of function calls, specifically how the setPage function is triggered before all data is retrieved, causing it to not properly determine the total number of items to display. Can someone review my code and see where I might be going wrong? Any help would be greatly appreciated.

Link to Paging Solution

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

        // get pager object from service
        vm.pager = PagerService.GetPager(vm.uploads.length, page);

        // get 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;
                }
            });
    }

Snippet of HTML Code

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

javascript angularjs pagination

Answer 1

Answer №1

One common error that many people make is not grasping the concept of asynchronous calls.

HistoryFactory.getHistory(vm.includeCancelled).then({})

is an asynchronous function, which means that it will initiate the call and then proceed to execute code after the async call without waiting for it to complete. The code inside .then({}) will only run after the async call has finished, which could take anywhere from 5 milliseconds to 5 seconds.

For example:

function activate() {
    getHistory();      // async call, does not pause execution
    vm.setPage(1);     // runs immediately after, even if data is not ready 
}

To address this issue, the code should be revised as follows:

function activate() {
    getHistory();
}

Additionally, update getHistory() 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 once data retrieval is complete
            vm.setPage(1);
        });
}

Answer 2

One common error that many people make is not grasping the concept of asynchronous calls.

HistoryFactory.getHistory(vm.includeCancelled).then({})

is an asynchronous function, which means that it will initiate the call and then proceed to execute code after the async call without waiting for it to complete. The code inside .then({}) will only run after the async call has finished, which could take anywhere from 5 milliseconds to 5 seconds.

For example:

function activate() {
    getHistory();      // async call, does not pause execution
    vm.setPage(1);     // runs immediately after, even if data is not ready 
}

To address this issue, the code should be revised as follows:

function activate() {
    getHistory();
}

Additionally, update getHistory() 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 once data retrieval is complete
            vm.setPage(1);
        });
}

AngularJS - A pagination demonstration incorporating intelligent logic inspired by Google's approach

Answer №1

Similar questions

Loading a Vuetify component dynamically within a Vue 3 environment

The object property is not being identified by the controller

Enter a socket.IO chat room upon accessing an Express route

Is there a way to redirect the user directly to the upload page without displaying the response?

Encountering an issue while attempting to retrieve information from Vuex store

JavaScript Plugins for Cordova

PHP fails to retrieve data from a JavaScript Ajax function using the FormData object (specifically, when

Running an Express middleware function

The Facebook messenger checkbox plugin does not appear to be displaying correctly

Is there any re-rendering optimization feature in Angular 2?

Having trouble retrieving a customized header from the HTTP response

What is the process for making changes to a document in Mongoose?

Retrieve Data from Angular's ngRedux Store

What is the best way to define a variable within a function?

Learn how to configure and utilize an AngularJS factory using ngResource along with passing parameters in the call

Can you explain the distinction between $translateChangeSuccess and $translateChangeStart and provide guidance on which one would be more suitable for my situation?

AngularJS flip card animation

Issue arising from the lack of direct communication between parent and child elements

Using JSON data to populate a select menu in AngularJS using the ng-options directive

voting-app-powered-by-express-angular-node