点击Datatables最后一列触发“Unable to automatically determine field from source”错误求助

问题根源 #

点击表格最后一列（带操作按钮的列）时触发了行内编辑，但该列的data配置为null，没有对应的Editor字段，导致Editor无法自动匹配到要编辑的字段，从而抛出错误。

解决方案 #

你需要禁止最后一列触发行内编辑，以下是两种简洁的实现方式：

方式1：直接修改点击事件选择器，排除最后一列

原事件选择器只排除了第一列，现在补充排除最后一列即可：

// 点击表格单元格触发行内编辑
$('#inventory').on( 'click', 'tbody td:not(:first-child):not(:last-child)', function (e) {
    editor.inline( table.cell( this ).index(), { onBlur: 'submit' } );
} );

方式2：给最后一列加专属类，通过类排除编辑

1. 在Datatable的列配置中，给最后一列添加className标记：

columns: [
    {data: null, defaultContent: '', className: 'select-checkbox', orderable: false, searchable: false },
    { data: "art"},
    { data: "name" },
    { data: "balance", searchable: false },
    { data: "unit", orderable: false },
    { 
        data: null, 
        targets: -1, 
        defaultContent: '<button type="button" class="btn btn-sm btn-primary transactionModalBtn">+ -</button>', 
        orderable: false, 
        searchable: false,
        className: 'non-editable' // 添加不可编辑类
    }
],

2. 修改点击事件选择器，排除带有该类的单元格：

$('#inventory').on( 'click', 'tbody td:not(:first-child):not(.non-editable)', function (e) {
    editor.inline( table.cell( this ).index(), { onBlur: 'submit' } );
} );

额外说明 #

• 无需在Editor中添加该列的字段，因为这列仅用于展示操作按钮，不需要编辑能力。
• 问题和使用columns还是columnDefs无关，核心是点击事件误触发了无对应字段列的编辑操作。

内容的提问来源于stack exchange，提问作者Björn C