鄙人前端小白,用词可能不专业,仅仅分享一下经验。
我们在Datatable的使用过程中,常常会需要获取隐藏列的值。但通过传统的DOM操作是无法获取的。那如何是好?
我参考了一个老哥的博客,他的解法如下:
//先拿到点击的行号
var rowIndex = $(this).parents("tr").index();
//此处拿到隐藏列的id
var id = $('#example').DataTable().row(rowIndex).data().id;
但是这样其实是不对的。为什么?我们第一步,确实获取到了点击的这一行的索引。但是第二步问题就来了:调用row(rowIndex)时,是从原始数据中,根据索引拿某一行的数据,而不是排序后的数据。比如我们在使用过程中可能会对行进行排序,每一行的索引会更改,但我们拿的始终是数据最开始的排序方式。
举个例子吧。数据开始是[ x, y, z],我们拿索引0,拿到x。但是我们中途可能排序了一下,数据变成[z, y, x],但我们现在点击z,获取z的索引0,还是从[x, y, z]中拿索引0,得到的是x。
所以我们不能通过索引来拿。那怎么办呢?直接拿行。我们看官方示例:https://datatables.net/reference/api/row().data()
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
console.log( table.row( this ).data() );
} );
官方示例是对行直接点击的。那我们如果是对行中的某一列或是某个按钮点击,不也是一样的吗?先拿到行的DOM,也就是$(this).parents("tr"),然后直接交给table.row(),我们就能拿到这一行当前的数据了。