DataTable 行返回未定义

Posted 2023-05-07

【中文标题】DataTable 行返回未定义

【英文标题】：DataTable row returns undefined

【发布时间】：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);
         
                

      
);

    );

【参考方案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 );
);