具有固定标题的数据表:行点击功能在固定列上给出错误

datatables with fixedheader: row click function giving error on fixed cols

我有一个点击功能,将行数据存储在控制台日志中

如果您单击前两列,您会注意到函数 returns 未定义,但是任何未冻结的列 returns 数据 object

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

// 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

您可以使用 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 进行演示。