在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选择器不起作用,因为"visible": false在你的columnDefs意思中,并不意味着列display: none;在标记中获得等效的样式属性.

相反,您必须使用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];   
 });

Answer 2

浏览dataTables API,您可以通过多种方式以正确的方式从隐藏列中检索数据.例如,您可以使用cells.正如您在链接中看到的那样,您可以使用所有类型的选择器cells,就像jQuery选择器一样.

这是一个非常简单的示例,它记录了已隐藏的第一列的值:

var dtTable = $('#example').DataTable()  

dtTable.columns([0,1,2]).visible(false);

for (var i=0;i<10;i++) {
    console.log(dtTable.cells({ row: i, column: 0 }).data()[0]);
}    

http://jsfiddle.net/oumtdd6k/

它不能被强调:总是通过API,不要尝试在初始化的dataTable上使用传统的jQuery!

在这种情况下,原因很明显:jQuery只能访问DOM中实际存在的元素.当您隐藏dataTables中的列时,它们不会被隐藏display: none,它们根本就不会被渲染!