2

I am currently working on a web app where the database has tons of data. Speaking about millions of millions. In cases where I want to display a table with all that data (with navigation and other filtering functionalities FOR ALL DATA, using the Datatable library for instance) -

How is the best proper way to display it?

I reviewed a few posts like: How to pass variables and data from PHP to JavaScript?

And I'm still not sure if the Ajax way is the best method in this case: It involves a new http request that might take longer than printing data directly to the page, especially when there's a lot (..A LOT!) of data. I would be loading a page with an empty table and waiting for data to get back from the server.

Printing all the data directly to the DOM and manipulating it - with a lot of data it might "flicker".

The third method includes printing the data directly to a JS variable (lets say a JSON is returned from PHP), and, well, insecure and not clean, ect' ect'.

Which is the best method to my case? Are there any other methods recommended? Does React offer any proper solutions for these kind of situations? How?

And just from curiosity, working with Nodejs solve this kind of situations? (I'm not going to change to nodejs, just curious)

Imnotapotato
  • 5,308
  • 13
  • 80
  • 147
  • Pretty sure that much data shouldn't be transferred over the wire anyway - better to take the user's query, make a request, and then display (say) the first 500 matching entries, and request more if the user gets close to the bottom. Let the server handle all the heavy lifting - don't force it on the client. For medium-large amounts of data, I would put it in an ` – CertainPerformance Apr 17 '18 at 08:32
  • Are you making another Google –  Apr 17 '18 at 08:41
  • @ArtiSingh an other kinda Google Analytics – Imnotapotato Apr 17 '18 at 08:46
  • Oh yeah! You are right @Rick –  Apr 17 '18 at 08:49

1 Answers1

1

It is sure that You want an ajax call. Don't try to fetch all data at once - it will be painfull to everybody. Just take part of data which You can show to the user at first. Rest of the data could be fetched if it's needed (after scroll down or used pagination). Ajax calls aren't so slow that user will wait few seconds for new portion of data. Worst idea will be fetch all data at once and force user to wait and wait for page loading (not mention about wasted transfer).

bigwolk
  • 418
  • 4
  • 17
  • Ok, so going with ajax, not fetching all data at once. This means I need to display some primary data to a user in the initial loading of a page (lets say a table of 10 rows and a general graph) with the option to navigate and fetch new data via ajax calls to the server. Is there an easy way to write such code? The first thing that comes to my mind is using modular structures in my code(both js and php), but there will be some views that will need slightly different customizations to display data. is this how things are done "in real life"? (excuse me, but i never handled such cases) – Imnotapotato Apr 17 '18 at 09:16
  • Yes, You understand it correctly. For handling with this kind of data there is many [datatables](https://www.google.pl/search?q=datatables&oq=datata&aqs=chrome.2.69i57j69i60j0l4.4077j0j7&sourceid=chrome&ie=UTF-8) - I'm don't know what are You using for frontend, but I'm sure You will find something for You. It has implemented pagination, ajax calls, etc. You just need to configure it correctly and create route to get data based on ajax calls. – bigwolk Apr 17 '18 at 09:24