Google Sheet-Json Feed Datatables的正确格式和命令

2022-04-12 00:00:00 json google-sheets-api google-sheets datatables javascript

尝试直接从Google Sheet向Datatables表提供一组json数据时，首先遇到以下错误：

DataTables warning: table id=example - Requested unknown parameter 'name' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4

这是我的json与提供的jsonin their example，它当然有不同的格式

{
  "range": "json!A1:Y1000",
  "majorDimension": "ROWS",
  "values": [
    [
      "name",
      "position",
      "salary",
      "start_date",
      "office",
      "extn"
    ],
    [
      "Unity Butler",
      "prova",
      "$85,675",
      "2009/12/09",
      "San Francisco",
      "5384"
    ]
  ]
}

{
  "data": [
    {
      "id": "1",
      "name": "Tiger Nixon",
      "position": "System Architect",
      "salary": "$320,800",
      "start_date": "2011/04/25",
      "office": "Edinburgh",
      "extn": "5421"
    },
    {
      "id": "2",
      "name": "Garrett Winters",
      "position": "Accountant",
      "salary": "$170,750",
      "start_date": "2011/07/25",
      "office": "Tokyo",
      "extn": "8422"
    },
    {...}
]
}

我知道不同的格式需要不同的治疗方法，我很好奇如何处理。我已经接受了@andrewjams提供的答案，它解释了不同格式的性质以及如何处理它们。
基本上只需从ajax option中删除"；Columns"；参数，如您从jsfiddle中可以看到的，您可以在这里找到完整的工作代码(以及库)。

更新：补充任务

现在，假设您要将一些额外信息排列到一组toggle hide-show child rows中。

只要数据格式尊重示例提供的原始格式，我就可以很容易地做到这一点：我甚至可以通过.php文件从MySQL数据库中获取数据并将其排列成json！ jsfiddle

 <?php
$con=mysqli_connect("","","","");
// Check connection
if (mysqli_connect_errno())
  {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
  }

$out = array();
 
if ($result = mysqli_query($con, "SELECT * FROM your_table")) {
  $out = $result->fetch_all(MYSQLI_ASSOC);
}
 
echo "{ "data": ", json_encode( $out ), "}";

mysqli_close($con);
?>

当我尝试从通常由GSheet提供的json数组中提取数据时出现问题：如何将子行切换功能与GSheet通常格式化的json文件结合在一起？

解决方案

您从DataTables示例中显示的JSON数据是一个对象数组：

[ {...}, {...}, ... ]

您创建的JSON数据是一个数组数组：

[ [...], [...], ... ]

DataTables可以使用这两个结构作为其数据源，但它必须以不同的方式完成此操作。

对于对象数组，每个对象代表DataTables数据的(潜在)行，该行中的每个值都由名称和值组成，例如：

"salary": "$320,800"

这就是为什么DataTable使用这样的列定义：

{ "data": "salary" }

这意味着：对于该单元格的数据，请使用名称为"；Salary&Quot；的值。

但在您的情况下没有名称-只有值：

"$85,675"

因此，您不能使用{ "data": "salary" }，因为您的JSON中不存在该名称。

此外，您的结构在第一个数组中包含列标题和行数据：

[
  "name",
  "position",
  "salary",
  "start_date",
  "office",
  "extn"
],

要解决这些差异，您有两个基本选择：

  1. 重新排列您的JSON，使其与对象的"；数组结构相匹配。

  2. 查看基于数组数组的相关DataTables示例之一，例如Ajax data source (arrays)。

选项(2)更简单-更接近您的起点。

但在这两种情况下，您仍然需要处理列标题，因为它们与列主体行是分开的，并且需要单独定义。

目前，您的第一行(看起来像列标题)最终将显示为第一行数据，而不是您想要的。

为此，一种方法是定义<html>表以包含已经(硬编码)的标题：

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
</table>

或者，您可以使用以下命令：

<table id="example" class="display" style="width:100%">
</table>

并使用DataTablestitle关键字在DataTable定义中定义列标题：

<script>
 
$(document).ready(function() {
    $('#example').DataTable( {
        columns: [
            { title: "Name" },
            { title: "Position" },
            { title: "Office" },
            { title: "Extn." },
            { title: "Start date" },
            { title: "Salary" }
        ]
    } );
} );

</script>

执行此操作时，您需要从JSON中删除标题数组：

{
  "range": "json!A1:Y1000",
  "majorDimension": "ROWS",
  "values": [
    [
      "Unity Butler",
      "prova",
      "$85,675",
      "2009/12/09",
      "San Francisco",
      "5384"
    ],
    [
        // more array data here...
    ], ...
  ]
}
现在，对于数组数组，不需要为每一列指定data值。由于每一行都是纯文本数组，DataTables会自动将第一个值放在该行的第一个单元格中，第二个值放在第二个单元格中，依此类推...

最后注意：在您的示例中使用了以下内容：

dataSrc: 'values' // values instead of data in this case

这很好。它告诉DataTables在名为values的顶级字段中查找数组数组。

更新

对于子行示例，如果您停止使用数组数组而开始使用对象数组，您将会轻松得多。这样，您就可以使用对象名称显式选择哪些值属于父行，哪些属于子行。

因此，如果您在工作表中有源数据，并带有标题：

标题_1 标题_2 标题_3
值1 值2 值3
值4 值5 值6

然后您需要从该结构转换该数据：

[ 
  [ "value 1", "value 2", "value 3" ],
  [ "value 4", "value 5", "value 6" ]
]

{ "data": [ 
  { "heading_1": "value 1", "heading_2": "value 2", "heading_3": "value 3" },
  { "heading_1": "value 4", "heading_2": "value 5", "heading_3": "value 6" }
] }

JavaScript可以做到这一点。也许你可以自己试一试？如果你被卡住了，你可以问一个特定的问题。

一旦您有了对象数组，您就可以更容易地遵循example。现在您可以选择要在父行中使用的名称和要在子行中使用的字段。

相关文章