Question

This is a design question. I have data that needs to go into an HTML table, which will later be manipulated by the user. Basically the user will be able to select items in the table rows.

I have two options – in both cases I’m using AJAX to get the data:

1. Create the HTML code using PHP on the server side, send it to the client as HTML. The user then manipulates the table using Javascript (jQuery, essentially).

2. Send the raw data to the client using JSON, then use jQuery to both create the HTML and later manipulate it by the user.

From a design/ease of coding/beauty point of view, which approach is recommended?
Thanks for any insight.

Answer 1

Why to generate the HTML in PHP:

• JavaScript should define the behaviour, not the content.
• Creating in JavaScript requires more markup (multi-line strings aren’t as easy as in PHP).
• It’s harder to maintain if your HTML is generated in several places (PHP & JS).
• You could use jQuery’s DOM manipulation functions to create your HTML, but you’re shooting yourself in the leg on the long run.
• It’s faster to create the HTML at the server than on the browser (in computational sense).
• Looping is easier with PHP – it’s easy to generate table markup.
• You retain some kind of combatibility if the user has JavaScript disabled if you output the markup on page load.

Why to generate the HTML in jQuery:

• You’d save some bandwidth.
• Binding events might be simpler.

So, I’m in favour of the first option, generating the HTML in PHP.

---

Visual comparison of the two methods, creating a simple table.
 

Option 1, using PHP:

// PHP

$html = '<table>';    
foreach($data as $row) {
    $html .= '<tr>';
    $html .= '<td><a href="#" class="button">Click!</a></td>';
    $html .= '<td>'.$row['id'].'</td>';
    $html .= '<td>'.$row['name'].'</td>';
    $html .= '</tr>';
}
$html .= '</table>'; 
echo $html;
?>

// jQuery

$('#container').load('handler.php', function() {
    $('#container a.button').click(function() {
        // Do something
    });
});

 

Option 2, using jQuery:

// PHP

echo json_encode($data);

// jQuery

$.ajax({
    url: 'handler.php',
    dataType: 'json',
    success: function(data) {
        var table = $('<table />');

        var len = data.length;
        for(var i = 0; i < len; i++) {
            var row = $('<tr />');
            var a = $('<a />').attr('href', '#').addClass('button');

            row.append($('<td />').append(a));
            row.append($('<td />').html(data[i].id);
            row.append($('<td />').html(data[i].name);

            table.append(row);
        }

        table.find('.button').click(function() {
            // Do something
        });

        $('#container').html(table);
    }
});

From a design / ease of coding / beauty point of view, I’d definitely say go with the PHP approach.