javascript - DataTable.js - 对于通过 Ajax 调用传入的某些数据集， 内不会显示任何数据

Question

对于某些数据集，数据表中不显示任何数据 - 仅显示列标题或列标签。即使页面上的代码没有更改，也会发生这种情况。有问题的数据在浏览器开发工具 Console.logs 中正确显示。

如下所示，DataSet 的 JSON 可以在 HTML 页面上正确显示/呈现。

{"data_json": 

{"columns": ["customer_id", "col_1_int", "col_2_int", "col_3_float", "col_4_int", "col_5_str"], 

"data": 
[[1, "349", "349", "355.6677", "112", "hello am a string "],
 [2, "404", "404", "355.6677", "167", "hello am a string "], 
 [3, "459", "459", "355.6677", "222", "hello am a string "], 

如下所示的 JSON 数据集在 HTML 页面上无法正确显示。

{"data_json": 

{"columns": ["rats_mice", "var_rats1", "var_rats2"], 

"data": 
[["CAT_C", 6.0, 69.0], 
["CAT_A", 3.0, 34.0], 
["CAT_B", 4.0, 37.0], 
["CAT_B", 5.0, 63.0], 
["CAT_C", 5.5, 88.0], 

DataTables 的 JS 代码如下所示:-

<table id="example" class="display" cellspacing="0" width="100%">
</table>

<script>
        var myUrl = "{% url 'django_url_withJSON' %}" 
        var dataSet;
        var my_columns = []; 

        $(document).ready(function(){
            $.ajax({
                    url: myUrl,
                    type: 'GET',     
                    dataType: 'json', 
                    success: function(dict_json_from_py) {
                      console.log("-----dict_json_from_py--Data displays fine in Console--")
                      console.log(dict_json_from_py)
                      var dataSet = dict_json_from_py.data_json.columns;
                      //console.log(dataSet)
                      $.each(dataSet, function( key, value ) {
                                                var my_item = {};
                                                my_item.data = key; 
                                                my_item.title = value;
                                                console.log(my_item.data)
                                                console.log(my_item.title)
                                                my_columns.push(my_item); 
                                                console.log(my_columns)
                                                return my_columns
                                        });

                        assignToEventsColumns(my_columns,dict_json_from_py);
                    }, // Close - success:
                })    // Close - "ajax":

            function assignToEventsColumns(my_columns,dict_json_from_py) {

                    var table = $('#example').DataTable({
                        "bAutoWidth" : false, //bAutoWidth -- b == BOOLEAN
                        "serverSide": false, // 
                        "aaData": dict_json_from_py.data_json.data, 
                        "columns" : my_columns,
                      })
                  }
              }); 

    </script>

除了检查 JSON 结构的一致性之外 - 我不确定还能做什么。

Answer 1

我刚刚检查了您的代码，对我来说似乎很好。只需确保 JSON 格式正确即可。希望这个jsfiddle会帮助你的。

{
  "data_json": {
    "columns": [
      "customer_id", "col_1_int", "col_2_int", "col_3_float", "col_4_int", "col_5_str"
      ],
    "data":
    [
      [1, "349", "349", "355.6677", "112", "hello am a string "],
      [2, "404", "404", "355.6677", "167", "hello am a string "],
      [3, "459", "459", "355.6677", "222", "hello am a string "]
   ]
  }
}