DataTables + FixedColumns + Select2

Bug when rebuilding datatable with dynamic columns & fixedcolumns extension

by azrail

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/css/jquery.dataTables.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/css/select2.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.min.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.min.js"></script>
<select id='select_p' class="search ui-widget-content ui-corner-all" multiple='multiple'>
</select>
<table id="datatable_poc" class="display compact nowrap">
</table>

CSS

#datatable_poc {
  margin-left: 0;
}
#datatable_poc_filter {
  visibility: hidden;
}
div.header {
  width: 90%;
  height: 150px;
  margin: 0 auto;
}
div.title {
  width: 50%;
  float: left;
  color: #bbddff;
  text-align: left;
  vertical-align: middle;
  letter-spacing: 7.5px;
  font-size: 65px; 
}
div.products {
  width: 50%;
  float: right;
  margin-top: 40px;
  vertical-align: middle;
}
div.table {
  width: 90%;
  margin: 0 auto;
}
input, select {
  width: 100%;
  padding: 3px;
  color: black;
  box-sizing: border-box;
  font-weight: normal;
}
li {
  color: black;
}
th, td, input, select, label, li, div {
  font-size: 12px;
  font-family: tahoma;
}

JavaScript

/*
This is a demonstration of what appears like a bug to me, 
when using Datatables + FixedColumns, and dynnamical rebuilding the Datatable 
with a dynamic number of columns.

Sorry in advance if my code appears rather clumsy |:

The purpose of my site is to monitor our software delivery service (opsi), 
while grabbing the required data from mysql db and polishing it up with Datatables 
for easy reading.

I can not provide my ajax sources in here, so i am instead using static arrays, 
which are a 1:1 representation from the json data i receive from my ajax sources.

One can choose one or more products from the input box on top (Select2). 
See variable 'array_p', or the column 'Products' for available products to search for.
if no products are selected (like when the page is loading for the first time), 
a simple flat table is shown, one row per products per client.
if one or more products are chosen, a pivot-table is shown, 
with the version of all chosen products as columns, one row per client. 

This is working fine so far.

And now i want to have a fixed set of columns on the left, so if i have to scroll vertically, 
i still see the client for each row. The FixedColumns extension is actually one of the main reasons, 
why i decided to use Datatables for my approach.

Problem is, when FixedColumns extension is active for the Datatable,
it will only reload with the requested data on every second product selection, and i can't see why!

To reproduce, remove the comment block starting @ line 158.

Please help /:
*/

var array_p = [
  {"id":"firefox","0":"firefox","text":"Mozilla Firefox (firefox)","1":"Mozilla Firefox (firefox)"},
  {"id":"reader-dc","0":"reader-dc","text":"Adobe Reader DC (reader-dc)","1":"Adobe Reader DC (reader-dc)"},
  {"id":"flashplayer","0":"flashplayer","text":"Adobe FlashPlayer (flashplayer)","1":"Adobe FlashPlayer (flashplayer)"},
  {"id":"sap-gui-730","0":"sap-gui-730","text":"SAP Graphical User Interface 7.30 (sap-gui-730)","1":"SAP...