Datatable获取行数据未定义错误

Question

我在获取Datatables中一行的数据时出错，我无法弄清楚为什么会这样。

阅读Docs ，获取行数据很简单：

var table = $('#example').DataTable();

$('#example tbody').on( 'click', 'tr', function () {
    console.log( table.row( this ).data() );
} );

所以，我有一个Jinja2模板，它填充在服务器端（在Python 3中使用flask ）：

<table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%">
   <thead>
      .....
   </thead>
   <tbody>
      .....
   </tbody>
</table>

我用以下方法初始化数据表：

function createDatatable() {
    $('#table').DataTable({
        "select": "single",
        "order": [[2, "asc"]],
        "language": {.....}
        }
    });
}

并附加一些事件：

function attachEvents() {
   $('#table tbody').on('click', 'td.tdCredits', function () {
        var table = $('#table').DataTable();
        var rowId = table.row(this).data()[0];
    });
    .....
}

然后我做：

$(document).ready(function() {
    createDatatable();
    attachEvents();
});

因此，当我想使用此代码获取我单击的行的数据（无论是否选中）时，我在控制台上收到错误消息：

TypeError: table.row(...).data(...) is undefined

我做错了什么？ 因为我可以看到呈现的表格，带有分页按钮，所以我也可以对列进行排序。

 $(document).ready(function() { createDatatable(); attachEvents(); }); function createDatatable() { $('#table').DataTable({ "select": "single", "order": [[2, "asc"]] }); } function attachEvents() { $('#table tbody').on('click', 'td.tdCredits', function () { var table = $('#table').DataTable(); var rowData = table.row(this).data(); console.log('Clicked row data: ' + rowData); var rowId = table.row(this).id(); console.log('Clicked row id: ' + rowId); // Other code }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script> <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"/> <table id="table" class="dataTable display responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th style="display: none;"></th> <th class="text-center">Header 1</th> <th class="text-center">Header 2</th> <th class="text-center">Header 3</th> <th class="text-center">Header 4</th> <th class="text-center">Header 5</th> <th class="text-center">Header 6</th> <th class="text-center">Header 7</th> </tr> </thead> <tbody> <tr id="someId" class="filter"> <td style="display: none;"></td> <td class="text-center">Cell 1</td> <td class="text-center">Cell 2</td> <td class="text-center">Cell 3</td> <td class="text-center">Cell 4</td> <td class="text-center tdCredits">Click here</td> <td class="text-center">Cell 6</td> <td class="text-center">Cell 7</td> </tr> </tbody> </table>

Answer 1

你有一个错字。 您的变量被初始化为“table”，然后您调用“tabla”。 “Tabla”不存在，因此未定义。

$('#table tbody').on('click', 'td.tdCredits', function () {
  var table = $('#table').DataTable();
  var rowId = table.row(this).data()[0];
});

Answer 2

好的，我找到了解决我的问题的技巧，而且我不需要访问“.data()”。

我遇到的问题是由于您可以在每一行上编辑一些字段，因此第一次单击该行的一个字段时，它被选中的行，因此您可以使用：

table.row({ selected: true }).index();

但是，如果您再次单击其他字段，则会取消选择该行并且过滤器selected:true不起作用。

做小提琴我发现Datatables使用指定的ID

<tr id="someId" ..>

而不是一些内部价值。 所以我将 ID 值传递给我的方法并强制选择行：

table.row('#' + id).select();

然后我可以使用：

var rowIndex = table.row({ selected: true }).index();

并更新正确的字段而不是第一个可见行的字段：

table.cell({row:rowIndex, column:columnIndex}).data(newValue).draw();

问候！

Answer 3

您正在使用数组表示法 data[0] 来访问您的数据。 但也许您定义了 columns.data，这意味着您的数据是 object。您可以使用它。

data["nameofYourColumn"]