Datatable не отображает данные JSON

Question

Я связываю данные из URL JSON динамически, а также динамически генерирую заголовок, но сталкиваюсь с некоторыми проблемами. Поэтому, пожалуйста, посмотрите мой фрагмент и посоветуйте мне, как мне его решить. сниппет.

$(document).ready(function () {
        $.ajax({
            type: "GET",
            url: "https://jsonplaceholder.typicode.com/posts",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var json = response;
                var col = [];
                var rdata;
                $.each(json, function (index, element) {
                    for (var key in element) {
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                })
                $.each(response, function (index, element) {

                    rdata = element;
                   

                })
                var tableHeaders;
                $.each(col, function (i, val) {
                    tableHeaders += "<th>" + val + "</th>";
                });

                $("#tableDiv").empty();
                $("#tableDiv").append('<table id="displayTable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');
                

                $('#displayTable').DataTable({
                    "aaData": JSON.stringify(rdata),
                    "bDestroy": true,
                    "order": [1, "asc"],

                });

                //$('#displayTable').DataTable(rdata);

            },
            failure: function (response) {
                alert(response)
            }
        });

    });

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div id="tableDiv"></div>

Answer 1

Я сгенерировал динамический столбец и передал его в datatable, и он работает нормально.

  $(document).ready(function () {
$.ajax({
            type: "GET",
            url: "https://jsonplaceholder.typicode.com/posts",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                var col = [];
                var rdata=[];
                $.each(response, function (index, element) {
                    for (var key in element) {
                        if (col.indexOf(key) === -1) {
                            col.push(key);
                        }
                    }
                })
                for (var i = 0; i < col.length; i++) {
                    rdata.push({data:col[i]})
                }
                var tableHeaders="";
                $.each(col, function (i, val) {
                    tableHeaders += "<th>" + val + "</th>";
                });

                $("#tableDiv").empty();
                $("#tableDiv").append('<table id="displaytable" class="display" cellspacing="0" width="100%"><thead><tr>' + tableHeaders + '</tr></thead></table>');

                $('#displaytable').DataTable({
                    "aaData": response,
                    "bDestroy": true,
                    "columns": rdata,
                    "order": [1, "asc"]
                });
            },
            failure: function (response) {
                alert(response)
            }
        });

    });

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div id="tableDiv"></div>