Question

我正在尝试访问DataTables应用程序中的行ID。当我选择一个特定的行时，该行被选中，之后当我点击我在网站上显示的菜单上的编辑按钮时，该行的id应该传递给一个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() method不会从DOM中读取ID。不使用fnCreatedRow函数手动设置id，而是使用rowId attribute。这也在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>

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

1 个答案: