Organize an AngularJS dataset into pages

I've organized some JSON (dummy) data into a users table.

let website = 'https://jsonplaceholder.typicode.com';

// Setting up an Angular module called "usersApp"
let app = angular.module("usersApp", []);

// Creating a controller for the "usersApp" module
app.controller("usersCtrl", ["$scope", "$http", function($scope, $http) {
  let url = website + "/users"
  $http.get(url)
    .then(function(data) {
      $scope.users = data.data;
    });
}]);
.search-box {
  margin: 5px;
}

.panel-heading {
  font-weight: bold;
}

.table-container .panel-body {
  padding: 0;
}

.table-container table tr th {
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="container" data-ng-app="usersApp">
  <div class="panel panel-default table-container">
    <div class="panel-heading">Users</div>
    <div class="panel-body" data-ng-controller="usersCtrl">
      <div class="row">
        <div class="col-sm-12">
          <div class="form-group search-box">
            <input type="text" class="form-control" id="search" placeholder="Search User" data-ng-model="search">
          </div>
        </div>
        <div class="col-sm-12">
          <table class="table table-striped" id="dataTable">
            <thead>
              <tr>
                <th>Full name</th>
                <th>Email</th>
                <th>City</th>
                <th>Street</th>
                <th>Suite</th>                 
              </tr>
            </thead>
            <tbody>
              <tr data-ng-repeat="user in users|filter:search">
                <td>{{user.name}}</td>
                <td><a href="mailto:{{user.email}}">{{user.email}}</a></td>
                <td>{{user.address.city}}</td>
                <td>{{user.address.street}}</td>
                <td>{{user.address.suite}}</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>

The table currently displays only 10 rows, however, in a real-world application, there would be a lot more data to handle so pagination is necessary. The current setup could show 3 rows per page (except the 4th one, which should only have one).

Question(s):

  1. Is there an easy way within AngularJS to paginate a table like this?
  2. If not, what are some of the best alternatives?

Answer №1

Unfortunately, Angularjs does not come equipped with a built-in pagination feature. In order to implement pagination, you will need to utilize third-party modules such as angular-ui-grid. Alternatively, you can experiment with this code snippet:

<https://codepen.io/khilnani/pen/qEWojX>

Answer №2

If you're looking for a way to implement pagination, consider utilizing the ngInfiniteScroll library. Here is the link for more information:

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

Using Angular and nativeElement.style: how to alter cursor appearance when clicked and pressed (down state)

I am working with a native elementRef CODE: this.eleRef.nativeElement.style = "_____?????_____" What should go in "???" in order to apply the :active style to the element? (I want to change the cursor style when the mouse is clicked down, not when it is ...

How can I make a recently added row clickable in an HTML table?

I have a table where each row is given the class ".clickablerow". I've set up an onclick function so that when a row is clicked, a dialog box appears allowing me to insert text above or below as a new row. The issue I'm facing is that even though ...

The page is not able to be uploaded successfully, receiving a HTTP 200 status

Currently, my application is running in Express and I have a button that sends a POST request to the server. After receiving a 200 OK response, the HTML page is displayed. The issue I am facing is that even though I can see the HTML payload in Firebug, my ...

Challenges surrounding jQuery's .before

Currently, I am in the process of creating a simple carousel consisting of 4 divs. The carousel is utilizing 2 jQuery functions to position a div at either the first or last slot. The transitions being used are only alpha transitions as there is no need fo ...

Vue.js - Difficulty displaying fetched data from API using v-for

My attempt to render a list of data seems to be hitting a roadblock - the data doesn't display when the page loads. The API call works perfectly, fetching all the necessary data and setting it to my data object. Here's the code snippet: once &apo ...

Enabling clients to access all static files from a Node.js + Express server

My index.js file serves as a node.js server : var express = require('express'); var app = express(); const PORT = process.env.PORT || 5000; var serv = require('http').Server(app); app.get('/', function(req, res) { res.sen ...

The new Model.save() method in Mongoose v6.2.7 is experiencing issues and none of the attempted solutions such as promises, callbacks, or async await in try

At first, the project was established to support promises, and all queries utilized promise-like methods such as method.then().catch(). However, some were later switched to try-catch with async await. Everything functioned properly until a few weeks ago wh ...

Adding a dynamic CSS stylesheet at runtime with the power of Angular and Ionic 2

Currently, I am working on creating a bilingual application using Ionic2. The two languages supported are English and Arabic. As part of this project, I have created separate CSS files for each language - english.css and arabic.css. In order to switch be ...

The JSON object is not providing the length of the array, returning the value as

I'm currently fetching JSON data from a PHP file in the following manner: $.getJSON('fresh_posts.php',function(data){ global_save_json = data.freshcomments; var countPosts = data.freshposts; var howManyPosts = countPosts.length; ...

Accordion nested within another accordion

I am facing a challenge while trying to nest an accordion within another accordion. The issue is that the nested accordion only expands as much as the first accordion, requiring additional space to display its content properly. Any assistance with resolvin ...

What is the reason why calling setState does not update the local state?

Hello everyone, I came across an intriguing React task and I'm struggling a bit with finding the solution. Task: Can you figure out why this code isn't working and fix it? Code: class BugFixer extends React.Component { constructor(props) { ...

Google Analytics does not include e-commerce tracking capabilities

Testing out the e-commerce-tracking feature, I modified Google's standard-script to ensure its functionality: <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i ...

Having issues with Bootstrap affix functionality malfunctioning

I recently put together documentation using the CSS and JavaScript from Bootstrap docs. Here is a snippet of the sidebar code in my documentation: <div class="col-md-3 docs"> <div class="bs-docs-sidebar"> <ul class="nav docs-sid ...

Updating elements across multiple arrays within a single document in MongoDB efficiently

I've encountered an issue while trying to update elements of multiple arrays using $push with comma separated values. When I attempt to include both arrays in the update like this, it results in an error. How can I achieve this? var conditions = { so ...

The md-items function is experiencing issues with updating the suggestion list correctly within the md-autocomplete feature of Angular Material

I am currently utilizing md-autocomplete, and I am facing an issue with the md-items not updating the response list correctly from the Service Host - Ajax Call. Here is the HTML Source Code: <md-autocomplete flex required md-input-name="autocomple ...

Enhancing nested mongoose arrays by a particular value for updates

In my mongoose schema, I have an array that contains items and another array. var mongoose = require('mongoose'); var Schema = mongoose.Schema; var CompanySchema = new Schema({ dateCreated: { type: Date, default: Date.now }, ownerId: { typ ...

Creating a simulation of a JavaScript callback within a C# host program

Currently, I am in the process of developing a c# application with an embedded web browser control. In this project, I'm facing a challenge where I need to call a C# method from JavaScript and pass a JavaScript callback using the dynamic technique exp ...

Tab knockout binding

I have a section in my HTML with 2 tabs. The default tab is working properly, but when I attempt to switch to the other tab, I encounter an error. Can anyone provide assistance in determining why this error occurs? Here is the HTML code: <ul class="na ...

What effect does setting AutoPostBack to "true" in an ASP dropdownlist have on the fireEvent() function?

I am currently working on an aspx page. This page includes three dropdown lists and a button, all of which are populated dynamically based on the code written in the code-behind file (.cs file). To achieve this, I need to utilize two event handler methods ...

Personalized Pinnacles featuring Angular directive elements displayed on a Bing Maps interface

I've implemented the Bing Maps AJAX Control to showcase a map, and I've crafted an Angular directive specifically for the Pushpins intended on the map: app.directive('myPin', function(){ return { restrict: 'E', ...