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();
});
I've been working on creating a logo section for my website, but I'm struggling to make it shrink as users scroll down and expand back to its original size when they scroll up. I've tried various JavaScript and jQuery functions without succe ...
Looking for help with some HTML code: <li><a href="#" class="lstItem">Testing jQuery [First Bracket]</a></li> <li><a href="#" class="lstItem">Loving jQuery [Second one]</a></li> I need to remove the text in ...
I've encountered an issue regarding the console.log function that seems related to a specific case I found... JavaScript array length problem Upon checking my console, I noticed this output: https://i.stack.imgur.com/AbCdE.png The code snippet in ...
Error 404 when Sending Data from Axios POST Request to Express Server Hey there! I'm currently working on setting up a user authentication server for a project, but I've hit a roadblock while attempting to send a POST request to my Node.js Expre ...
Having issues retrieving JSON data from a URL that displays the last 3 numbers of a webpage. The AJAX call functions correctly in Google Chrome but fails in Internet Explorer. I tried disabling caching using cache: false as suggested, but the problem persi ...
Creating a simple contact form as a WordPress plugin, I have developed a form as a popup within the same page: <form method="post" id="w_form" enctype="multipart/form-data"> <label for="first_name" class="text-secondary">First Name</la ...
I am attempting to add a table column to a table row using the code below: var row2 = $("<tr class='header' />").attr("id", "SiteRow"); row2.append($("<td id='FirstRowSite'><span><img id='Plus' s ...
I have a project in mind that involves using npm. Specifically, I want to incorporate react-bootstrap into it. To kick things off, I already have a package.json file with the necessary dependencies. { "name": "simple-webapp", " ...
Is there a more efficient way to conditionally create a property on an object without having to repeat the process for every different property? I want to ensure that the property does not exist at all if it has no value, rather than just being null. Thi ...
This is the specific page I am attempting to crawl, and this is the corresponding AJAX request that fetches the necessary data. I have replicated the same AJAX request with identical headers and request payload. While the request does not error out, it re ...
In the previous iterations of nextJS, there were JavaScript files in the app directory; however, in the most recent version, TypeScript files have taken their place. Is it still possible to begin development using JavaScript? I am working on creating an a ...
I am currently working on a software that takes a string, divides it, capitalizes the first letter of the first string, and capitalizes all letters in the second string. Below is the code snippet: var fullName = "ThEoDORe RoOseVElT"; function nameEditor( ...
Is there a way to apply multiple background colors to a material UI snackbar? I attempted using linear-gradient as shown below, but it didn't work. import Snackbar from 'material-ui/Snackbar'; const bodyStyle = { border: `2px solid ${co ...
I am attempting to implement a delay in my AJAX data processing so that the loop runs a bit slower. Here's the code I'm working with: $(document).ready(function (){ $('#button').click(function(){ $('#hide').show ...
Looking to process an input string in a specific way - // Input string - 'My pen cost is !!penCost!! manufactured in $$penYear$$ with colors !!penColor1!! and $$penColor1$$' // Processed string 'My pen cost is <penCost> manufactured ...
Is there a way to dynamically modify this CSS style using JavaScript or in an Angular framework? .ui-grid-row.ui-grid-row-selected > [ui-grid-row] > .ui-grid-cell{ background-color: transparent; color: #0a0; } .ui-grid-cell-focus ...
I have a table with the following data: +---------+--------+---------+--------------+ | ID | Data 1 |Customer | Alternative | +---------+--------+---------+--------------+ | 1 |1abc | 1 |1 | +---------+--------+---------+- ...
I have two applications, appA for front end and appB for admin end. In appA, I am building an array called queries using a service through a controller. However, when I try to retrieve this array list in a controller in appB, it appears empty. Everytime ...
Is there a way to access the logged in user data without needing to make a request to any route or endpoint? //for example, how can I retrieve the id of the logged in user here? router.get('/',function(req,res,next){ //typically we would acce ...
My goal is to fetch data from a MySQL database hosted on a webserver and display it in an HTML table. I've been following an example on W3Schools, but I'm facing issues retrieving the data successfully. Here is the source code: (HTML) <html& ...