Is there a way to speed up the loading time of a <table> with 20000 rows?
As I scroll through the page, it feels very sluggish and takes around 4-5 seconds to load the remaining table data.
I'm unsure how to tackle this issue, which is why I haven't included any code snippets here.
If you're facing this particular issue, the ideal solution is to implement lazy loading for your data.
I have two recommendations for you:
Integrate Pagination into the table. This way, only a few records will be loaded initially, and the rest will load based on the page selected by the user.
Pseudo Code:-
//Step 1 :- Divide the data into chunks, for example, if you want to split it into 3 pages, each page should have 20000/3 records.
//Step 2:- Show the records from the respective chunk based on the page clicked by the user.
Incorporate Infinite scrolling in the table so that the user sees some records fitting the screen height, with extra data loading as they scroll. You can also preload additional data for seamless scrolling.
Pseudo Code:-
//Step 1 :- Determine the viewport height (portion of the screen visible to the user), and load records compatible with this height. Additionally, load a few extra records. For instance, if the screen displays only 40 records at once, initially load 45 records on the screen.
//Step 2:- Continuously listen to the scroll event to add the next set of 45 records/rows to the table as the user scrolls further.
Code snippet to listen for scroll events and load more data-->
const div = document.querySelector("#div-container-for-table");
div.addEventListener("scroll", () => {
if (div.scrollTop + div.clientHeight >= div.scrollHeight) loadMore();
});
My goal is to have my code send specific username strings to the Profile page using the username props retrieved through the find() method and store the result in a function named user. However, I'm facing an issue where the find method doesn't c ...
I am currently facing a challenge with my practice of AJAX/jQuery coding. Despite my efforts to learn and improve, I find the concepts of jQuery and AJAX quite perplexing. Specifically, I am struggling to understand dataTypes and how to manage different ty ...
I am currently working on a script that involves numerous ajax requests. The script is functioning well, and it features dynamic content that changes based on user selections or search inputs. I have been exploring how to manipulate the browser history in ...
Recently, there has been an increase in tutorials and examples discussing Isomorphic web applications with react.js. As a beginner myself, I find it challenging to determine whether this is necessary or not. For instance, my application will primarily be ...
In my quest to learn React. I perused w3school's guide, but alas, the specific case I seek was not found. Even Google failed me in this pursuit, leading me here to pose my question. Behold, the code in question: <FooComponent foo="bar"> {( ...
When I apply the following JS code snippets, my output is incorrect or does not display at all. Below are the codes in question: if (location.href != "website.com/page1" || "website.com/page2") { element.style.backgroundColor='none'; ...
While developing my application using Reactjs, I encountered an error upon running it. The error message states: Subsequent variable declarations must have the same type. Variable 'WebGL2RenderingContext' must be of type '{ new (): WebGL2 ...
One issue I encountered was when upgrading from React 17 to 18, ReactDom render became asynchronous. To handle this, I needed to use #act to wrap the ReactDom render. However, React also required that all setState calls be wrapped with #act. If not done, ...
I am facing an issue while trying to load a web page within a div using an ajax call. Unfortunately, it's not working as expected and displaying the following error message: jquery.min.js:2 [Deprecation] Synchronous XMLHttpRequest on the main thread ...
I am new to d3.js and my JavaScript skills are at a basic level. Thank you for your assistance, it is greatly appreciated. Total Clicks per Campaign I have a CSV file with columns: "Campaign" and "Clicked". The "Clicked" column contains values: Clicked ...
Recently, I started following a jQuery tutorial on the phpAcademy channel hosted on thenewboston. In this tutorial, they demonstrate how to create an email validation form using ASP.net instead of PHP. However, despite following all the steps in the tutor ...
I'm in search of a solution to automatically beautify whitespace in my JavaScript code. I have come across tools like JSLint and JSHint that can check for indentation and trailing spaces, but they might not cover all types of whitespace issues. My ch ...
In this snippet of code, I am utilizing the 'java' module in node.js to create Java objects. Specifically, I am creating four Java objects and aiming to consolidate them as a single object by using the variable 'args' to store these Jav ...
Hello all, I am new to AngularJs and encountering an issue with my code. Currently, my HTML structure looks like this: <div class="wizardContainer"> <wizard on-finish="finishedWizard()"> <wz-step title="1"> <h1>Questio ...
Here's an element on a website: <span class="log-out-ico" ng-click="logout()"> Instead of clicking it, I want to run the "logout()" script from selenium. Is that possible? If so, how can I do it? This is what I attempted: I ...
If you're looking to create a treeview using Vue.js, the code structure would resemble something like this: HTML: <!-- item template --> <script type="text/x-template" id="item-template"> <li> <div ...
When using jQuery AJAX to call a Spring REST service, it is important to verify if the error callback functionality is functioning correctly. My understanding is that the AJAX error callback is triggered when the server returns a 404, 400, or 500 error c ...
I'm currently developing a weather application, but I've hit a roadblock when trying to tackle what I thought would be a simple task. Unfortunately, my limited experience with Angular has made it difficult for me to figure out how to achieve this ...
I am currently implementing a jQuery code to display a loader. Within my form, I have two AJAX calls - one triggered by an input field and the other by a submit button. Both of these calls refer to the same DIV id for displaying the loader. The issue I&apo ...
Challenge I am facing an issue with a slider menu feature that I integrated into a mobile application for navigation purposes. The menu is functioning properly - it displays, allows flicking of the initial links, and can be closed by pushing the backdrop. ...