Where to convert data to HTML-table: PHP / Javascript /

Question

I need an advice on how to write my website.

In my DB I have some data that I want to dynamically load into different frames on my website. Question is: Where do I convert the raw data to HTML-code?

I currently see the following options:

• convert it to HTML in a PHP function and load that via Ajax on my page
• Get the raw data via Ajax and convert it in Javascript to HTML-code
• Write a HTML-Table manually and then insert the data into it via Ajax

All three of those options have their disadvantages - for instance I need to be able to select the table rows with jQuery which I don't know how to do when the table HTML-code is loaded into the page with Ajax... to write the HTML-table manually would solve that problem, but the table needs to have a variable number of rows.

Are there options that I haven't thought about yet? Any other advice for me?

Answer 1

I would use some combination of 1 and 3 methods, with using some sort of filecache or memcache but not database(is must slower). You must generate html once for needed block with needed parameters and cache it into the file, so it would be something like(pseudocode):

$aParams = ... lets tell that this is your params here;
$sBlockKey = 'my_block_'.md5($aParams);
if (cache::exists($sBlockKey)){
  $sMyBlock = cache::get($sBlockKey);
} else {
  $sMyBlock = generateMyBlockHtml($aParams);
  cache::add($sBlockKey, $sMyBlock);
}

return $sMyBlock;

In this way you can load it by ajax then if you need.

Answer 2

It depends, but I would go with 1 or 2 unless the number of rows and columns is constant.

Option 1 has the advantage that generating HTML in PHP can be done more pragmatically than in Javascript, so if you need to make something really quick, or you have a template system in place on the server side already, try option 1. A huge downside of this approach is that you have to trust the server to send 'sane' HTML; if you don't use SSL for the AJAX calls, a simple MITM attack can easily inject exploitable XSS code, and if the server for some reason sends broken HTML, it is hard to detect and probably impossible to recover from.

So normally, I'd prefer option 2. I wouldn't even bother with HTML at this point, instead, I'd just manipulate the DOM directly, that is:

• loop over data rows; for each row, construct a tr element and append it to the table's body
  • loop over columns; for each row, construct a td element and append it to the tr; use .text() to add content to the cell.

Example code:

function fillTable(data) {
    var tbody = $('<tbody/>');
    data.each(function (row) {
        var tr = $('<tr/>');
        tbody.append(tr);
        row.each(function (cell) {
            var td = $('<td/>');
            tr.append(td);
            td.text(cell);
        });
    });
    $('#myTable>tbody').replaceWith(tbody);
}

This way, you don't have to worry about HTML encoding (and thus, XSS), because you are injecting DOM nodes directly - the browser won't do any HTML parsing at all.

Answer 3

我正在使用这两个jquery插件http://datatables.net/和http://www.trirand.com/blog/它可能是一种过载但你会得到相当灵活的方式如何在页面上显示表格动态加载数据，它们都有很好的方法来处理行选择，格式化等。