具有固定 header 的数据表 : row click function giving error on fixed cols

Question

我有一个点击函数，将行数据存储在控制台日志中

如果单击前两列，您会注意到该函数返回未定义，但是任何未卡住的列都会返回数据对象

我知道这与固定列是在克隆表中创建的事实有关，我想知道是否有任何解决方法？

// Server-side processing with object sourced data
var $table;
$(document).ready(function() {
    $table = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "/ssp/objects.php",
      dom: "<'row'<'col-md-6 'l><'col-md-6 pull-right'>r>t<'row'<'col-md-6'i><'col-md-6'p>>",
        "columns": [
            { "data": "first_name" },
            { "data": "last_name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "start_date" },
            { "data": "salary" }
        ],

    scrollY: "600px",
    scrollX: "100%",
    scrollCollapse: true,
        "pageLength": 5,
  lengthMenu: [[5, 10, 25, 50 ], [5, 10, 25, 50]],
  order: [[ 1, "asc" ]],
    } );

    new $.fn.dataTable.FixedColumns( $table, {
        leftColumns: 2
    } );  


$table.on("click", "tr",function(){
  var aData = $table.row( this ).data();
  console.log( aData);
  } );  
} );

here is my example code in action

Answer 1

您可以使用fnGetPosition获取有关行索引的信息。

来自手册:

This function is functionally identical to fnGetPosition in DataTables, taking the same parameter (TH, TD or TR node) and returning exactly the the same information (data index information). The difference between the two is that this method takes into account the fixed columns in the table, so you can pass in nodes from the master table, or the cloned tables and get the index position for the data in the main table.

您的代码需要修改如下:

var fc = new $.fn.dataTable.FixedColumns( $table, {
   leftColumns: 2
});  

$table.on("click", "tr", function(){
   var aData = $table.row(fc.fnGetPosition(this)).data();
   console.log(aData);
});

查看此example code用于演示。