I have a webpage which contains a table for displaying a large amount of data (on average from 2,000 to 10,000 rows).
This page takes a long time to load/render. Which is understandable.
The problem is, while the page is loading the PCs memory usage skyrockets (500mb on my test system is in use by iexplorer) and the whole PC grinds to a halt until it has finished, which can take a minute or two. IE hangs until it is complete, switching to another running program is the same.
I need to fix this - and ideally i want to accomplish 2 things:
1) Load individual parts of the page seperately. So the page can render initially without the large data table. A loading div will be placed there until it is ready.
2) Dont use up so much memory or local resources while rendering - so at least they can use a different tab/application at the same time.
How would I go about doing both or either of these?
I'm an applications programmer by trade so i am still a little fizzy on the things I can do in a web environment.
Cheers all.
Regarding the first part, it's called Ajax: display the page without the table, or with an empty table, and then use ajax requests to fetch the data (in html or any data format) and display it.
Regarding the second part, you want something called lazyloading: the possibility to load data only when the user needs it, ie when it's on the visible part of the document. You can look at this question for a DataGrid library capable of handling millions of rows.
Two basic options:
Pagination
Lazy loading (load as user scrolls down). See this jQuery plugin
You could try a couple of things:
Loading data Asynchronously
and
Paging
Related
I have a web page that contains a table wherein you can edit every cell content. The typical size of this table is about 12 columns and 40 rows. This page is typically used by teachers to encode grades here in our area. But our area sometimes has a poor connection, and what happens is sometimes, teachers would lose the encoding they did (they typically only save after encoding everything).
So right now, I am thinking of implementing an autosave feature. I think the solution I'm thinking of is straight-forward: every time a cell gets edited and then loses focus, do an ajax request to save the data. At least that's what I'm thinking.
My concern is since there's a lot of people using this at the same time, wouldn't that be too heavy, every edit, access the DB, and insert or update? And also, I've tried it a bit and the UI became a bit choppy when moving from one cell to another. My main question basically is, is there a pattern or guidelines I can use for implementing this?
I'd need more details on what your api design to help come up with the most optimal solution but here are some high level approaches you can consider
On each cell update only update the diff (the exited cell) and not the entire dataset to keep the api call as light weight as possible
Look into using IndexedDB or Local Storage to save a copy of the data in the browser as they update cells. In case of a lost connection you can restore the user's session.
There are some points here for your problem that I mentioned and try to say its solution:
First, you have to think about concurrency. If you need to show table content for a long time to your users, It is possible to change contents by other users at the same time, and the current content will expire! So you could keep your table content update continuously! one solution is to use RowVersion in DotNet For this purpose (Optimistic approach for concurrency). Another solution is using SingnalR to keep tables update all the time (I mean Real Time).
In addition, there is no serious problem with update and edit according to a user request in regular systems but in an enterprise solution you can scale up or scale out your structure.
I looked at "Generating HTML Page on the fly" on this website, but most of it was over my head.
I have a 2 part question that I would like assistance with please.
I want to fill a narrow vertical container, <div id=”counter”> with the numbers 1 .. <xx>.
<xx> is determined by the record count of a database, filtered “on-the-fly”, by the user choosing a category (no problem there – I have an SQL background)
Eg. Category1: 1 .. 200
Category2: 1 .. 6
These numbers could change over time, as I want to allow users to add content to the database (vetted of course).
I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.
I have created a small website of a similar nature to that, hard-coding all the images and links, but I am looking at 3000+ images (as a starting point here), and they differ per page.
I have created this scenario many times in stand-alone apps and from past experience, I thought perhaps, I could create a javascript routine which would use a loop to
• print the numbers to the <div> using the getelementbyID ( ).
• Fill an array with the record number, a title and an image link.
Question 1: Is this possible or am I beating a “dead horse”?
If it is possible, any suggestions would be gratefully accepted.
Part 2:
My current idea is that, as the user hovers the mouse over any number, a mouseover ( ) event will occur that will read the appropriate array record and display the <title> as a tool-tip-text.
If the user clicks the number, a function (I have yet to write) will read the appropriate array record and attach the image link to an <a> tag, and subsequently display the appropriate image to the screen.
Question 2: repeat of question 1.
I have viewed a number of website source code pages (of similar ideas eg. Surgicalexam.com), but they have all been hard-coded and are distinct pages per category.
Why are you so sure about that? You can't see php-code, because it is executed on the server. There is no way to know if it was hardcoded or by php
Answer:
It is possible.
If I understand this correctly, you want to read some data from a database and if the user clicks / hovers something, you want to load more data?
You have to splitt this into two things:
Load data with PHP from the db (Server side)
If you want a live, visual feedback you need JavaScript (and/or CSS3) to do changes. (Client side)
One possible solution is to create a API with php (maybe REST-like) and then call that api with JavaScript.
You could also do everything with PHP but this will require a reload of the website on every click. PHP cannot do changes On-The-Fly.
First of all you should learn the basics about web development.
And most important: If you decide to learn Web-Programming: learn about security, too. For example things like Cross Site Scripting and SQL-Injection. Never trust data coming from a client (e.g. JavaScript)!
Let's suppose a web page located at /items, listing all the available items.
When the user clicks on one item, the browser shows /items/:itemId and present the item's details.
Of course, the items list could be very large.
That's why I'm using the scroll infinite feature from Ionic (Framework I'm using based on Angular).
However, as many developers know, handling the "back button" from /items/:itemId to /items is tricky since the Angular's controller is destroyed during the page transition and then rebuilt when the list page is loaded again.
Therefore losing the scroll position and the exact items already loaded before clicking on an item's detail.
I think about some solutions, but I hesitate since all have a "drawback":
Storing the actual loaded items (the complete items) in $cacheFactory (Angular's cache or localStorage) just before the item details is about to be shown.
Thus, when the back button is pressed (on the detail page), the /items's controller can init the data from the cache, and besides the scroll position could then be easily "remembered".
Drawback is that the data in cache may be stale...
"No need to store any loaded items in cache!" Just store in cache or localStorage the actual number of chunks loaded.
For instance, my REST API allows to retrieve items 10 by 10.
If the user's was loaded up to the second chunk (up to 20 elements so), a variable in cache would contain this value and the controller could then be init with all the 20 items initially.
Drawback is that it would involve several requests to server. Indeed, if the user loaded 30 chunks, the controller would need to make 30 calls to server...
I could customize the size of chunk processed by the server, but one item is heavy (several long texts etc.. lists of anything), explaining why I limited to a relatively small number.
Using a bidirectional scrolling (top and bottom), so that there's ALWAYS 10 items in the DOM. I would just need to store the last number of chunk already loaded, in order to reload it.
Drawback: I would have to write my directive myself (possible so) since there's no Angular (neither from Ionic) directive currently.
And I imagine that bidirectional is useful only when dealing with very very large list: more than 2000 rows, in order to lighten the DOM.
I don't expect more than 400 rows in a majority of my cases...
What is a good practice? Maybe another solution?
This is kind of a cheat, but what about using a Modal (http://ionicframework.com/docs/api/service/$ionicModal/) to render the detail?
I have a simple rails app with a model Task, which has 10 rows. It does not matter what's inside this table. On the index page I can see all 10 elements and I need to arrange them in proper sequence, when I did this, I should see a message "Done".
If I understand correctly this should be implemented in javascript, because page should not be reloaded, right?
I want to be able to rearrange the elements via drag and drop.
How I can realize that function?
I would start with here -> http://jqueryui.com/demos/sortable/
You can sort and its quite simple as there great examples on the site how to do this and hook into events.
I am looking for a way to display a list of websites one at a time from a URL list. I'm fine with a very manual solution, I found an AJAX solution where each "page" is displayed in a tab but it is very heavy because if I have 50 pages I want users to page through one at a time, this solution essentially pulls all 50 pages onto the one page. Do you know of a framework which does the same thing but only loads one page at a time? Thank you very much for the advice and help. Here is the site I found - http://css-tricks.com/jquery-ui-tabs-with-nextprevious/
You could load the URLs into an array and then create a 'next' button that loads the next url into a div; replacing the previous one.
do you require doing this will javascript?
might be easier to curl the pages using php, then echo this returned data as an eval-able array into the html. Then allow user to alter which part of the returned array you are looking at using a next and prev button.
if you pre-load each one it will be heavy as you have noted.
This idea is screaming for AJAX. With proper AJAX calls, you would only load a page once it has actually been selected by tab. Any previous page loaded into the area would need to be dumped. You shouldn't actually need to physically switch tabs if you're using the src attribute of an iframe, simply changing the src and forcing it to refresh itself should accomplish the trick. If you are performing a screen scrape through a remote web service, then you could simply use jQuery/AJAX to rewrite the innerHTML of the panel in question.