Question

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

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 "]
   ]
  }
}

DataTable.js-对于通过Ajax调用进入的某些数据集，没有数据显示

1 个答案: