Google Sheet-Json Feed Datatables的正确格式和命令 [英] proper format and commands for Google Sheet - Json fed Datatables
问题描述
尝试直接从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"
],
要解决这些差异，您有两个基本选择：
重新排列您的JSON，使其与对象的"；数组结构相匹配。
查看基于数组数组的相关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。现在您可以选择要在父行中使用的名称和要在子行中使用的字段。这篇关于Google Sheet-Json Feed Datatables的正确格式和命令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
