javascript - 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];
});