Pagination malfunction on AngularJS md-data-table is causing issues

I have been working on a project that involves retrieving data from an API and displaying it in a table. I am using AngularJS and the md-data-table library by Daniel Nagy. Following the setup instructions, I was able to display my data successfully. However, I am facing issues with pagination. When I try to move to the next page or change the number of rows displayed, nothing happens.

Here is the HTML code:

<div id="users">

<md-table-container>
    <table md-table multiple md-progress="promise">
        <thead md-head md-order="query.order" md-on-reorder="getData" class="columns">
            <tr md-row>
                <th md-column md-order-by="" flex="10"><span>Email</span></th>
                <th md-column md-numeric md-order-by="" flex="20"><span>Insurance</span></th>
                <th md-column md-numeric flex="20">Policies</th>
                <th md-column md-numeric flex="20">Status</th>
                <th md-column md-numeric flex="10">Extra</th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row ng-repeat="user in users | orderBy:'-policyId'">
                <td md-cell flex="10">{{user.email}}</td>
                <td md-cell flex="20">{{user.insuranceName}}</td>
                <td md-cell flex="20"><button class="action-button" ng-click="downloadPolicy(user.policyUrl)" download="user.policyUrl"
                    ng-href="user.policyUrl">Download</button></td>
                <td md-cell flex="20">{{user.status}}</td>
                <td md-cell class="more" flex="10"><md-menu>
                <div ng-click="openMenu($mdMenu, $event)">
                    Ver Más
                </div>
                <md-menu-content>
                    <md-menu-item ng-hide="!user.isPending">
                        <md-button ng-click="details(user.policyId)">
                            <span class="opt-btn">Add Details</span>
                        </md-button>
                    </md-menu-item>
                    <md-menu-item ng-hide="user.isPending">
                        <md-button ng-click="edit(user.policyId)">
                            <span class="opt-btn">Edit</span>
                        </md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu></td>
            </tr>
        </tbody>
    </table>
</md-table-container>

<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page"
    md-total="{{users.length}}" md-on-paginate="getData" md-page-select></md-table-pagination>

This is the controller code:

$scope.users = [];
$scope.totalUsers = 0;
$scope.query = {
    order: 'name',
    limit: 5,
    page: 1
};

var getData = function(){
    console.log("Get data");
    $http({
        method: 'GET',
        url: config.apiUrl+'/policy/all'
    }).then(function successCallback(response) {
        var currentData = response.data
        for(var i=0; i < currentData.length; i++) {
            var current = currentData[i];
            if(current.isPending === true) {
                current.status = "Pending";
            } else if(current.availableUpgrades === false) {
                current.status = "Upgrades Available";
            } else if(current.availableUpgrades === true) {
                current.status = "No Upgrades";
            }

        }

        $scope.users = currentData;
        $scope.totalUsers = currentData.length;

    }, function errorCallback(response) {
        console.log(response);

    });
}

If you have any suggestions on how to resolve the pagination issue, your help would be greatly appreciated.

Answer №1

i believe this solution will be effective

$scope.query = {
    order: 'name',
    limit: 5,
    page: 1
};

$http({
        method: 'GET',
        url: config.apiUrl+'/policy/all'
    }).then(function successCallback(response) {
        var currentData = response.data
        for(var i=0; i < currentData.length; i++) {
            var current = currentData[i];
            if(current.isPending === true) {
                current.status = "Pending";
            } else if(current.availableUpgrades === false) {
                current.status = "Upgrades Available";
            } else if(current.availableUpgrades === true) {
                current.status = "No Upgrades";
            }

        }

        $scope.users = currentData;
        $scope.totalUsers = currentData.length;

    }, function errorCallback(response) {
        console.log(response);

    });
<div id="users">

<md-table-container>
    <table md-table multiple md-progress="promise">
        <thead md-head md-order="query.order" md-on-reorder="getData" class="columns">
            <tr md-row>
                <th md-column md-order-by="" flex="10"><span>Email</span></th>
                <th md-column md-numeric md-order-by="" flex="20"><span>Insurance</span></th>
                <th md-column md-numeric flex="20">Policies</th>
                <th md-column md-numeric flex="20">Status</th>
                <th md-column md-numeric flex="10">Extra</th>
            </tr>
        </thead>
        <tbody md-body>
            <tr md-row ng-repeat="user in users | orderBy:'-policyId'">
                <td md-cell flex="10">{{user.email}}</td>
                <td md-cell flex="20">{{user.insuranceName}}</td>
                <td md-cell flex="20"><button class="action-button" ng-click="downloadPolicy(user.policyUrl)" download="user.policyUrl"
                    ng-href="user.policyUrl">Download</button></td>
                <td md-cell flex="20">{{user.status}}</td>
                <td md-cell class="more" flex="10"><md-menu>
                <div ng-click="openMenu($mdMenu, $event)">
                    View More
                </div>
                <md-menu-content>
                    <md-menu-item ng-hide="!user.isPending">
                        <md-button ng-click="details(user.policyId)">
                            <span class="opt-btn">Add Details</span>
                        </md-button>
                    </md-menu-item>
                    <md-menu-item ng-hide="user.isPending">
                        <md-button ng-click="edit(user.policyId)">
                            <span class="opt-btn">Edit</span>
                        </md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu></td>
            </tr>
        </tbody>
    </table>
</md-table-container>

