javascript - 如何将动态表转换为jquery数据表？

Question

我正在从json data动态创建一个HTML表格。然后我想将该表转换为数据表。但是当我尝试这样做时，我不断收到一条错误消息: 未捕获类型错误:无法读取未定义的属性“mData”

我的jquery是:

$(document).ready(function() {
    $('#action-button').click(function() {
                $.ajax({
                    url: 'https://api.myjson.com/bins/1oaye',
                    data: {
                        format: 'json'
                    },
                    error: function() {
                        $('#info').html('<p>An error has occurred</p>');
                    },
                    dataType: 'json',
                    success: function(data) {
                        // EXTRACT VALUE FOR HTML HEADER. 
                        var col = [];
                        for (var i = 0; i < data.length; i++) {
                            for (var key in data[i]) {
                                if (col.indexOf(key) === -1) {
                                    col.push(key);
                                }
                            }
                        }

                        // CREATE DYNAMIC TABLE.
                        var table = document.createElement("table");


                        // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

                        var tr = table.insertRow(-1);                   // TABLE ROW.

                        for (var i = 0; i < col.length; i++) {
                            var th = document.createElement("th");      // TABLE HEADER.
                            th.innerHTML = col[i];
                            tr.appendChild(th);
                        }

                        // ADD JSON DATA TO THE TABLE AS ROWS.
                        for (var i = 0; i < data.length; i++) {

                            tr = table.insertRow(-1);

                            for (var j = 0; j < col.length; j++) {
                                var tabCell = tr.insertCell(-1);
                                tabCell.innerHTML = data[i][col[j]];
                            }
                        }

                        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
                        var divContainer = document.getElementById("showData");
                        divContainer.innerHTML = "";
                        divContainer.appendChild(table);

                        // convert it to a data table
                        table.setAttribute("id", "example");
                        $('#example').DataTable();

                    },
                    type: 'GET'
                });
            });
        });

如何创建动态表或将其从 json 转换为数据表？

JSFiddle showing the issue

Answer 1

快速浏览一下 DataTable 代码，看起来可能的原因是您没有放置 <th>在 <thead>部分。目前他们位于<tbody>内。

这是更新的 fiddle ... https://jsfiddle.net/8some9a0/1/