Best way to code this table

aaaaaaaahhhhhh

Hey All
Novice dev here.

I have a site and need to put the content of the attached excel on a page in the site.

A table is too messy due to the size of the content(visually it looks terrible)

What I would like is for a user to choose two parameters - The event and the Occup. The result will be that where a user chooses their specified event and the Occup then the costs over the last 12 years will be returned.

What is the best way to do this? HTML? SQL? etc

Cheers

Tom Dunne

A normalised set of tables in a database is what springs to mind.

John_C

What's the aim of this project? Is it a college/hobby project? On the face of it, there are several parts to this; a db, as well as server and client side code. Are you trying to practice a particular skill set?


If you want to get this done as easily as possible; I would suggest skipping the db and server side code. The data set is small enough that you could load it all onto the client and work from there. If that's what you want to do, I'll give you a few pointers.

aaaaaaaahhhhhh

John_C wrote: »

What's the aim of this project? Is it a college/hobby project? On the face of it, there are several parts to this; a db, as well as server and client side code. Are you trying to practice a particular skill set?


If you want to get this done as easily as possible; I would suggest skipping the db and server side code. The data set is small enough that you could load it all onto the client and work from there. If that's what you want to do, I'll give you a few pointers.

Its a hobby project. I have a site which informs users about traveling to these events.
It is created using Serif Webplus, however the table component of the software makes the table too large visually with no room for adjusting spacing etc.

No particular skill set is required to be practiced here, I just need the table to do the requirement which is show users the cost of packages over the last x number of years.

Not using a DB would be the preferable option in this case.

counterpointaud

aaaaaaaahhhhhh wrote: »

It is created using Serif Webplus

Looks like you may have hit a limitation of this platform, you should email them and ask if there is a platform specific way to do what you want. If not, and you want to stick with the platform, it should be possible to do it with a client-side db (assuming the data is not sensitive), but you will have to know some JavaScript. I like PouchDB for this, but you could use IndexedDB directly. https://developer.mozilla.org/en/docs/Web/API/IndexedDB_API.

You could also, just send the data down with the client, and not use any db at all (just keep in memory). But you still can't escape managing it yourself with JavaScript unless the Webplus platform supports it.

EDIT: It looks like Webplus allows you to deliver your own Javascript, but I'm guessing if you are using something like that, you want to avoid that.

John_C

aaaaaaaahhhhhh wrote: »

Its a hobby project. I have a site which informs users about traveling to these events.
It is created using Serif Webplus, however the table component of the software makes the table too large visually with no room for adjusting spacing etc.

No particular skill set is required to be practiced here, I just need the table to do the requirement which is show users the cost of packages over the last x number of years.

Not using a DB would be the preferable option in this case.

If that's the case, I'd definately just write the data into a JSON object. It's not a huge amount of data and it looks like it only changes once per year. That way you can skip most of the work.

I don't know anything about Serif Webplus but I've set up a codepen with the architecture I'd suggest you use: http://codepen.io/jtcraddock/pen/zNOKwj?editors=1010
In the pen, there's a list of people with their hair colour. You can use the form to select a colour and display people with matching hair.

There's 3 parts to this;

1. An array with the data (people in my example, sports packages in yours).
2. A form for the user to make selections.
3. Some javascript code update the view with the selected data. This is a function called showPeople in my example.

Aside from this, you mentioned that the data is too wide to fit into a table. This will still be the case, even if you're only showing 2 rows. You'll still need to decide how to display the data.

John_C

Actually,
I have a second solution to this problem which I prefer. I put all the data into the html and then show or hide it using css, depending on what's selected in the form. I've grouped a list of people by gender and then by hair colour. They're hidden by default and a persons name is visible if they match the selected gender and hair colour.
This keeps your view logic out of your javascript entirely, which I much prefer.

http://codepen.io/jtcraddock/pen/NdKQLb?editors=1100

aaaaaaaahhhhhh

Cheers Guys
All great solutions.