<md-table-pagination md-limit="query.limit" md-limit-options="[5, 10, 15]" md-page="query.page"
    md-total="{{users.length}}" md-on-paginate="getData" md-page-select></md-table-pagination>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking for null values using the "and/or" syntax

While reading an article on special events in jQuery, I came across a syntax that was unfamiliar to me: var threshold = data && data.threshold || 1 I have previously encountered the following: var threshold = data.threshold || 1 As far as I kno ...

extract values from a JavaScript function on a website

Currently, I am facing a challenge in automatically retrieving elements from a webpage and I seem to be stuck on a few things. My approach involves looping through all classes named 'trList' using document.getElementsByClassName('trList&apo ...

Leveraging the Angular (2) routerLinkActive directive to handle dynamic routes

Although my current approach works, I believe there may be a more efficient way to implement this in Angular. The situation is as follows: Imagine nested, inflected paths like /logos and /logo/:id The markup below functions as intended: <li class ...

Utilizing a JavaScript variable to fetch a rails URL: A comprehensive guide

One interesting feature I have is an image link that has a unique appearance: <a href="#user-image-modal" data-toggle="modal" data-id="<%= image.id %>"><img class="user-photo" src="<%= image.picture.medium.url %>" alt="" /></a&g ...

How to efficiently upload multiple files in an array using jQuery and AJAX technology

Looking for a way to upload each file separately with HTML? <input type="file" name="[]" multiple /> Struggling to figure out how to achieve this? Here is an example: $('input:file').on('change', function(){ allFiles = $(th ...

React: encountering issues with accessing component props after page refresh

Whenever I try to reload the 'details' page (not the homepage) on my app, I encounter the following error: "TypeError: Cannot destructure property 'flag' of 'country' as it is undefined." It seems that the data is ...

Unable to figure out a method to properly synchronize a vue.js asynchronous function

I am facing an issue with my code where everything works fine if I uncomment the "return" statement in fetchData. How can I make sure that I wait for the completion of this.fetchData before populating the items array? I have tried using promises, async/awa ...

Experiencing a surge in requests with LazyLoad enabled?

My website contains numerous images, most of which are displayed within a slider using SlickSlider.js with Lazyload. Although the page load time is 3.87 seconds, there are over 134 requests being made for these images. Upon closer inspection, I noticed th ...

Create directories in a nested structure using a multi-level JSON object with async.js

DEFINITION NewMethod#generateDirectoriesFromJSON (data, cb); data: JSON object. cb: Callback function. Parameters: err (Error), directoriesCreated (Boolean, true if at least one directory has been created). Assuming that the NewMethod class includes a ...

Does AngularJS come with caching enabled by default?

Delving into the world of angularjs, I recently came across this documentation that suggested adding a specific option to the $http service configuration in order to utilize cache: $http({ method : "GET", url : "somehost/somepath", cache : tru ...

Launching a program through a web browser - a step-by-step guide

I am looking to create a specific sequence of events: A web browser opens, and a user logs in (the exact action is not crucial) The user is then redirected to a new page where another program should automatically open This process is similar to what happ ...

Configuring dropdown selection using AngularJS

Looking to enhance the functionality of this page: I want to create a series of links that, upon being clicked, will automatically select a specific value in the hidden "Color" dropdown menu. For example, clicking on a link should set the color to "Style ...

What are some recommended methods in Angular for developing reusable panels with both controller and view templates?

I am still getting acquainted with angularjs, so there might be something I'm overlooking, but I'm struggling to find an efficient way to create reusable views that can be instantiated within a parent view. My specific scenario involves a web ap ...

Instructions for adding a class when a li is clicked and replacing the previous class on any other li in Vue 2

Even though I successfully used jQuery within a Vue method to achieve this task, I am still searching for a pure Vue solution. My goal is to remove a class from one list item and then add the same class to the clicked list item. Below is the code snippet w ...

"Experience the power of combining nvD3 with AngularJs to enhance your

Hi everyone, I need some assistance with an issue I'm facing. I can't seem to figure out what's wrong. Here is my JSP page code: <html> <head> <meta charset="utf-8"> <!-- it's important fo ...

Troubleshooting Problem with MVC Ajax Requests

When working with an MVC view, I have a submit button that includes validation checks. If the validation fails, I return false to prevent the form from being submitted. In addition to standard validation, I also use an Ajax GET request to check for duplic ...

Exploring the Haversine Formula and Geolocation Integration in AngularJS

I am currently developing an application that will organize locations based on either name or distance from the user. Everything is functioning properly except for retrieving the distance. I believe I should be able to obtain the user's coordinates th ...

Error: Unable to access the 'map' property of an undefined object......Instructions on retrieving a single post

import React,{useEffect, useState} from 'react' //import {Link} from 'react-router-dom' import { FcLikePlaceholder, FcComments } from "react-icons/fc"; const SinglePost = () => { const [data,setdata] = useState([]) co ...

What is the best way to eliminate the initial key from a JSON object

How can I remove the first index in a JSON object? JSON: {"data":[{"label":"Data","data":1},{"label":"Website","data":1}]} I need: [{"label":"Data","data":1},{"label":"Website","data":1}] When I try to delete .data, it outputs object{} JavaScript c ...

The implementation of Ajax beforeSend and complete functions is not possible at the moment

I’ve been attempting to implement a spinner image while loading ajax data, but I can't seem to get it to work. Here's my code : $.ajax({ url: '/Observer/GetInfoProfileByProfileId', type: 'POST', data: { ProfileId: ...