jquery - 读取JQuery中隐藏列的值

Question

我需要隐藏表格上的一列，但之后我无法读取所选行的隐藏列值。

 dtTable = $('#lookupTable').DataTable({
       "columnDefs": [
           {
               "targets": [ 0 ],
               "visible": false,
               "searchable": false               
           }
        ],  

        aaData: data,
        aoColumns: cols,
        paging: false,
        scrollCollapse: true,
        destroy: true

    });

如您所见，第一列现在已隐藏。我正在尝试使用该代码读取列值

    selectedIndex = $(this).find('td:eq(0)').text(); 

如果我从代码中删除 <"visible": false> 我可以读取第一列的值，但如果它被隐藏，它会给我第二列值。

我厌倦了更改“witdh”属性，但它不起作用..

Answer 1

CSS 选择器不起作用，因为 columnDefs 中的 "visible": false 并不意味着该列获得等效的 display: none; code> 标记中的样式属性。

相反，您必须使用 DataTables API 来获取隐藏列中的数据。

函数fnGetData就可以解决这个问题。它返回单元格中的文本数据，该文本数据作为参数传递给函数。

这是文档中的示例

oTable.$('td').click( function () {
    var sData = oTable.fnGetData( this );
    alert( 'The cell clicked on had the value of '+sData );
});

在您的情况下，该列是隐藏的，因此您必须将其与第二个 API 调用结合起来。假设您单击隐藏第一列的行，则可以将 fnGetData 与 fnGetPosition 函数结合起来。

var position = dtTable.fnGetPosition(this);
var hiddenColumnValue = dtTable.fnGetData(position)[0];

查看文档，其中有一些很棒的示例。

fnGetData()

fnGetPosition()

这是工作代码

  $('#lookupTable tbody').on('click', 'tr', function () {

        selectedIndex = dtTable.row(this).data()[0];   
 });