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

Question

我有需要在以下结构中以HTML显示数据的要求

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

网点数量不固定。 我的Java对象的变量将由动作形成并且将作为JSON抛出

DataObject : regionName, outletName, personName, count 

将使用这些DataObject的列表。

如何使用数据表或纯Jquery绘制这些。 我认为目前数据表不允许动态列绑定.. :(

Answer 1

您可以通过执行以下步骤来做到这一点；

1. 将Java模型作为json从操作返回到客户端html
2. 解析JSON并生成html表

根据您的问题，我开发了以下结构的json；

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

让我给你看一个例子。

$(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);
});

您可以在这里看到工作的小提琴： http : //jsfiddle.net/Y8qHZ/19/ 。 更改json值并查看其工作方式

Answer 2

您不需要解析json数据即可创建表-如果正确调用DataTable插件，它将为您完成此操作。

在为表行生成json数据结构的代码中，您还可以为表头生成数据结构，然后使用aaData和aoColumns参数将它们作为参数传递给数据表初始化。

生成标题数据应该很容易，因为在生成行数据时将遍历各列。

反正对我来说很好...