This is a simplified scenario to cut to the chase: I have one webpage with a table of data in grams. You can click on the table header to sort columns by their data, or click on rows to highlight them. There’s also a graph on the page, and a script on the page pulls data out of the table and uses it as data for the graph (this includes rows that are highlighted, which highlights lines in the graph at the same time).
Now, I’ve taken values in the table that are over 1000 grams, divided by 1000 and show them as kilograms, so one column in the table has a mixture of grams and kilograms to help reading the data. However, this messes with the logic in all of the above.
Do you think I should hide the machine-friendly (MF) data in hidden columns to sort by, and display human-friendly (HF) columns? Should I include the MF data in each table cell, hidden with span tags? Or is it worth it to completely decouple MF data on the site? It seems like any of these solutions will involve a ton of rewriting data retrieval, sorting, and/or graphing code. What’s the most encapsulated approach?
Consider storing all your data in a javascript variable (not displayed on the page at all), and then outputting the data as HTML using some templating library. Have a look at jquery template for a start – http://api.jquery.com/category/plugins/templates/
Edit: the above API link doesn’t give an example. Try this: http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-an-introduction-to-jquery-templating/