CODEWITHSUNDEEP
javascriptjquerycssdatatabledatatables
Bolek Lolek
Bolek Lolek

Reputation: 619

Datatable fixedcolumn with dynamic height

Everything works good until I click on <tr> (remove row). Height of table is changed but fixed column have always the same. Problem is that I can't use bottom scrollbar after removing row (part under fixed column)

enter image description here

http://jsfiddle.net/rn68jqth/20/

Upvotes: 0

Views: 1574

Answers (2)

Abhishek Sharma
Abhishek Sharma

Reputation: 132

You can also destroy the table and recreate also instead of hide use display none. 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'
          },
    });
  });
});

Upvotes: 1

Chanckjh
Chanckjh

Reputation: 2597

You need to redraw the table after you hide it. 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();
    });
  });


});

Upvotes: 2

Related Questions