General Approach on Filling Tables with Database Response

I am a free lance web developer, and I always face the same problem. How should one fill the tables or any other data that are fetched from a database and need a GUI representation?

开发者_运维技巧

Options are:

1. Server returns all the GUI and the data. With HTML code embedded in it.
2. Server returns XML/JSON data and you fill it with inner javascript? i.e var gui = "<h1>" + data.title + "</h1">; $("myTitle").html(gui);
3. Server returns XML/JSON data with template embedded in it? {"title":"Hello!"..some other data....., {["<h1>%d</h1>], ["<a href='#'...]}"
4. Page that makes data request contains template in a hidden DIV, fills the data?
5. Or any other way that I might not know about?

---

for me- definitely option #2.
server shouldn't be aware of exactly how the page is displaying the data.
you can view it as a 'separation of concerns' issue: the server is concerned with retrieving the requested data, and that's it.
it is then the client side's responsibility to present the data in whatever way it chooses to.

if you ever wanted to change the way the data is presented, when using any of the other approaches you've mentioned, you would have to change your server-side logic.

option #2 even gives you the theoretical possibility of changing your client type completely (wpf / winform / whatever client) without changing your server-side.

p.s. as a side note- check out jqgrid for a really awesome table plugin.

---

Simple answer: #2.

More involved answer: #5

At the core, your presentation needs to be separated from your server-side processing. Simple scenarios where you're just going to do this display once, send back JSON and fill it in client side. The sticking point is: how do I reuse this display logic? Or, what if my display logic depends on the JSON coming back and my JavaScript gets muddy and gross? What if I want to return one of two very different things and don't want to make my javascript super complicated?

Well, that's when you need to take it a step further to split your rendering scenarios. This is when you can have shell pages, controls, views or whatever you have given your framework. Your goal is to use the server-side programming logic to populate that view/control, render it server side, and then pass back the entire HTML chunk back to your JavaScript AJAX call. This big chunk can then be loaded directly without any additional scripting.

There are trade offs! Do not use this when:

1. Your data and display are straight forward
2. You use this piece a single time
3. Your rendered views are giant. Remember, you're passing this over the wire. Looping over data in JavaScript, constructing the cells may be faster than passing back all the text of the table at once.

Do use this rendering technique when:

1. You're passing back highly variable content.
2. Display logic is complicated and variable.
3. Your display logic depends on some data that you don't want the client to know/care about.

So, your #1 objective: Separate your rendering logic from your server-side code. Never put your HTML in your code-behind, but if you can, you can consider rendering page snippets and passing back all of the HTML over the wire, letting the server generate the HTML, rather than the JavaScript.