数据表行未定义（DataTables.js）

Question

我正在尝试访问我的DataTables应用程序中的一行的ID。 当我选择一个特定的行时，将选择该行，然后，当我点击显示在网站上的菜单上的“编辑”按钮时，该行的ID应该传递给一个url（我删除了该URL，因为它不是工作，所以我决定console.log信息）

问题是，即使我可以目视检查ID是否存在，行ID仍会返回未定义状态。

这是代码：

$(document).ready(function(){
    var table = $('#example').DataTable({
        responsive: true,
        pagination: true,
        serverSide: false,
        processing: true,
        dom: '<"pull-left"f><"pull-right"l>tip',
        type: 'GET',
        sAjaxSource:'EquipmentList/list.asp',
        deferRender: true,
        //idDisplayLength: 10,
        select: true,
        colspan: 7,
        columns: [
            {"data": "documento"},
            {
                "data": "fecha_entrada"
            },
            {"data": "numero_control"},
            {"data": "nombre_cliente"},
            {"data": "linea_contenedor"},
            {"data": "estatus_actual"},
            {"data":"estatus_actual"}
        ],
        // add an id for each generated row:
        fnCreatedRow: function(nRow, nData, nId) {
            $(nRow).attr('id', nData['pk1']);
        }           
    }); // end of datatable creation

    $('#example tbody').on('click', 'tr', function() {
        if ($(this).hasClass('selected')) {
          $(this).removeClass('selected');
        } else {
          table.$('tr.selected').removeClass('selected');
          $(this).addClass('selected');
        }
      });
    $('#btnEdit').click(function () {
        var selectedRow = table.row('.selected').id();
        console.log(selectedRow);       
    });
});

为了使selectedRow显示为未定义，它必须表示未将ID添加到数据表中，但是我在那儿知道它：

Answer 1

id（）方法不会从DOM中读取ID。 不用使用fnCreatedRow函数手动设置id，而是使用rowId属性 。 这还将在DOM中设置id属性，但也将其内部存储以供id（）方法使用。

因此，如果将Datatables初始化更改为类似的代码，则代码可以正常工作：

var table = $('#example').DataTable({
    responsive: true,
    pagination: true,
    serverSide: false,
    processing: true,
    dom: '<"pull-left"f><"pull-right"l>tip',
    type: 'GET',
    sAjaxSource:'EquipmentList/list.asp',
    deferRender: true,
    //idDisplayLength: 10,
    select: true,
    colspan: 7,
    rowId: "pk1",
    columns: [
        {"data": "documento"},
        {"data": "fecha_entrada"},
        {"data": "numero_control"},
        {"data": "nombre_cliente"},
        {"data": "linea_contenedor"},
        {"data": "estatus_actual"},
        {"data":"estatus_actual"}
    ]         
}); // end of datatable creation

在工作样本下面：

  var table = $('#sample').DataTable({ serverSide: false, searching: false, rowId: "id", data: [ { "id": 5, "column-a": "Sample Data A", "column-b": 10, "column-c": "Lore ipsum" }, { "id": 6, "column-a": "Sample Data B", "column-b": 5, "column-c": "Ipsum" }, { "id": 8, "column-a": "Sample Data C", "column-b": 38, "column-c": "Lore" } ], columnDefs: [ { targets: 0, data: "id", title: "id" }, { targets: 1, data: "column-a" }, { targets: 2, data: "column-b" }, { targets: 3, data: "column-c" } ] }); $('#sample tbody').on('click', 'tr', function() { if ($(this).hasClass('selected')) { $(this).removeClass('selected'); } else { table.$('tr.selected').removeClass('selected'); $(this).addClass('selected'); } }); $('#edit').click(function () { var selectedRow = table.row('.selected').id(); alert(selectedRow); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/> <button id="edit">Edit</button> <table id="sample"></table>