If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

The first question I'll ask is, will this data be static? If it will be then you won't need an actual database or any files on the server and the data can be placed into objects.
However, if the data will be changing then since it's tabular, a MySQL database would probably be best. But javascript cannot read or write directly to any MySQL database, thus you'll need PHP to serve as a bridge between the two. Javascript can send and receive data from a PHP script that reads/writes to your database.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"

Awesome! Great information for a newbie. It will be static, but again, there will be a few tables used interchangeably, swapped by a triggered event. Would it be best then, to just include multiple tables in the html file?

Since the data is going to be static it would probably be easiest to simply load the data into javascript objects and avoid actual databases. However, a couple of things to consider would be filesize and page speed. I'm not sure how much data you have, though I think this principle should apply reguardless.

You'll probably want to code these 'tables' of data into javascript objects. Then you'll want to include this javascript as an external script. You can have your page load this script asynchronously to avoid slowing down your page load times and prevent unnecessarily large filesizes.

There are a lot of things that could be said and shared about javascript objects but for the sake of simplicity in your case I'll give you the most basic and relevant example I can think of:

Code:

var $table1 = [
{"Column 1": "Here's some data in the first column", "Column 2": "Here's some more data", "Column 3": 1234, "Column 4": "The data could be any number of data types, such as strings, numbers or boolean values."},
{"Column 1": "This will be on the second row", "Column 2": "foo", "Column 3": 5678, "Column 4": "foo"},
{"Column 1": "This will be on the third row", "Column 2": "foo", "Column 3": 9012, "Column 4": "foo"}
];

This is effectively an array of objects. Each new index in the array would be a new row in a table. Following the object format you have a key and then a value (the key being your column name and the value being the data for that cell in the table). You could duplicate this any number of times to create multiple tables that could be loaded.

Now, as for loading this bit of code into some HTML that would be some form of a table, below is just a basic example of a function that will take the above format and turn it into a table.

The last line is just a simple way of generating a table with this function and placing it on the page somewhere. This code is a little sloppy, but it's mainly to show you how this can be done with objects. I wouldn't use this code for production but it can be used to get you started. Just make sure to refine the code and try to understand what it's actually doing.

"Given billions of tries, could a spilled bottle of ink ever fall into the words of Shakespeare?"