具有动态高度的数据表固定列答案

【问题标题】：Datatable fixedcolumn with dynamic height具有动态高度的数据表固定列
【发布时间】：2018-06-27 07:17:38
【问题描述】：

在我点击<tr>（删除行）之前，一切正常。表的高度已更改，但固定列始终相同。问题是删除行后我不能使用底部滚动条（固定列下的部分）

【问题讨论】：

标签： javascript jquery css datatable datatables

【解决方案1】：

隐藏后需要重新绘制表格。 http://jsfiddle.net/rn68jqth/42/

$(function() {
var table = $('#example').DataTable(
        {
          scrollY: "300px",
          scrollX: true,
          scrollCollapse: true,
          paging: false,
          ordering: false,
          bInfo: false,
          searching: false,
          fixedColumns:   {
            leftColumns: 1,
            heightMatch: 'auto'
          },
        });

  $('tr').on('click', function() {
  let index =  $(this).data('id');
    $('.tr_'+index).hide(function()
    {
        table.draw();
    });
  });


});

【讨论】：

重绘后必须再次绑定点击事件——否则无法移除更多行

【解决方案2】：

您也可以销毁表并重新创建，而不是使用显示无隐藏。 http://jsfiddle.net/rn68jqth/67/

$(function() {
var table = $('#example').DataTable(
        {
          scrollY: "300px",
          scrollX: true,
          scrollCollapse: true,
          paging: false,
          ordering: false,
          bInfo: false,
          searching: false,
          fixedColumns:   {
            leftColumns: 1,
            heightMatch: 'auto'
          },
        });

  $('tr').on('click', function() {
  var index =  $(this).data('id');
    //$('.tr_'+index).hide('fast');
    $('.tr_'+index).attr("style","display:none;");
    $('#example').DataTable().destroy();
    $('#example').DataTable({
    scrollY: "300px",
          scrollX: true,
          scrollCollapse: true,
          paging: false,
          ordering: false,
          bInfo: false,
          searching: false,
          fixedColumns:   {
            leftColumns: 1,
            heightMatch: 'auto'
          },
    });
  });
});

【讨论】：