DataTables 警告：table id=<my_table_name> - 为第 0 行第 0 列请求了未知参数“<my_table_first_column_name>”
DataTables warning: table id=<my_table_name> - Requested unknown parameter '<my_table_first_column_name>' for row 0, column 0
我对 Javascript 很陌生，我正在努力扩展由第三方实现的代码片段，我必须使用 DataTables 用数据填充 table。
上下文
这个table由3列组成：“嵌套字段”、“子字段黑名单”、“编辑”，填写数据时应如下所示：
“nested field”和“subfields blacklist”列中要填写的数据来自Postgres数据库table的“nested field”和“subfields”列，定义为：
CREATE TABLE testing_nested_field_blacklist (
id SERIAL NOT NULL UNIQUE,
nested_field varchar(100) NOT NULL UNIQUE,
subfields varchar(100)[]
);
而 html table 中不需要来自“id”列的数据。
问题
但是，我在使用 Datatables 时犯了一些错误，并在加载 html 页面时收到这两个错误弹出窗口（当我在第一个上单击“确定”时，后者弹出向上）。
DataTables warning: table id=NestedFieldTable - Requested unknown
parameter 'nested_field_name' for row 0, column 0. For more
information about this error, please see http://datatables.net/tn/4
请注意，此时 table 只有一行，甚至“编辑”列都没有填充数据（当我关闭两个错误弹出窗口）。
DataTables warning: table id=NestedFieldTable - Requested unknown
parameter 'nested_field_name' for row 0, column 0. For more
information about this error, please see http://datatables.net/tn/4
请注意，两次错误消息完全相同。
这是 html 模板：
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item">
<a class="nav-link text-black-50" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt mr-2"></i>
<span>Logout</span>
</a>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<ol class="breadcrumb shadow-lg">
<li class="breadcrumb-item">
<a href="/4testing/">Home</a>
</li>
<li class="breadcrumb-item active">Nested fields and subfields blacklists</li>
</ol>
<!-- alert messages -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-success-title"></strong> <div id="alert-success-detail"></div>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-danger-title"></strong> <div id="alert-danger-detail"></div>
</div>
<!-- TABELLA NESTED FIELDS -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-ban" aria-hidden="true"></i> Nested fields and subfields blacklists</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="NestedFieldTable" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
这里是 Javascript 用来填写 table 的数据：
var NestedFieldTable;
$(document).ready(function() {
// NESTED FIELD
NestedFieldTable = $('#NestedFieldTable').DataTable({
"destroy": true,
"processing":true,
"ajax": {
"url": '/getNestedFields/',
"type":"POST",
"dataSrc": "nested_field"
},
"columns": columns_nested_field,
"columnDefs": [
{"targets": -1, "data": null, "defaultContent": "<i class='fas fa-edit' aria-hidden='true' id='modifyRow' data-toggle='modal' data-target='#myModalEditNestedField' title='Clicca per modificare il nested field o la blacklist'></i><i style='margin-left:15px;' class='fas fa-trash' aria-hidden='true' id='deleteRow' data-toggle='modal' data-target='#myModalDeleteNestedField' title='click top delete nested field and blacklist'></i>", "width": "75px"},
],
"dom": "<'row'<'col-md-6 toolbar_nestedfield'><'col-md-6'fBl>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-12'pi>>",
"buttons": [
{
extend: 'collection',
text: 'Export',
autoClose: true,
buttons: [
{
text: '<i class="fas fa-print"></i> Print',
extend: 'print',
messageTop: 'Table of nested fields and subfields blacklist.',
footer: false
}
]
},
{
text: '<i class="fas fa-sync-alt"></i>',
titleAttr: 'Refresh table',
action: function ( e, dt) {
dt.ajax.reload();
set_alert_message({"title":"Refresh", "detail":"Table successfully refreshed"}, "success");
}
}
],
"language": {
"searchPlaceholder": "Search",
"search": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-search fa-fw'></i></span></div>_INPUT_</div></div>",
"lengthMenu": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-list-ul fa-fw'></i></span></div>_MENU_</div></div>",
"oPaginate": {
sNext: '<span class="pagination-default">❯</span>',
sPrevious: '<span class="pagination-default">❮</span>'
}
}
});
$(".toolbar_nestedfield").html('<button type="button" class="dt-button" title="Click to add a new nested field and blacklist" data-toggle="modal" data-target="#myModalAddNestedField"><i class="fas fa-plus"></i></button>');
...
});
这里是 javascript 定义列的内容：
var columns_nested_field = [
// { "title":"ID", data: "nested_field_blacklist_id"},
{ "title":"Nested field", data: "nested_field_name"},
{ "title":"Subfields blacklist", data: "nested_field_blacklist"},
{ "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];
“线索”
注意html代码的最后一部分，以
为首
<!-- POPUP ADD ROW NESTED FIELD AND BLACKLIST -->
是一种允许用户将新数据插入数据库 table 的模态，它可以正常工作，除了新数据未显示在 html table（因为它没有显示数据库中已经存在的那些）。
我做错了什么？我该如何解决？
问题更新
js 代码中的 url /getNestedFields/ 用于填充 html table 通过龙卷风网络绑定到 class extractNestedFields这样的框架：
application = tornado.web.Application([
...
(r"/getNestedFields/", extractNestedFields),
...
])
其中 class extractNestedFields i 定义为：
class extractNestedFields(BaseHandler):
@gen.coroutine
def post(self):
dictionary_nested_field = {}
rows = yield testing_database.get_nested_fields()
print(rows) #ok
if len(rows) > 0:
dictionary_nested_field["nested_field"] = rows
else:
dictionary_nested_field["nested_field"] = []
raise gen.Return(self.write(json.dumps(dictionary_nested_field, default=myconverter)))
并且加载html页面时，rows的内容是：
[
{'nested_field': '1', 'subfields': ['one', 'two', 'three']},
{'nested_field': '2', 'subfields': ['one', 'two', 'three', 'coming from the backend']},
{'nested_field': '3rd_nested_field', 'subfields': ['jret_subfield_1.3', 'jret_subfield_2.3', 'jret_subfield_3.3']},
{'nested_field': '5', 'subfields': ['one', 'two', 'three', 'coming from the backend']},
{'nested_field': 'jret', 'subfields': ['jret_subfield_1.1', 'jret_subfield_2.1', 'jret_subfield_3.1']}
]
那是我的 table 在数据库中的内容。
已解决
关键data
在 columns_nested_field 变量
的每个 {} 元素内
（这是通过 DataTable 定义要在 html table 的列中填写的标题和数据所必需的）
必须具有等于
的值
数据库 table 的列的标题包含要填写的数据 html table.
所以，因为在我的例子中，我要填写 html table 的数据来自数据库 [=60] 的 nested_field、subfields 列=] testing_nested_field_blacklist ,
在 javascript 变量 columns_nested_field
的声明中（这是使 DataTable 工作所必需的），
我替换了
{ "title":"Nested field", data: "nested_field_name"},
{ "title":"Subfields blacklist", data: "nested_field_blacklist"},
和
{ "title":"Nested field", data: "nested_field"},
{ "title":"Subfields blacklist", data: "subfields"},
现在 table 已正确填写数据。
更新
我刚刚从 this thread 那里了解到，我上面提到的键 data 的值必须等于 JSON [=] 中使用的字段 name/key 58=]（在我的脚本中是在第
行生成的
raise gen.Return(self.write(json.dumps(dictionary_nested_field, default=myconverter)))
classextractNestedFields实例的post协程方法的，每行一个object。
我对 Javascript 很陌生，我正在努力扩展由第三方实现的代码片段，我必须使用 DataTables 用数据填充 table。
上下文
这个table由3列组成：“嵌套字段”、“子字段黑名单”、“编辑”，填写数据时应如下所示：
“nested field”和“subfields blacklist”列中要填写的数据来自Postgres数据库table的“nested field”和“subfields”列，定义为：
CREATE TABLE testing_nested_field_blacklist (
id SERIAL NOT NULL UNIQUE,
nested_field varchar(100) NOT NULL UNIQUE,
subfields varchar(100)[]
);
而 html table 中不需要来自“id”列的数据。
问题
但是，我在使用 Datatables 时犯了一些错误，并在加载 html 页面时收到这两个错误弹出窗口（当我在第一个上单击“确定”时，后者弹出向上）。
DataTables warning: table id=NestedFieldTable - Requested unknown parameter 'nested_field_name' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
请注意，此时 table 只有一行，甚至“编辑”列都没有填充数据（当我关闭两个错误弹出窗口）。
DataTables warning: table id=NestedFieldTable - Requested unknown parameter 'nested_field_name' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4
请注意，两次错误消息完全相同。
这是 html 模板：
<!-- Topbar Search -->
<form class="d-none d-sm-inline-block form-inline mr-auto ml-md-3 my-2 my-md-0 mw-100 navbar-search">
<div class="input-group">
<input type="text" class="form-control bg-light border-0 small" placeholder="Search for..." aria-label="Search" aria-describedby="basic-addon2">
<div class="input-group-append">
<button class="btn btn-primary" type="button">
<i class="fas fa-search fa-sm"></i>
</button>
</div>
</div>
</form>
<!-- Topbar Navbar -->
<ul class="navbar-nav ml-auto">
<div class="topbar-divider d-none d-sm-block"></div>
<li class="nav-item">
<a class="nav-link text-black-50" href="#" data-toggle="modal" data-target="#logoutModal">
<i class="fas fa-sign-out-alt mr-2"></i>
<span>Logout</span>
</a>
</li>
</ul>
</nav>
<!-- End of Topbar -->
<!-- Begin Page Content -->
<div class="container-fluid">
<ol class="breadcrumb shadow-lg">
<li class="breadcrumb-item">
<a href="/4testing/">Home</a>
</li>
<li class="breadcrumb-item active">Nested fields and subfields blacklists</li>
</ol>
<!-- alert messages -->
<div class="alert alert-success alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-success-title"></strong> <div id="alert-success-detail"></div>
</div>
<div class="alert alert-danger alert-dismissible fade show" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong id="alert-danger-title"></strong> <div id="alert-danger-detail"></div>
</div>
<!-- TABELLA NESTED FIELDS -->
<div class="card shadow mb-4">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary"><i class="fas fa-ban" aria-hidden="true"></i> Nested fields and subfields blacklists</h6>
</div>
<div class="card-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="NestedFieldTable" width="100%" cellspacing="0">
</table>
</div>
</div>
</div>
这里是 Javascript 用来填写 table 的数据：
var NestedFieldTable;
$(document).ready(function() {
// NESTED FIELD
NestedFieldTable = $('#NestedFieldTable').DataTable({
"destroy": true,
"processing":true,
"ajax": {
"url": '/getNestedFields/',
"type":"POST",
"dataSrc": "nested_field"
},
"columns": columns_nested_field,
"columnDefs": [
{"targets": -1, "data": null, "defaultContent": "<i class='fas fa-edit' aria-hidden='true' id='modifyRow' data-toggle='modal' data-target='#myModalEditNestedField' title='Clicca per modificare il nested field o la blacklist'></i><i style='margin-left:15px;' class='fas fa-trash' aria-hidden='true' id='deleteRow' data-toggle='modal' data-target='#myModalDeleteNestedField' title='click top delete nested field and blacklist'></i>", "width": "75px"},
],
"dom": "<'row'<'col-md-6 toolbar_nestedfield'><'col-md-6'fBl>>" +
"<'row'<'col-md-6'><'col-md-6'>>" +
"<'row'<'col-md-12't>><'row'<'col-md-12'pi>>",
"buttons": [
{
extend: 'collection',
text: 'Export',
autoClose: true,
buttons: [
{
text: '<i class="fas fa-print"></i> Print',
extend: 'print',
messageTop: 'Table of nested fields and subfields blacklist.',
footer: false
}
]
},
{
text: '<i class="fas fa-sync-alt"></i>',
titleAttr: 'Refresh table',
action: function ( e, dt) {
dt.ajax.reload();
set_alert_message({"title":"Refresh", "detail":"Table successfully refreshed"}, "success");
}
}
],
"language": {
"searchPlaceholder": "Search",
"search": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-search fa-fw'></i></span></div>_INPUT_</div></div>",
"lengthMenu": "<div class='form-group'><div class='input-group'><div class='input-group-prepend'><span class='input-group-text'><i class='fas fa-list-ul fa-fw'></i></span></div>_MENU_</div></div>",
"oPaginate": {
sNext: '<span class="pagination-default">❯</span>',
sPrevious: '<span class="pagination-default">❮</span>'
}
}
});
$(".toolbar_nestedfield").html('<button type="button" class="dt-button" title="Click to add a new nested field and blacklist" data-toggle="modal" data-target="#myModalAddNestedField"><i class="fas fa-plus"></i></button>');
...
});
这里是 javascript 定义列的内容：
var columns_nested_field = [
// { "title":"ID", data: "nested_field_blacklist_id"},
{ "title":"Nested field", data: "nested_field_name"},
{ "title":"Subfields blacklist", data: "nested_field_blacklist"},
{ "title":"Edit", "orderable": false, "className": 'icon_dt_style'}
];
“线索”
注意html代码的最后一部分，以
为首<!-- POPUP ADD ROW NESTED FIELD AND BLACKLIST -->
是一种允许用户将新数据插入数据库 table 的模态，它可以正常工作，除了新数据未显示在 html table（因为它没有显示数据库中已经存在的那些）。
我做错了什么？我该如何解决？
问题更新
js 代码中的 url /getNestedFields/ 用于填充 html table 通过龙卷风网络绑定到 class extractNestedFields这样的框架：
application = tornado.web.Application([
...
(r"/getNestedFields/", extractNestedFields),
...
])
其中 class extractNestedFields i 定义为：
class extractNestedFields(BaseHandler):
@gen.coroutine
def post(self):
dictionary_nested_field = {}
rows = yield testing_database.get_nested_fields()
print(rows) #ok
if len(rows) > 0:
dictionary_nested_field["nested_field"] = rows
else:
dictionary_nested_field["nested_field"] = []
raise gen.Return(self.write(json.dumps(dictionary_nested_field, default=myconverter)))
并且加载html页面时，rows的内容是：
[
{'nested_field': '1', 'subfields': ['one', 'two', 'three']},
{'nested_field': '2', 'subfields': ['one', 'two', 'three', 'coming from the backend']},
{'nested_field': '3rd_nested_field', 'subfields': ['jret_subfield_1.3', 'jret_subfield_2.3', 'jret_subfield_3.3']},
{'nested_field': '5', 'subfields': ['one', 'two', 'three', 'coming from the backend']},
{'nested_field': 'jret', 'subfields': ['jret_subfield_1.1', 'jret_subfield_2.1', 'jret_subfield_3.1']}
]
那是我的 table 在数据库中的内容。
已解决
关键data
在 columns_nested_field 变量
的每个 {} 元素内
（这是通过 DataTable 定义要在 html table 的列中填写的标题和数据所必需的）
必须具有等于
的值
数据库 table 的列的标题包含要填写的数据 html table.
所以，因为在我的例子中，我要填写 html table 的数据来自数据库 [=60] 的 nested_field、subfields 列=] testing_nested_field_blacklist ,
在 javascript 变量 columns_nested_field
的声明中（这是使 DataTable 工作所必需的），
我替换了
{ "title":"Nested field", data: "nested_field_name"},
{ "title":"Subfields blacklist", data: "nested_field_blacklist"},
和
{ "title":"Nested field", data: "nested_field"},
{ "title":"Subfields blacklist", data: "subfields"},
现在 table 已正确填写数据。
更新
我刚刚从 this thread 那里了解到，我上面提到的键 data 的值必须等于 JSON [=] 中使用的字段 name/key 58=]（在我的脚本中是在第
raise gen.Return(self.write(json.dumps(dictionary_nested_field, default=myconverter)))
extractNestedFields实例的post协程方法的，每行一个object。