The template appears to be having issues with pagination functionality

Whenever I click on a page number, the corresponding results are not displayed. Below is an example of the code snippet:

<div class="col wrapper-sm w-md bg-auto dk r-r">
<div class="panel panel-default" ng-show="$parent.showPie === true;">
    <div class="table-responsive">
        <table class="table" ng-show="hashes[0]" id="placement">
            <thead>
                <th> Hash </th>
                <th> MalwareFamily </th>
                <th> Score </th>
                <th> Counts </th>
            </thead>
            <tbody>
                <tr dir-paginate="hash in hashes| itemsPerPage:20">
                    <td><a href="#/app/country/{{countryName}}/cCode/{{stateCode}}/hash/{{hash['hash']}}/inbox/info" >{{hash['hash']}} </a></td>
                    <td> {{hash['malFamily']}} </td>
                    <td> {{hash['malScore']}} </td>
                    <td> {{hash['hits']}} </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="content">
        <dir-pagination-controls></dir-pagination-controls>
    </div>
</div>

The controller responsible for populating data from services seems to be functioning correctly despite the issue:

 function malPage(test) {

 crudSrv.getResults(rootURL.url.baseURL + "global/country/" + $scope.stateCode + "/attacks/malware/hashes/" + test + "/", function(data, status) {
     ngProgress.complete();
     $scope.hashes = data;
     var m = "placement";
     $location.hash(m);
     $anchorScroll();
 });

}

Answer №1

I was able to resolve the issue by incorporating the id concept into my code. Here is the updated code snippet:

<div class="col wrapper-sm w-md bg-auto dk r-r">
<div class="panel panel-default" ng-show="$parent.showPie === true;">
    <div class="table-responsive">
        <table class="table" ng-show="hashes[0]" id="placement">
            <thead>
                <th> Hash </th>
                <th> MalwareFamily </th>
                <th> Score </th>
                <th> Counts </th>
            </thead>
            <tbody>
                <tr dir-paginate="hash in hashes| itemsPerPage:20" pagination-id="hash">
                    <td><a href="#/app/country/{{countryName}}/cCode/{{stateCode}}/hash/{{hash['hash']}}/inbox/info" >{{hash['hash']}} </a></td>
                    <td> {{hash['malFamily']}} </td>
                    <td> {{hash['malScore']}} </td>
                    <td> {{hash['hits']}} </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div id="content">
        <dir-pagination-controls pagination-id="hash"></dir-pagination-controls>
    </div>
</div>

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

Issue: Switching between concealing and revealing is not functional

body { margin: 0; } a{ text-decoration: none; color: lightseagreen; } a:hover { color: lightgray; } /* full bar*/ .navbar { display: flex; justify-content: space-between; align-items: center; background-color: white; p ...

Learn the technique of initiating one action from within another with Next Redux

I'm looking to set up user authorization logic when the page loads. My initial plan is to first check if the token is stored in the cookies using the function checkUserToken. Depending on whether the token is present or not, I will then call another f ...

Guidance on modifying a sub row within a main row in Sails.js

I am currently working on a sails.js application This is the model structure for my application: name: String, address:String, appSettings: { header: String, color : String, font: String, } In my development process, I have utilized independ ...

Issue: The element [undefined] is not recognized as a valid child of the <Routes> component. Only <Route> or <React.Fragment> components are allowed as children of the <Routes

I am facing an issue while trying to upgrade react-router-dom from v5 to v6. The error message I receive is as follows: Error: [undefined] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragm ...

An issue occurred during the hydration process, causing the entire root to switch to client rendering since the error occurred outside of a Suspense boundary

I've started seeing some errors and warnings: Error: An error occurred while hydrating. Since it happened outside of a Suspense boundary, the entire root will switch to client rendering. Error: Hydration failed due to initial UI not matching what was ...

The jScrollPane fails to remain at the bottom

I have implemented jScrollPane for the scrollbars in a chat interface that I created. However, I am facing an issue where the scroll does not automatically go to the bottom as expected. I have set the 'stickToBottom' option to true and also enabl ...

Solving the issue of "localstorage is not defined" in NextJS Redux

Currently, I am working on implementing local storage in Next.js with Redux. In Next.js, components are initially rendered server-side, which means that localStorage or window objects are not available until the rendering occurs in a browser. This issue ...

Setting up Express routes with the help of Gulp

On the server side, I am utilizing Express and MongoDB while on the client side, I am using Gulp. The client side is accessed via http://localhost:3000/ and the server side through http://localhost:3010/. A profile page needs to be created at http://loca ...

Issue with pushing inner list<object> in Knockout version 3.2.0

Currently, I am working with knockout.js on an ASP application. The issue I am facing involves a list of objects returned by the controller action to the view, where the objects in the list point to another list of objects. My struggle lies in adding new o ...

Is there a way to get Cesium points to orbit along with the map?

I have a project where I am creating a cesium app and I am facing an issue with the rotational heading of my points. I am using billboards to display custom images indicating this heading, but as I rotate the globe, the points do not rotate accordingly, re ...

Enhancing the Value of BehaviorSubject with Object Assign in Angular using Typescript and RxJs

I have a user object stored as a BehaviorSubject which is being observed. I need help figuring out how to detect if a specific value within my user object has changed. I've noticed that my current implementation doesn't seem to work correctly, a ...

Unable to retrieve the JSON response item

Currently, I am in the process of setting up an AJAX call with the intention of manipulating the response data. Upon inspecting my browser's network console, this is the response I am seeing: { "message": "success", "file": "dump.xml" } Thi ...

Leveraging the Jpeg-autorotate npm package to automatically adjust image orientation according to EXIF data in JavaScript

Struggling with an issue in my web app where uploaded images display sideways, I decided to utilize this module to rotate images based on the EXIF data. Here's a snippet of my code: <template> <div :class="$style.form247"> <Can ...

The horizontal scroll menu transition in CSS is choppy and lacks smoothness

My goal is to create a seamless transition for the menu. However, when clicking the arrows, the 2nd div appears at the bottom of the 1st div, causing a choppy effect. Below is the code I am currently using: To view my code, please visit: ...

Save the JSON array into a MySQL database and retrieve the array upon request

In the Angular app, the 'cats' field is a selectbox that contains data from the cats table, including id, name, and module_id. There is a function on Slim framework for adding items: function addItem($section) { $request = \Slim\Sl ...

How can these lines be drawn in a simple manner?

I have been using the div tag to create a line, but I'm looking for an easier solution. If you have another method in mind, please share it with me. #line{ background-color:black; height:1px; width:50px; margin-top:50px; margin-left:50px; f ...

The Angular strap's modal appears to be void of any content

I'm having trouble getting the angular-strap modal to display properly with an external template. What could be the issue? <!DOCTYPE html> <html ng-app="myApp"> <head> <link data-require="<a href="/cdn-cgi/l/email-prote ...

Resetting initial values with Velocity.js post-animation

After animating elements into view on a page, I want to defer further animation through CSS classes. However, Velocity keeps all animated properties in the style= tag, hindering CSS transitions. My solution involves resetting the CSS upon completion, but ...

Error: The Rollup module is unable to locate the 'jquery' file

I've been facing an issue while trying to bundle a vuejs single file component using rollup. The error message that keeps popping up is Module not found: Error: Can't resolve 'jquery'. Despite spending countless hours on this problem, I ...

Enhance default values with inheritance in Javascript using jQuery's prototype extend functionality

Is there a way to expand the default options for multiple Prototype-based JavaScript constructor functions? I am attempting to access the options object in the Events object. Is this achievable? const Website = function(options){ this.options = $.ext ...