Question

我有一些如下所示的JSON数据：

{"data":[{"one":"[[1756.53, 2.419583], [13755.95, 0.056274], [1755.62, 0.027065], [11755.59, 0.085065], [1175.28, 906], [11752.33, 0.333531], [11752.31, 0.5], [11752.03, 0.6], [11752.02, 0.107656], [1751.99, 1.288268], ....

正在通过AJAX请求检索此json，并将其提供给HTML数据表：

$(document).ready(function() {

    var table = $('#mytable').DataTable({
        "serverSide": true,
        "ajax": "/api/?format=datatables",
        "columns": [
          {
            data: 'one',

          }
        ]
    });
    setInterval( function () {
    table.ajax.reload();
}, 10000 );
});

其中api是api端点。

我的实际代码的问题是，在加载HTML数据表时，我将看到像这样呈现的数据

DATA:
[[1848, 84857], [4944, 4949], [34, 65], [3566, 78], .... ]

基本上所有的JSON都被抛出到表的单行中。

相反，我想将每条记录放在一行中，例如：

DATA
1848, 84857
4944 4949 
....

研究了网络响应之后，我得出的结论是，我的代码将JSON响应视为字符串，而不是包含子元素的数组（包含一系列数组的数组，每个数组包含两个项），因此数据表无法对其进行迭代。

有什么办法可以解决此问题？

Answer 1

实际上，您的主要问题是JSON响应格式。对象数据应包含对象数组或数组数组。但现在看来它是"json string"对象中的"one"。

如果您无法从服务器端覆盖json响应，则可以使用Datatables AJAX DataSrc选项更改/重新定位数据源。

dataSrc 的
选项是为了提供更改哪些数据数据表的能力将从服务器返回的JSON中读取，或操作数据从一种形式转换为另一种形式（从JSON到另一种形式的JSON， XML，YAML等）。

我们需要两（2）部分来解决您的问题：

使用 DataSrc 选项
使用 JSON.parse

代码：

var table = $('#mytable').DataTable({
         "ajax": {
            "type" : "GET",
            "url" : "/endpoint/?format=datatables",
            "dataSrc": function ( json ) {
                console.log(JSON.parse(json.data[0].one));
                return JSON.parse(json.data[0].one);
            }       
            },
       "columns": [
          {"data":0, "title":"col1"},
          {"data":1, "title":"col2"}
        ]
    });

工作演示：

//This is for JSON request/response mocking only. Do not use this when you have a live JSON server
$.mockjax({
    url: "/endpoint/?format=datatables",
    response: function(settings) {
      this.responseText = {
        "draw": settings.data.draw,
        "recordsTotal": 4,
        "recordsFiltered": 4,
        "data": [
        {"one":"[[1756.53, 2.419583], [13755.95, 0.056274], [1755.62, 0.027065], [11755.59, 0.085065], [1175.28, 906], [11752.33, 0.333531], [11752.31, 0.5], [11752.03, 0.6], [11752.02, 0.107656], [1751.99, 1.288268]]"}
        ]
      }
    }
});

$(document).ready(function() {

    var table = $('#mytable').DataTable({
         "ajax": {
            "type" : "GET",
            "url" : "/endpoint/?format=datatables",
            "dataSrc": function ( json ) {
                console.log(JSON.parse(json.data[0].one));
                return JSON.parse(json.data[0].one);
            }       
            },
       "columns": [
          {"data":0, "title":"col1"},
          {"data":1, "title":"col2"}
        ]
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

<table id="mytable" class="display nowrap" width="100%"></table>

在HTML数据表上使用子元素数组

1 个答案: