Is dirPagination failing to display pagination links correctly?

I am currently attempting to implement server-side pagination in my application, but I am facing challenges as the paging option seems to be missing. I have been following this tutorial for guidance.

Below is a snippet of my code:

JavaScript:

$scope.vm={};

$scope.vm.users = []; 
$scope.vm.pageno = 1; 
$scope.vm.total_count = 0;
$scope.vm.itemsPerPage = 10; 

$scope.getData = function(pageno){ 
    $scope.vm.users = [];
    var params = {
        pageno:  $scope.vm.pageno,
        itemsPerPage:  $scope.vm.itemsPerPage
    };
    featureService.getPagingFeatures(params).then(function (response) {
        console.log("Getting paging Feature list..");
        if (response.status.name == "OK") {
            $scope.vm.users = response.pagingFeaturesList;  
            $scope.vm.total_count = response.total_count; 
        } else {

        }
    }, function (error) {
        console.log(error);
    });

};
$scope.getData($scope.vm.pageno);

HTML:

<table class="table table-striped table-hover">
    <thead>
    <tr>
        <th> SR# &nbsp;</th>
        <th> Name &nbsp;</th>
        <th> Code &nbsp;</th>
        <th> Description &nbsp;</th>
        <th> is Active &nbsp;</th>
    </tr>
    </thead>
    <tbody>
    <tr ng-show="vm.users.length <= 0"><td colspan="5" style="text-align:center;">Loading new data!!</td></tr>
    <tr dir-paginate="user in vm.users|itemsPerPage:vm.itemsPerPage" total-items="vm.total_count">
        <td> {{$index+1}}</td>
        <td>{{user.name}}</td>
        <td>{{user.code}}</td>
        <td> {{user.description}}</td>
        <td> {{user.isActive}}</td>
    </tr>
    </tbody>
</table>
<dir-pagination-controls
    max-size="10"
    direction-links="true"
    boundary-links="true"
    on-page-change="vm.getData(newPageNumber)" >
</dir-pagination-controls>

Here is how my current table looks like: https://i.sstatic.net/Dj1zj.png

I would greatly appreciate some help on adding paging links below my table. I've tried various solutions from Stack Overflow and Google, but nothing seems to work for me.

Answer №1

Check out this HTML code snippet:

<pagination ng-model="page"
                        page="pagingInfo.page"
                        total-items="pagingInfo.totalItems"
                        items-per-page="pagingInfo.itemsPerPage"
                        ng-change="selectPage(page)"
                        max-size="10"
                        rotate="false"
                        boundary-links="true"></pagination>

In the controller section:

$scope.pagingInfo = {
            page: 1,
            itemsPerPage: 10,
            sortBy: 'NO',
            reverse: false,
            search: '',
            totalItems: 0
        };



  $scope.selectPage = function (page) {
        $scope.pagingInfo.page = page;


        getPagingFeatures();
    };

featureService.getPagingFeatures($scope.pagingInfo).then(function (response) {

                console.log("Fetching paging features list..");
                console.log(response.status);
                if (response.status.name == "OK") {
                    $scope.vm.users = response.pagingFeaturesList;  // data to be displayed on current page.
                    $scope.vm.total_count = response.total_count; // total data count.
                    console.log("Paging successful");
                    console.log( $scope.vm.users);
                    console.log( $scope.vm.total_count);
                } else {

                }
            }, function (error) {
                console.log(error);
            });

        };

This code has been tested and is functioning correctly for me.

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

Picture fails to load on Ionic app on the device

