Datatables plugin fixed column combined with bootstrap tab

1
votes

I have a problem with datatables plugin fixed column shown on second tab (with bootstrap tab) enter image description here

And this is my javascript code

$(document).ready(function() {
  $('#PRtable').DataTable( {
    // fixedHeader: true,
    scrollX: true,
    oLanguage: {
      sInfoFiltered: ""
    },
    bFilter: false, 
    fixedColumns: { 
      leftColumns: 4 
    },
    orderable : false,
    // "aoColumnDefs": [
    // { "bSortable": false, "aTargets": [ "_all" ] }
    // ],
    scrollY: '50vh',
    scrollCollapse: true,
    paging:         false
  } );
  $('#KK2table').DataTable( {
    // fixedHeader: true,
    scrollX: true,
    oLanguage: {
      sInfoFiltered: ""
    },
    bFilter: false, 
    fixedColumns: { 
      leftColumns: 4 
    },
    orderable : false,
    "aoColumnDefs": [
      { "bSortable": false, "aTargets": [ "_all" ] }
    ],
    scrollY: '50vh',
    scrollCollapse: true,
    paging:         false
  } );
  $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();
  });    
});
function test(e){
  document.getElementById('head'+e).innerHTML += "<br>Trident"; 
}

As you can see on the picture the column is like distorted on "second tab" but it works perfectly fine if i make it on the first tab.

here jsfiddle code

update: i forgot to mention, if you look at the table you will find a button that will append some text on first column, buts its seems datatables plugin make duplicate table and my javascript function on that button work only on table behind datatables tables

1
twitter-bootstrapdatatables

1 Answers

0
votes

You have included multiple versions of the DataTables - 1.9.4 and 1.10.15. It works fine after removing the older one, see updated example.