DataTable 行返回未定义答案

【问题标题】：DataTable row returns undefinedDataTable 行返回未定义
【发布时间】：2021-05-16 19:51:39
【问题描述】：

我有一个 JQuery 数据表。 Fpr 每一行我都有一个按钮，当用户单击它时，它应该在模式中显示相关字段以便编辑该行。现在我的问题是我无法获取选定的行 ID，它返回未定义。这是我的代码：

  $("#myDummyTable").DataTable({

            "processing": true, // for show progress bar
            "serverSide": true, // for process server side
            "filter": true, // this is for disable filter (search box)
            "orderMulti": false,
            //"searching": false,
            "language": {
                "url": "/language/Persian.json"
            },
            "ajax": {
                "url": "Data/GetData",
                "type": "POST",
                "datatype": "jason"
            },
            "columnDefs": [{
                "targets": [0],
                "visible": false,
                "searchable": false
            }],

            rowId: "id",
        

             "columns": [
                { "data": "id", "name": "Id", "autoWidth": true },

                 { "data": "startDate", "name": "StartDate", "autoWidth": true },
                 { "data": "endDate", "name": "EndDate", "autoWidth": true },
                {
                defaultContent: '<input type="button" class="Edit" value="edit"/>
                }

            ]

        });

            $('#myDummyTable tbody').on('click', '.Edit', function () {
                var row = myDummyTable.row(this).rowId;
                var myDummyTable = $('#myDummyTable').DataTable();
                console.log('row:' + myDummyTable.row(this).rowId);
         
                

      
});

    });

【问题讨论】：

标签： asp.net-core datatables jquery-plugins

【解决方案1】：

您可以使用render 函数，而不是使用defaultContent 列选项。这允许您自定义每个按钮，以便它可以包含相关 ID：

{ data: "id", render: function ( data, type, row, meta ) {
        return '<input type="button" class="Edit" id="' + data + '" value="edit id ' + data + '"/>';
  }
}

这里我们首先再次使用data: id（与第一列相同）。这意味着此列将使用 id 值。

然后我们使用render 函数，它允许我们通过data 变量访问id 值。

在我的示例中，我将 ID 添加到每个按钮使用的文本中。

我还为每个单元格添加了一个 id 属性，使用相同的 data 值。当然，这假设每个 ID 都是唯一的。

我的测试数据——一行的例子：

{
  "id": "5",
  "name": "Airi Satou",
  "start_date": "2008/11/28",
  "office": "Tokyo"
}

在这种情况下，佐藤爱理的 ID 是5。

我的测试表：

现在，当我单击一个按钮时，以下代码将打印相关 ID：

$('#myDummyTable tbody').on('click', '.Edit', function () {
  console.log( this.id );
});

【讨论】：