Adding over 20,000 rows to a table can be time-consuming, causing the page to become unresponsive once the process is complete

Looking at my table structure, it appears as follows:

 <tr ng-repeat="friend in friends | orderBy:predicate:reverse">
              <td>{{friend.name}}</td>
              <td>{{friend.phone}}</td>
              <td>{{friend.age}}</td>
            </tr>

Any suggestions on how to correct this issue?

Answer №1

It has been mentioned in the comments that displaying 20k rows at once is not ideal. Even without considering Angular, having 20k rows on a page can be overwhelming for a browser.

I am displaying packet capture in the browser and I need all of them to be visible on the page simultaneously

The idea of having all the rows on the page at the same time is not practical. With limited screen space (around 1k pixels), it is impossible to view all 20k rows concurrently. Instead, focusing on creating a user-friendly experience for navigating through the data without burdening the DOM with all the rows is crucial. Solutions like paging and virtual scrolling are commonly employed to achieve this. These methods rely on the server's ability to handle data pagination efficiently. However, adaptations can be made for client-side data if it's already stored in memory.

If you prefer not to use paging or virtual scrolling, achieving optimal performance may prove challenging. The DOM's limitations make it difficult to manage such a large dataset effectively.

That said, there are Angular-specific solutions available for implementing virtual scrolling:

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

How can we store image file paths in MongoDB?

I'm currently working on developing a REST API using nodeJS, express, mongoose, and mongodb. I have successfully implemented file uploads with multer and saved the files to a folder. Now, I need to save the path of the uploaded file to a mongodb docum ...

Struggling to Implement Middleware on Router in ExpressJS?

In my application, I have both public and authenticated routes. The isAuthenticated function is used, for example, in a news controller. globalRouter: function (app) { app.use((req, res, next) => { logger.log("Endpoint: ", req.originalUrl); n ...

Leveraging the Google Geocode API through HTTP GET requests

I am facing a challenge in my HTML file where I have a map and I am using HTTP get with jQuery to retrieve a device's location. However, I am struggling to plot this location on the map. I need to parse the location information and display it accurate ...

"Looking to replace a character class pattern using regex in JavaScript? Here's how you can easily

I have a string: "\W\W\R\" My goal is to transform this string using regular expressions into: <span>W</span><span>W</span>\R This is the code I'm currently using: "\W\W\R".replace(/&b ...

Converting PHP array to a JavaScript object

I am facing a scenario like this: Having JSON data: [{ "1377412272": { "user_id": "1374050643", "date": "2013-08-24", "ip": "::1" } }, { "1377412279": { "user_id": "137405064 ...

Pass data to PHP using AJAX

Is it possible to pass the variable rowNumber to the PHP file dataSource in this code? function getData(dataSource, divID,rowNumber) { if(XMLHttpRequestObject) { var obj = document.getElementById(divID); XMLHttpRequestObject.open("GET", dataSo ...

Uncontrolled discord bot flooding with messages despite being set to send messages only once every 60 seconds

const Discord = require('discord.js'); const { Client, MessageAttachment } = require('discord.js'); const client = new Discord.Client(); client.once('ready', () => { console.log("Ready!") }) client.on(&apos ...

Exploring Angular Material Design's method for vertically populating a column

Is there a way to fill a column vertically in my current app? https://i.sstatic.net/uu4yO.png I've been struggling for hours trying to make the vertical items span the entire height of the page. I have pored over documentation and other posts, but I ...

Embedding controller variables into the view using Angular binding in HTML

Looking to connect a variable from the controller to the view: In the Index HTML file: <body ng-app="widget" ng-controller="WidgetCtrl"> <div ng-view class="chatWidget"></div> </body> In the controller: $scope.displaySched ...

After entering text manually, the textarea.append() function ceases to function properly

I've encountered a puzzling issue with a tiny fiddle I created: https://jsfiddle.net/wn7aLf3o/4/ The scenario is that clicking on 'append' should add an "X" to the textarea. It functions perfectly until I manually input some text in the te ...

Ways to obtain the <a> using the title attribute

Is there a way to remove 3 classes from a specific <a> element that is dynamically generated? The only constant is the title. How can I locate an element based on its title? I've searched online but haven't found exactly what I'm looki ...

Maintaining the functionality of an AJAX web page even after extended periods of inactivity

When using my one-page web app, I sometimes leave the page open overnight and find that when I come back in the morning, things don't work as they should. It seems like Javascript is acting up - edit-in-place loads incorrect data, ajax calls fail to f ...

Finding differences between two 24-hour format times using moment.js

Is there a way to compare two times in 24-hour format using the code below? $("#dd_start_timing, #dd_end_timing").on('keyup change keydown', function() { var DutyDayStartTime = $("#dd_start_timing").val().trim();// 13:05 var ...

AngularJS and Select2's Multiple - Tags feature can display tags intermittently, showing some and hiding others as needed

Currently, I am implementing AngularJS along with select2 (not using ui-select). In my view, the following code is present: <select name="rubros" id="rubros" class="select2 form-control" ng-model="vm.comercio.tags" ng-options="rubro.nombre for rub ...

What might be causing the issue with ng-controller not functioning properly in this particular scenario?

I'm following a tutorial but I am encountering issues with this code. Can someone please explain why it's not working for me and how I can solve it? I suspect the problem lies within ng-controller, but I'm not certain. <!doctype html&g ...

What is the proper way to provide parameters in a GET request using Axios?

Recently, I have been attempting to include the api_key in the get request parameter using axios Below is the snippet of my code: const instance = axios.create({ baseURL: "https://api.themoviedb.org/3" }); export function crudify(path) { function get ...

What is the method for displaying the value of a textarea?

I am relatively new to the world of coding, but I have already delved into HTML, CSS, and basic DOM scripting. My goal is simple - I want to create a comment box where people can leave messages like in a guestbook. However, when I input text and click on ...

When calling `getAuth()`, an object is returned. However, upon reloading the page, the

My code is extensive, so I have only included a portion that I believe is crucial. import {getAuth} from "firebase/auth" const authFirebase = getAuth() console.log(authFirebase) const Home = () => { ... return( ... ) } Every time I ...

Traverse div elements using jQuery and showcase the text within them

I've got a setup like the one below. I want to use jQuery to grab each link and display its href right below it. Instead of writing code for each div individually, I'm looking for a solution that works for all divs with the 'col' class, ...

In Javascript, merge two arrays together in a specific format

Can we transform two arrays into a specific format so I can create my D3 graph? Here are the two arrays I have: date = ["sept,09 2015","sept, 10 2015","sept, 11 2015"] likes = [2,4,5] I need to convert them to this format: [{ date: '...', lik ...