Javascript – Which should generate the HTML: JavaScript or php

code generationhtmljavascriptPHPtablelayout

Quick question, looking for some recommendations. I have a site that will be requesting data from a database and displaying back to the user in a table. I am using jQuery (AJAX), php, and MySQL.

Where is the best place to generate the HTML for the table to display the data: should the php generate it and send the whole thing (HTML + data) back from the server, or should the php just send back the data, and the jQuery code make the table and insert the data?

Although this is running on an intranet, the I would still prefer the speediest approach.

UPDATE:

I wanted to add a little additional information to this topic in case it might be useful to others. I agreed totally with the separation idea presented here, and went with that as my design approach. I used PHP to retrieve and organize the required data into JSON, and then used jQuery to generate the HTML to display the returned information. In this case, I was creating a spreadsheet style table form using jQuery, and populating "cells" that had values as returned from the PHP. With a few rows and columns, things ran fine, but as I increase to say, a 16 x 16 table, dynamically creating the input elements with jQuery…

At this point, I once again ran up against the ugly spectre that is IE6.

IE6 is still the approved browser where I work, so my app has to function on it. When I test my design on Firefox and Opera, the interface loads fast and is a pleasure to use. When I run the same code in IE6, it takes far too long to generate the interface; long enough that my users would start clicking things again, thinking the app was not responding. I can only chalk this up to the JavaScript engine that is in IE6 since the code runs fine in the newer browsers. So, because of this, I am back to a redesign for part of the interface to have the PHP generate at least the inner table form elements, populate with data, and then send that back to the client. It breaks the nice separation I wanted, but I don't see any other way to speed things up on the client side in IE6.

Anyway, just thought others might be interested in the results here, and for other beginners like me, how much browser support requirements can affect design choices.

Best Answer

A good strategy is to use a "separation of concerns" approach i.e. use the Client Side to make things pretty on the GUI aspects.

Also note that this strategy aligns well with the current trends on the Web e.g. Google Web Toolkit (GWT).