I would like to display to user a table which contains ~500,000 rows.
The table should be calculated based on a file (i.e. the table is known at the beginning, and does not change).
I guess that building the HTML text of this table is not a good idea in terms of memory performance.
So how can I build such table ?
I would like user to be able to scroll the table using a vertical scroll bar. Is it possible to build on the fly only the visible part of the table ? I'm afraid to see delays because of this.
Is it a better idea to use server side programming rather than Javascript ?
I'm not restricted to any server side programming language, so any advise would be appreciated !
Send the first 250-ish rows to the user, as he scrolls down, perhaps past row 200, fetch the next 250 rows, append to the table and so on.
This is a (ui) design pattern known as "Infinite scroll".
Displaying 500,000 rows all at once to a user is a bad idea. Consider other options:
allow user to download file as CSV
show paginated (still not very useful)
provide filtering mechanisms (by date etc.) to allow the user to only see the data they need
If the users really needs to see all that data at once, then viewing it in the browser is one of the worst ways to do that - they should be using a tool made specifically for viewing data, like Tableau.
Classic example of where to use ajax.
Use javascript in combination with a server side script.
This really is a case for server-side pagination, I would say, maybe in combination with Ajax. A HTML table with 500.000 rows is going to crash a lot of browsers.
You're not specifying which server side technology you work with. If you update your question, I'm sure people will be able to give you some pointers.
Try this:
Clusterize.js
Tiny plugin to display large data sets easily
https://clusterize.js.org/
Is it possible to build on the fly only the visible part of the table ?
If you build a "fake" scroll (e.g. jquery slider) you can retrieve parts of the table instead of the whole.
Related
I'm working on a project involving data in JSON (later it will be stored in SQL DB) and visualizing it in a dynamic HTML table. Right now I'm reading through the JSON using javascript and create the table accoring to that. After that, while filtering, I'm hiding/showing the involved rows. Would it be a more clean solution to re-read the JSON and re-draw the table using the current filter conditions or using hide/show is a better solution?
Thank you for any help!
I think hide/show may be good for performance that you don't need to refetch the same data from DB everytime you make filter and change the conditions then return to the first one.also refetching data may not be good if your data is huge so your system will be slower.
So from the perspective of system performance I think hide/show is better.
I'm trying to make a table that is two columns. The one of the left will have many rows and a scroll bar. The one on the right will be a big box that I'll have buttons in that will change when you click on a different block on the left. Is this even possible?
Offcourse this is possible, almost everything is possible. I made some assumptions; the box on the right is some sort of detailed view of the record on the left? Ans because the question is tagged as javascript it should be a ajax call or something.
It is not so much if this is possible in Rails, on the back-end it would be a simple model with a number of records. On the left you'll have a list something like; Item.all.select( :id, :name ) which could be available from /items.
On the right the route /items/{id} should be defined to retrieve one item Item.find_by_id( {id} ). If you want it to be responsive you can respond with json so that you can parse it to html using javascript. Backwards compatibility would be that if you'll go to /items/{id} with your browser the detailed version should already be loaded.
I suggest you'll take a look at http://guides.rubyonrails.org/getting_started.html. Ruby only does the back-end, it serves pages. It does nothing with styling or responsive design.
For the styling and scrolling on the left side of the page, I suggest you'll use a list or just div's, a table is not very easy to style I'm not sure what you're styling skills are. But it has nothing to do with Ruby or Rails. Perhaps you can use bootstrap or some other html/css framework.
For the responsiveness you can use JQuery.get. For the basic idea, I suggest looking into http://www.w3schools.com/jquery/jquery_ajax_intro.asp, it is far from perfect but it will give you the idea.
i am currently developing a website(related to fitness) client wants to make a feature, that will allow user to select a workout plan based on the choices you pick from a slider similar to the one on this example.
What i'm trying to figure out if this can be done with CSS or would I need to implement JavaScript / jQuery ?
Any help with this problem is appreciated. I just need a nudge in the right direction of where to start.
Edit: i have found jQuery-Smart-Wizard that partially does what i want would i be able to manipulate this to have choices and load a certain page depending on the choice made?
CSS is design-related, as in colors, sizes, and layout. If you want conditional navigation, and to parse form data, you'll need to use jQuery/JavaScript to manipulate client side (optional), and some sort of server-side language such as PHP to manipulate the data and information.
I have a table with many entries (4000 - 5000) with 5 columns. These are paginated and only about 20 rows are shown at a time although all data exists at the client side.
I want the user to filter different column by categories (and if possible using some wildcards), this user input will be taken using something like Form input. Note that i can perform all the operations using Javascript code, however i am unable to understand what kind of UI elements do i need to use for this purpose (I am not from a web dev. background but learning the tricks). I tried using libraries such as selectize, researched some Jquery UI plugins. In fact i also found a spreadsheet specific library (slickgrid.js) but it is slightly beyond my skill to implement.
So in essence is there a simple way to get user input to select categories in a column(s) with all data in client array ? I would love to reach a stage where i may be able to group column categories and use them to give autocomplete/ dropdown menus etc. However i am just trying to figure out a reliable way to translate user input to string to be used in code.
I am a relative JavaScript beginner. I am comfortable working with documents (document.getElementById(...) and document.getElementsByTagName(...).. and other document querying functions.
I have been asked to create some sort of a table pagination library for my team. We don't use jQuery or any other third party libraries. So I would have manipulate the table dom or something like that to make it work. In this library, I would have to be able to
set up flexible pagination (Number of rows to be displayed per page may be configured by using some sort of a text box) I took a look at some of the sources jQuery Pagination Plugin. But I can not understand it.
The user should be able to navigate back and forth using some icons. The page number changed should be reflected in the configuration box.
I am not asking for solutions because I would learn to do this on my own. How can I start working on this issue?
Update after observations from nnnn
I am not sure what approach to take, as I had not considered that possibility. Most of the times, we have only about 2000 records to display. I guess if the load does not take too much memory, I would prefer to load before hand and then try to paginate it. Although, I will go with whatever is recommended.
I would highly recommend taking a look at the jquery datatables plugin http://datatables.net/
If you want to implement your UI and just need an Object to handle pagination logic please see this library: https://github.com/pagino/pagino-js