Question

我正在尝试在单击按钮时获取当前行的数据库ID。

我已经看到了一些与这方面有关的例子并尝试了很多但似乎它们主要与遗留的表工具扩展相关，而我正在使用编辑器。

使用编辑器手册中的idSrc选项，我在JSON中收到包含数据库ID /主键值的服务器端响应：

{
  "data":[
    {
      "id":"1",
      "name":"Test Name",
    }
  ],
  "options":[],
  "files":[]
}

现在，我想点击通过API函数附加到行的按钮来获取该值：row().id()

在此函数的示例中，它提供了如何获取行id值（现在是数据库ID？）的明确示例：

var table = $('#myTable').DataTable();
$('#myTable').on( 'click', 'tr', function () {
  var id = table.row( this ).id();
  alert( 'Clicked row id '+id );
});

所以我实现了如下：

var editor;
$(document).ready(function() {

  editor = new $.fn.dataTable.Editor( {
    ajax: "/names.php",
    table: "#example",
    idSrc: "id",
    fields: [ {
      label: "Name:",
      name: "name"
    } ]
  });

  var table = $('#example').DataTable( {
    dom: "Bfrtip",
    ajax: "/names.php",
    columns: [
      { data: "name" }
    ]
  });

  $('#example').on( 'click', 'tr', function () {
    var id = table.row( this ).id();
    alert( 'Clicked row id ' + id );
  });

});

这里的问题是，当我点击行（tr）时，它会提示如下：Clicked row id undefined

为什么我应该回发行ID时返回未定义的值？

Answer 1

在您的DataTable实例时，您必须指明ID字段rowId，该字段应显示为列的名称

var table = $('#example').DataTable( {
dom: "Bfrtip",
ajax: "/names.php",
columns: [
  { data : "id" },//id is the name of your data
  { data: "name" }
],
rowId: 'id' //Here assign the id to your table
});

结果：https://jsfiddle.net/cmedina/7kfmyw6x/17/

Answer 2

正如@CMedina所指出的那样，rowId规定了JSON数据中的哪个值被用作每行id属性。

以下是用于获取以row_为前缀的行ID值的代码：

$('#example').on( 'click', 'tr', function () {
  // Get the rows id value
  var id = table.row( this ).id();
  // Filter for only numbers
  id = id.replace(/\D/g, '');
  // Transform to numeric value
  id = parseInt(id, 10);
  // So instead of returning the actual id which is row_1
  // We get back just the primary key which is 1
  alert( 'Clicked row id '+id );
});

DataTables - 通过单击事件获取当前行的数据库ID

2 个答案: