DataTables 警告：表 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 0DataTables 警告：表 id=<my_table_name> - 为第 0 行第 0 列请求未知参数“<my_table_first_column_name>”
【发布时间】：2021-10-12 15:30:00
【问题描述】：

我对 Javascript 很陌生，我正在努力扩展由第三方实现的代码片段，我必须使用 DataTables 填写一个包含数据的表格。

上下文

此表由3列组成：“嵌套字段”、“子字段黑名单”、“编辑”，填写数据时应如下所示：

“nested field”和“subfields blacklist”列中填写的数据来自Postgres数据库表的“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 表中不需要“id”列中的数据。

问题

但是，我在使用 Datatables 时出现了一些错误，并且在加载 html 页面时出现了这两个错误弹出窗口（当我在第一个页面上单击“确定”时，后者会弹出）。

DataTables 警告：表 id=NestedFieldTable - 请求未知第 0 行第 0 列的参数“nested_field_name”。有关此错误的信息，请参阅http://datatables.net/tn/4

请注意，此时表格只有一行，甚至“编辑”列都没有填充数据（当我关闭两个错误弹出窗口时，此列将是唯一一个成功填充数据的列） .

DataTables 警告：表 id=NestedFieldTable - 请求未知第 0 行第 0 列的参数“nested_field_name”。有关此错误的信息，请参阅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">&times;</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">&times;</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：

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">&#x276f;</span>',
                sPrevious: '<span class="pagination-default">&#x276e;</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 -->

是一种允许用户向数据库表中插入新数据的模式，它可以正常工作，除了新数据没有显示在 html 表中（因为它没有显示已经存在的数据）分贝）。

我做错了什么？我该如何解决？

问题更新

用于填充 html 表的 js 代码中的 url /getNestedFields/ 通过 Tornado Web 框架以这种方式绑定到类 extractNestedFields：

application = tornado.web.Application([
    ...
    (r"/getNestedFields/", extractNestedFields),
    ...
])

其中extractNestedFields 类定义为：

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

这是我在数据库中的表的内容。

【问题讨论】：

调用的结果是什么：/getNestedFields/
问题已更新。提前致谢。
如果您的 "url": '/getNestedFields/' 返回一个未命名的数组（根据您的最新编辑），那么您不能使用 "dataSrc": "nested_field"。 dataSrc 选项需要指向数组的位置（包含行数据的外部数组）。所以，这意味着你需要使用"dataSrc": ""。查看更多详细信息here 和背景说明here。
在那之后，您仍然会遇到如何处理subfields 的问题，因为您的表定义似乎引用了不存在的数据键，例如data: "nested_field_name"。您的 JSON（来自您的最新编辑）仅包含 2 个字段：nested_field 和 subfields。所以这些是 DataTables 可以用来访问每行数据的唯一 2 个值。我不确定您希望如何在每一行中使用该值的子数组。
谢谢@andrewJames！我按照您的第二条评论的说明解决了这个问题。即使我没有触摸"dataSrc": "nested_field"，代码也能正常工作。

标签： javascript jquery postgresql datatable

【解决方案1】：

已解决

密钥data
在columns_nested_field 变量的每个{} 元素内
（这是定义标题和要通过DataTable填写html表格列的数据所必需的）
值必须等于
db 表的列标题，其中包含要填充到 html 表中的数据。

因此，因为在我的情况下，我要填写 html 表的数据来自 db 表 testing_nested_field_blacklist 的 nested_field、subfields 列，
在声明 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"},

现在表格中的数据已正确填写。

更新

我刚刚从 this thread 了解到，我上面提到的键 data 的值必须等于 JSON 对象中使用的字段名称/键（在我的脚本中是在行生成的）

raise gen.Return(self.write(json.dumps(dictionary_nested_field, default=myconverter)))

extractNestedFields类实例的post协程方法，每行一个对象。

【讨论】：