AngularJS HTML with dynamic table pagination

Just starting out with angularjs and looking to implement pagination for dynamically generated table rows. The goal is to display pagination after every 3 rows are added, but currently it's not working as expected - even though the limit is set to 3 in the controller (script.js). For a demo, please visit the following link: http://plnkr.co/edit/aViHHoqLBSSiIVMh2KkH?p=preview

`<tr ng-repeat="sum in priceSumRow | filter : paginate">`
buySellApp.controller('buySellCtrl', ['$scope', function($scope) {
 $scope.totalItems = $scope.priceSumRow.length;
 $scope.currentPage = 1;
 $scope.numPerPage = 5;

 $scope.paginate = function(value) {
   var begin, end, index;
   begin = ($scope.currentPage - 1) * $scope.numPerPage;
   end = begin + $scope.numPerPage;
   index = $scope.priceSumRow.indexOf(value);
   return (begin <= index && index < end);
 };
 }]);

Answer №1

It is important to address a few issues in your code for optimal functionality.

  • You have redundantly defined the controller buySellCtrl twice, once in script.js and again in the HTML itself. This duplication can be avoided by moving the paginate code inside the script.js.
  • The total-items attribute for pagination should reflect the length of the array priceSumRow, like
    <pagination total-items="priceSumRow.length" ...
    , instead of using
    <pagination total-items="totalItems.length" ...
    , which eliminates the need for an extra scope variable in the controller.
  • Setting max-size="3" for pagination defines the maximum number of records displayed on a page, while items-per-page="numPerPage" specifies the exact number of records per page. However, you have defined numPerPage as 5 in your case.

Note: I recommend working in strict mode with use strict;. Strict mode introduces a restricted variant of JavaScript that enhances code quality and performance.

MDN : Strict mode brings about changes in JavaScript semantics, addressing silent errors and enhancing optimizations for improved execution speed compared to non-strict code.

See Working Demo @ Plunker

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

Oops, encountering a blank page error while trying to serve the application using gulp

vendor-bed50f88.js:31 Uncaught Error: [$injector:modulerr] Issue with initializing module angularMaterialAdmin: Error: [$injector:nomod] Module 'angularMaterialAdmin' cannot be found! Please check if the module name is correct and it ha ...

What is the reason for the request body being undefined?

I have a JavaScript file named index.js that contains: const express = require('express'); const bodyParser = require('body-parser'); const cors = require('cors'); const db = require('./db'); const movieRouter = re ...

Preventing file overwriting using fs.writefile method

Encountering an issue where the data being saved from a chat room built with socket.io in nodejs is constantly overwritten upon submission of a message. The desired outcome is to append both the username and message to the JSON file as an object, rather th ...

Refreshing JSP Pages with Updated ActionBean Variables in Stripes Framework

Having recently started working with Stripes, I am trying to customize the number of records displayed on a paginated table based on the dropdown selection ("show ## records per page"). However, I am struggling to set the value of the "recordsPerPage" vari ...

Problem with UV mapping when adjusting texture size

I am currently working on an application to modify minecraft models. To display the drawn texture mapped on the 3D player model, I am using ThreeJS. However, I'm facing a challenge related to changing the texture size. Initially, the texture is mappe ...

Organizing angular shapes in alphabetical order

My drop down arrow has elements that are not properly sorted. I have been attempting to use the orderBy angular filter but have encountered some challenges. Upon further investigation, it seems the issue arises because the content I need displayed is neste ...

The DXTreeview feature in AngularJS restricts the expansion of branches

My MVC5 project contains an Index.aspx file, but when I run it in VS2013, only the top branches of the tree are visible without any option to expand them. https://i.sstatic.net/0FWUB.png Resharper confirms that my references are correct. Being new to HT ...

Hold on until the element becomes clickable

When attempting to logout from the menu drop down, I encountered an error stating "Unable to locate element." I suspect there may be a synchronization issue as adding a `browser.sleep(5000);` allowed the tests to pass, but this solution is not stable. ...

Using various designs on elements generated from ng-repeat

Is it possible to apply different styles to buttons created using ng-repeat by having b.color return a value from the btnValues object? Currently, it is not returning the value. If this is not possible, are there alternative methods to achieve this? < ...

Combine JSON array elements, excluding any with undefined index 0

Here's a simple question - I'm looking for an elegant solution to a problem I have (I already have a solution but it's not the best way). The code snippet below shows how I am starting with an empty variable a that is a JSON array. My goal i ...

JavaScript - Utilizing appendChild as soon as an element becomes available

I'm encountering an issue with my Chrome Extension where I am unable to detect some of the elements that I need to select within a page. var innerChat = document.querySelector('.chat-list'); My goal is to appendChild to this element, but t ...

Retrieving specific value from a Parent Controller in AngularJS using UI Router

I have a request to display the value stored in $scope.resAVal on my index.html page. This value is accessible within the RootCtrl. index.html <!DOCTYPE html> <html ng-app="plunker"> <head> <!-- any required JavaScript librarie ...

ReactJS is giving me an error message: "Uncaught TypeError: Unable to access property 'ownerDocument' since it is null."

Trying to create a bar chart using D3 and render it with React's render method. Below is my index.js file: import React from 'react'; import ReactDOM from 'react-dom'; import './Styles/index.css'; import BarChart from &a ...

Searching for a way to filter by entire objects as well as specific keys within objects using Angular

So, I understand how to filter by all keys in an object using the following code: <input ng-model="search"> <div ng-repeat="result in results | filter:search"> And to filter by specific keys in an object, I can use this code: <input ng-mo ...

Explore the inner workings and file contents of a package using the NPM registry API, by accessing a detailed JSON response

Can the NPM registry API be utilized to access an endpoint like https://registry.npmjs.org/jquery And examine the Tarbells structure and internal files without the need to download the package, in a JSON response similar to: { files: { js: registr ...

``Is there a way to refresh the CSS, button, or a specific part of a webpage after a GET request has been

Upon receiving a GET request, the values appear and the button disappears. View image here. The button functions properly on localhost. See it in action here. I'm attempting to incorporate a Facebook share button on a page with dynamic content like ...

Search for Div IDs while filtering as you type

Is there a search jQuery plugin that enables real-time filtering based on Div ID as you type in the search box? It would be great if the filter instantly refreshes. ...

"Quotes are essential in Javastript syntax for specifying string values

I need to implement a JavaScript syntax to generate unique URLs for each image. The Robohash website provides random robot images based on different URL endings. I tried the code below, but it seems like ${props.id} is being interpreted as part of the UR ...

The JQuery command to set the display property to "block" is not functioning as expected

When trying to toggle the visibility of my TextBox based on a selected value in a RadiobuttonList, I initially wrote the following code: $("#<%= rbtnIsPFEnabled.ClientID %>").click(function () { pfno = $("#<%= txtPFNo.ClientID %&g ...

Guide to customizing marker colors on APEXCHARTS in a Next.js project

Is there a way to specify the color of each data point individually? For example, something like { x: 'Yellow', y: [2100, 3000], colors: '#808080' }, as the default color is set for all markers under plotOptions > dumbbellColors. I n ...