jquery DataTables警告：表id=< my_table_name>-请求的未知参数“< my_table_first_column_name>”，用于行0、列0

5fjcxozz  于 2023-08-04  发布在  jQuery
关注(0)|答案(2)|浏览(129)

我对JavaScript很陌生，我正在努力扩展由第三部分实现的代码片段，我必须使用DataTables填充数据表。

context

此表由3列组成：“nested field”、“subfields blacklist”、“edit”，当用数据填充时，应如下所示：
x1c 0d1x的数据
需要填入“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页面时出现了这两个错误弹出窗口（当我在第一个页面上单击“ok”时，后者弹出）。


的
DataTables警告：table id=NestedFieldTable -行0、列0的请求的未知参数“nested_field_name”。有关此错误的详细信息，请参阅http://datatables.net/tn/4
请注意，此时表只有一行，甚至“编辑”列也没有填充数据（当我关闭两个错误弹出窗口时，该列将是唯一一个成功填充数据的列）。


的
DataTables警告：table 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表中（因为它不显示数据库中已经存在的数据）。
我做错了什么？我该怎么解决？

问题更新

js代码中用于填充html表的url /getNestedFields/通过tornado web framework以这种方式绑定到类extractNestedFields：

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

型
其中类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']}
]

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

jquery

2条答案

按热度按时间
z2acfund

z2acfund1#

已解决
钥匙data
在columns_nested_field变量的每个{}元素中
（这对于定义标题和想要通过 DataTable 填充到html表的列中的数据是必要的）
必须具有等于
包含想要填充到HTML表中的数据的DB表的列的标题。
因此，由于在我的例子中，我想要填充到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协程方法的对象，每行一个对象。

赞(0）分享  回复(0）举报  2023-08-04
wwtsj6pe

wwtsj6pe2#

我有同样的bug，我注意到我的HTML代码中的列比我的JavaScript代码中的列多。我通过编辑与JavaScript代码中的列相同的列来修复它。
HTML代码

<thead>
  <tr>
    <th>#</th>
    <th>Tag Name</th>
    <th>Tag Type</th>
    <th>Action</th>
  </tr>
</thead>

字符串
JQuery代码：

$.each(data, function (index, value) {
  ctr++;
  var rowNode = tbl
    .row.add([
      value.ID,
      value.TagName,
      action
    ])
    .draw()
    .node();

  $(rowNode).attr('id', value.ID);
});

型
解决方案：
我删除了我的HTML代码中的“标签类型”列，它修复了错误。我希望这对其他人有帮助！

赞(0）分享  回复(0）举报  2023-08-04
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com