DataTables行点击事件问题：点击行时data[0]显示undefined的原因

我来帮你分析下问题所在：

你初始化DataTables的时候，columns配置用的是对象映射（通过mData指定了具体的字段名，比如username、fullname），这意味着你的数据源是对象数组，所以当你调用table.row( this ).data()时，返回的是一个包含对应字段的对象，而不是数组。

你原来的代码里用data[0]去取值，这是数组的访问方式，但当前data是对象，自然找不到索引为0的属性，所以就返回undefined了。

解决方案 #

根据你的需求，有两种常见的处理方式：

1. 直接访问对象的属性（如果你想显示用户名） #

既然data是对象，直接用字段名访问就行，比如：

$('#tbl_user').on('click', 'tr', function () {
    var data = table.row( this ).data();
    alert( 'You clicked on '+ data.username +'\'s row' );
} );

2. 获取行号（贴合你最初想要的"You clicked on row N"效果） #

如果你想显示点击的是第几行，可以用row().index()获取行的索引（注意索引从0开始，所以要加1）：

$('#tbl_user').on('click', 'tr', function () {
    var rowNum = table.row( this ).index() + 1;
    alert( 'You clicked on row '+ rowNum );
} );

这样修改后，点击行就不会再出现undefined的问题啦。

内容的提问来源于stack exchange，提问作者anta40