Currently, I am utilizing Ionic 3 for my project. The location of the images file is \src\assets\img. This pertains to a basic page implementation. export class BasicPage { items = []; constructor(public nav: NavController ,private adm ...

Retrieve the binary file data that was sent via Postman using Node.js/Express.js

I am currently testing file uploading in my backend system. I am using Postman to send binary data as a file in the request body, and now I need to extract this data from the POST request. req.body The above code snippet returns a binary buffer that look ...

Using a JavaScript loop to modify the color of the final character in a word

I am curious to find out how I can dynamically change the color of the last character of each word within a <p> tag using a Javascript loop. For example, I would like to alter the color of the "n" in "John", the "s" in "Jacques", the "r" in "Peter" ...

Creating a mongoose schema that contains an array of objects and linking it to ng-model

As a beginner in coding, I appreciate your patience with me if the information provided isn't perfectly clear. I'm giving it my best shot. Let's dive into the issue. { email: 'asdf', password: 'asdf', userl ...

Retrieving information from Firebase using React

Is there a way to retrieve data from Firestore? import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; const firebaseConfig = { apiKey: "AIzaSyCNBAxjeKNoAPPjBV0 ...

Using AngularJS client and Flask server for a RESTful call, one can include the

I am currently facing an issue where I need to send a REST request from my AngularJs client to a Flask server. The problem arises when one of the ids (key) in the request contains a forward slash. Interestingly, if the key does not contain a slash, the re ...

Boosted - Automated Observable with controlled Update alert

Is there a way to create a ComputedObservable in knockout that is computed from non-observable values and manually trigger the Notification? ...

Installing npm modules can be a time-consuming task when running docker-compose

I have been working on a project using Next.js and a PostgreSQL database in a Docker container. The setup of my project involves Docker Compose. However, I've noticed that when I run docker-compose up, the npm install command takes an incredibly long ...

Instructions on how to automatically close a Bootstrap 5 alert without using jQuery

With the removal of jQuery as a dependency in Bootstrap 5, I have been exploring ways to automatically dismiss an Alert after a set duration using raw Javascript. Below is a snippet of my current approach. I believe there is room for optimization or a bett ...

Utilizing an Immediate-Invoked Function Expression (IIFE) for jQuery in JavaScript

I'm looking at this code snippet that I believe is an Immediately Invoked Function Expression (IIFE). But, I'm confused about the role of (jQuery) and ($). I understand that it involves passing a reference to jQuery into the IIFE, but can someone ...

``Implementing a method to save the output of an asynchronous request in a global variable for future manipulation

It's been a week and I still can't figure this out. Being new to front-end development, I'm struggling with storing the response from subscribe in a global variable for future use. ngOnInit(): void { this.http.get<APIResponse>('ur ...

Preventing ReactJS tooltips from exceeding the boundaries of the screen

Here is a simple demo showcasing blocks with tooltips that appear when hovered over. However, there seems to be an issue with the functionality. The tooltip should ideally be displayed either from the left or right side of the block. To determine the size ...

An issue occurred while attempting to utilize fs.readFileSync

Attempting to change an uploaded image to base 64 format var file = e.target.files[0]; var imageFile = fs.readFileSync(file); var encoded = new Buffer(imageFile).toString('base64'); An error is encountered: TypeError: __W ...

How can I locate and substitute a specific script line in the header using Jquery?

I need to update an outdated version of JQuery that I have no control over, as it's managed externally through a CMS and I can't make changes to it. But I want to switch to a newer version of JQuery. Here is the old code: <script type="text/ ...

Utilizing the map function to incorporate numerous elements into the state

I'm struggling with 2 buttons, Single Component and Multiple Component. Upon clicking Multiple Component, my expectation is for it to add 3 components, but instead, it only adds 1. import React, { useState, useEffect } from "react"; import ...

I want to create a custom jQuery slider totally from scratch

Greetings everyone, I have been tasked with creating a slider using only HTML / jQuery code. Here is the template: And here is the HTML code for the template above: <div id="viewport-container"> <section id="sliding-container"> & ...

Is there a way to simulate a click event (on a file type input) within a promise?

I've been struggling with this issue for a long time and have not been able to find a solution. The problem arises when attempting to trigger a click event on a file input type from within a promise. When I directly trigger the event inside the promis ...

Challenges encountered while formatting Json strings for WCF service transmission

I need assistance in connecting a JavaScript application to a WCF service. The WCF Service I have includes the following method: [OperationContract] [WebInvoke(Method = "POST", BodyStyle = WebMessageBodyStyle.Wrapped, RequestFormat = WebMessageFor ...

What is the correct way to handle JSON responses with passport.js?

In my Express 4 API, I am using Passport.js for authentication. While most things are working fine, I have encountered difficulty in sending proper JSON responses such as error messages or objects with Passport. An example is the LocalStrategy used for log ...

Tips for creating a form-flip, similar to a card-flip effect, using web technologies

Looking to create a card flip effect similar to the one shown here. Once the sign up process is finished, the card will smoothly flip over to reveal the other side with a transitioning effect. ...