在 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(); 

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

我厌倦了更改“witdh”属性，但它没有用..

Answer 1

CSS 选择器不起作用，因为 columnDefs 中的 "visible": false 并不意味着该列在标记中获得等效的 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，不要尝试在初始化的数据表上使用传统的 jQuery！

在这种情况下，原因很明显：jQuery 只能访问实际存在于 DOM 中的元素。当您在 dataTables 中隐藏列时，它们不会像 display: none 那样隐藏，它们根本不会被渲染！

Answer 3

正确答案已经很老了。所以，如果正确的答案不适合你。请试试这个方法：

selectedIndex = dtTable.row(this).data();

此代码将返回为该行获取的原始 json 对象。类似：

{
   "modify":"false",
   "lastModify":"Tuesday",
   "name":"abc",
   "DT_RowId":"row_1",
   "fileID":"0bde976"
}

要获取“fileID”，您只需：

alert("ID = "+selectedIndex.fileID);

Answer 4

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

      $('#test tbody').on('click', 'tr td .fa-pencil', function (e) {
                    ID = (dtTable.row($(this).closest('tr')).data().Id);
});

`

Answer 5

另一个Soultion是添加Css Class ID Fiekd Visbilety hideen 和 $(this).find('td:eq(0)').text();检索值..

Answer 6

var table= $('#tablename').DataTable();

var hiddenColumnData1 = table.row('#trIdName').data()[1];
var hiddenColumnData2 = table.row('#trIdName').data()[2];

console.log("First Hidden Column Data of 'trIdName' : "+hiddenColumnData1) 
console.log("Second Hidden Column Data of 'trIdName' : "+hiddenColumnData1) 

Answer 7

传统的 jquery 不能在 datatable 上工作，你必须使用 API 定义的方法来获取值。在我的情况下，这可以很好地在每行中单击按钮时获取隐藏列值 -

$(function () {
       var t = $('#mytableid').DataTable({
            "columnDefs": [{
                "searchable": false,
                "orderable": false,
                "visible":false,
                "targets": [0]
            }]
        });

        $('#mytableid').on('click', '.btnClass', function () {
            var currentRow = $(this).closest("tr");
            var columnvalue = t.row(currentRow).data()[0];
            console.log(columnvalue);
        });
});

Answer 8

添加到这个因为这是旧的，并且没有一个答案具有我习惯的快速、干净的 jquery 格式。即使您尝试访问的对象当前未在 DOM 中呈现（即隐藏或在另一个页面上），您也可以使用传统的 jquery 选择器，方法是将其作为 Datatable 的一种方法。 所以在你的情况下：

dtable.$("yourJQuerySelector")

这将选择您习惯的元素并为我的案例工作。