代码之家 › 专栏 › 技术社区 › Sanjiv Rajput

Datatable不显示JSON数据

datatable html jquery javascript

Sanjiv Rajput · 技术社区 · 6 年前

我动态地从jsonurl绑定datatable,也动态地生成头文件,但面临一些问题问题。所以请看我的代码段,并建议我如何解决它。我正面临着传递json数据到您可以在代码段中看到的datatable中的aaData。

$(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>

1 回复 | 直到 6 年前

Sanjiv Rajput 6 年前

我已经生成了动态列并将其传递给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>