Function to navigate to the next page using Angular material pagination

I recently followed a tutorial on creating pagination and found it very helpful. The tutorial I used can be found at https://github.com/feichao/angular-material-paging

To test out the pagination functionality, I added a json data called myData with some items. However, as a junior programmer, I encountered an issue with the gotoPage() function.

Here is the snippet of code where I made changes:

ctrl.total = ctrl.myData.length;
ctrl.currentPage = 1;
ctrl.step = 6;

ctrl.gotoPage = function() {
  if(ctrl.total) {
     for(var i=0; i < ctrl.total; i++) {
            //   
      }
  }
};

My problem now is figuring out how to modify the code within the gotoPage() function so that only 10 items from my json data are displayed per page. For reference, you can check out the demo showcasing these properties and methods.

If anyone has any suggestions or ideas on how to achieve this, I would greatly appreciate the help!

Answer №1

To begin, you must determine the initial amount and then continue iterating until reaching the maximum for that specific page.

ctrl.total = ctrl.myData.length; //total number of items in your data
ctrl.currentPage = 1;
ctrl.step = 6; //page size - adjust to 10 if desired
ctrl.numpages = Math.ceil(ctrl.total / ctrl.step); //total items divided by page size to get whole number
//function to navigate to a specific page with corresponding indexes
ctrl.gotoPage = function(Page) { 
  if (Page <= ctrl.numpages && Page > 0) {
     var startpos = ((Page - 1) * ctrl.step) + 1; 
     for (var i = startpos; i < startpos + ctrl.step; i++) {
            if (i == ctrl.total) 
              break;   
      }
  }
};

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

Serialization of dictionary containing intricate objects into JSON format

I need to convert the dictionary playersElo into a JSON format for saving and loading purposes. Unfortunately, since it is not naturally serializable, I am facing difficulties finding a suitable solution. playersElo={} # dictionary of {<int> : <P ...

Deleting images from Firestore using a Vue.js componentReady to learn how to remove images

I recently came across a Vue.js image uploader component that I am trying to repurpose (https://codesandbox.io/s/219m6n7z3j). This component allows users to upload images to Firebase storage and save the downloadURL to firestore for continuous rendering of ...

Dividing CSV Data into Two File Outputs

I've got a CSV file that's structured like this: Docushare Host locale, created_at, version en,Wed Feb 21 17:25:36 UTC 2018,07.00.00.C1.609 User handle, client_data, docCountQuota User-12,,-2 Document handle,client_data,cfSpecialWords Document ...

Safari is unable to display the button text, while Chrome has no problem showing it

In Safari, the text of the button is not showing up properly. I am able to retrieve the text using jQuery in the console though. However, there seems to be an issue with recognizing the click event. <div class="btn-group btn-group-lg"> <button ...

What is the method to assign an initial value to React.createRef()?

Scrolling management in my component is handled through a ref that represents the current scroll value. I've chosen to use refs instead of state and setState because using setState while the user is scrolling would result in a choppy and unresponsive ...

Save all dynamically received data from a form in PHP as an array

I have developed a PHP form that dynamically adds new text variables in this manner: <form action="" enctype=”multipart/form-data” method="post" action="<?php echo $_SERVER['REQUEST_URI'];?>"> <div id="div"> va ...

Show the button's value in the textbox and update the selected button's color using JavaScript

I am having difficulty changing the background color of a selected button after displaying its value in a textbox. The code below successfully displays the button value in the textbox, but I can't figure out how to change the background color of the s ...

Display the element solely when the user enters a value greater than 0 into the input box

I am in the process of developing a WoW Classic statistics calculator that allows users to select a class and input various values. As the user makes changes to the inputs, the calculations are displayed below the form using vanilla JS and jQuery. I am ple ...

How can you determine which of three intersecting three-dimensional objects should be displayed?

Let's imagine a scenario where multiple objects intersect at the same location. How can we specify which one to display in order to avoid constant flickering? http://jsfiddle.net/GYQ5v/187/ var scale = 1; var scene = new THREE.Scene(); var camera ...

Can AJAX function properly when the server-side code is hosted on a separate domain?

After opening Firefox's scratchpad and inputting the following code... function ajaxRequest() { var xmlhttp; var domainName = location.host; var url = 'http://leke.dyndns.org/cgi/dn2ipa/resolve-dns.py?domainName='; url = url + domainName + ...

Unable to convert a dictionary to JSON using a specialized encoder

I tried to create a specialized JSON encoder and encountered an issue that I cannot comprehend. Following the guidelines outlined in the official Python documentation, I attempted to encode a dictionary using the standard JSON encoder. However, when I con ...

Can AWS SNS filter policies be used to route messages from the message body to specific SQS queues?

I'm curious about the filter policies for SNS. I understand that they typically filter based on the Message Attributes. Is there a way to set up filtering based on the body instead? The SNS topic will be sending various data types to SQS queues depen ...

Why am I unable to utilize res of type NextResponse in my API endpoint?

I currently have a dynamic API route file specifically designed for handling POST requests. Below is the code snippet of this file: import { NextRequest, NextResponse } from "next/server"; import dbConnect from "@/lib/dbConnect"; import ...

the key to unlocking the potential of a function lies in utilizing parameters

Can someone suggest ways to utilize parameters as keys in a function? For example, I am using Vue and have the following HTML setup: <div id="app"> <input ref="name" /> <button @click="focusIt('name')"> Click me < ...

"Troubleshooting: Issues with the ng-hide directive in AngularJS

I am facing an issue with hiding a column in my table using ng-hide. The goal is to hide the column before the user logs in and then show it after they have logged in. However, I found that after applying the ng-hide property, the entire table gets hidden ...

What could be causing the AntiForgeryToken validation to fail while implementing AngularJS in an ASP.NET MVC application?

I am encountering a problem with passing the correct AntiForgeryToken when using AngularJS $http service in an ASP.NET MVC application. Here are the solutions I have attempted: Setting HTTP Request headers with an httpInterceptor app.factory('ht ...

Can you explain the significance of this specific form of variable declaration?

Have you ever been in a situation where you receive some code that actually works, but you're not sure how it's working? For example, what exactly does this declaration method accomplish? const { actions: { createRole, updateRole } = {} } = prop ...

Creating Location-Specific Customer Data using AngularJS similar to Google Analytics

Looking to create a user registration map similar to Google Analytics without actually using Google Analytics. Can anyone provide assistance with this task? I am utilizing MVC, C#, Sql Server-2014, AngularJS, and jQuery for this project. Despite my efforts ...

Unable to parse JSON due to the Identifiable model

My JSON data looks like this: [ { "name": "car", "color": "red" }, { "name": "bike", "color": "blue" }, ... etc ] Here is the model I'm using for decodi ...

Is there a way to modify Express view lookup using monkeypatching?

I'm currently attempting to override the view lookup function in Express, but I am encountering some difficulties. My aim is to enable the application to search for templates in multiple directories. Here is what I have tried in my `bootstrap.js` fil ...