使用DataTable或纯JQUERY动态创建列/ HTML表

Question

I have requirement where I need to show data in HTML in following structure

          Region
--------------------------------
outlet1 | outlet2 | outlet3 |
---------------------------------
123     | 323     | 123  
233     | 34234   | 23234

Number of outlets are not fixed . Varibales of my Java Object that will be formed by action and which will be throws as JSON are

DataObject : regionName, outletName, personName, count 

list of these DataObjects will be used.

How can I draw these using Data Table or plain Jquery. I think currently Data Table does not allow dynamic column binding..:(

Answer 1

You can manage to do that by doing following steps;

1. Return your java model as json from your action to client html
2. Parse JSON and generate html table

According to your question, I have developed a json in following structure;

{
    regionName: "India",
    outlets: [
        {
            outletName: "outlet1",
            personName: "debrup",
            count: "430"
        }
    ]
}

Let me show you an example;

$(document).ready(function() {

    var jsonObj = [
        {
            regionName: "India",
            outlets: [
                {
                    outletName: "outlet1",
                    personName: "debrup",
                    count: "430"
                },
                {
                    outletName: "outlet12",
                    personName: "debrup2",
                    count: "440"
                }
            ]
        }
    ];                 

    var html = '<table border="1">';
    $.each(jsonObj, function(i, region) {
        html += '<tr><td>' + region.regionName + '</th></tr>';
        html += '<tr><td></td>'
        $.each(region.outlets, function(x, outlet) {
                html += '<td><b>' + outlet.outletName + '</b></td>';
        });
        html += '</tr><tr>';
        html += '<td>personName</td>';
        $.each(region.outlets, function(key, value) {
            html += '<td>' + value.personName + '</td>';    
        });
        html += '</tr><tr>';
        html += '<td>count</td>';
        $.each(region.outlets, function(key, val) {
            html += '<td>' + val.count + '</td>';
        });
        html += '</tr>';

    });
    html += '</table>';

    $("#table").html(html);
});

You can see working fiddle here: http://jsfiddle.net/Y8qHZ/19/ . Change json values and see how it works

Answer 2

You shouldn't need to parse the json data to create the table - the DataTable plugin will do that for you if you invoke it correctly.

In your code that generates the json data structure for the table rows, you can additionally generate a data structure for the table headers, and then pass them both in as parameters to the datatable initialization using the aaData and aoColumns parameters.

It should be easy to generate the header data as you'll be looping through the columns when generating the row data.

Works well for me anyway...