test dt

by azrail

HTML

<script src="https://code.jquery.com/ui/1.12.0-rc.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0-rc.1/themes/smoothness/jquery-ui.css">
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.css">
<script src="https://cdn.datatables.net/fixedcolumns/3.2.1/js/dataTables.fixedColumns.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/3.2.1/css/fixedColumns.dataTables.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.jquery.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.4.2/chosen.css">
<select id="s_products" multiple="multiple">
  <option value="reader-dc">Adobe Reader DC</option>
  <option value="flashplayer">Adobe FlashPlayer</option>
  <option value="firefox">Mozilla Firefox</option>
</select>
<table id="dt_products" class="display compact nowrap"></table>

CSS

#dt_products_filter {
			visibility: hidden;
		}
		#l_products {
			font-weight: bold;
			margin-left: 5px;
		}
		#s_products {
			width: 50%;
		}
		div.dataTables_wrapper {
			width: 1750px;
			margin: 0 auto;
		}
		div.fg-toolbar {
			height: 20px;
		}
		div.header {
			width: 1750px;
			margin: 0 auto;
			font-size: 80px;
			color: #bbddff;
			text-align: left;
			vertical-align: middle;
			letter-spacing: 15px;
		}
		div.options {
			line-height: 20px;
			width: 1750px;
			margin: 0 auto;
			margin-bottom: 30px; 
		}
		tfoot input, select {
			width: 100%;
			padding: 3px;
			box-sizing: border-box;
		}
		th, td, input, select, label, div {
			font-size: 12px;
			font-family: tahoma;
		}
		/*
		#dt_products {
			margin-left: 0;
		}
		*/

JavaScript

var d_products_poc = [{
  "Client": "client-01.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 1",
  "Produkt": "Adobe Reader DC",
  "Version": "15.010.20060",
  "Angefordert": "none",
  "Verlauf": "",
  "Ausgef\u00fchrt": "update",
  "Ergebnis": "successful",
  "Zeitpunkt": "2016-03-14 09:42:31"
}, {
  "Client": "client-01.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 1",
  "Produkt": "Mozilla Firefox",
  "Version": "45.0",
  "Angefordert": "none",
  "Verlauf": "",
  "Ausgef\u00fchrt": "setup",
  "Ergebnis": "successful",
  "Zeitpunkt": "2016-03-14 09:36:05"
}, {
  "Client": "client-02.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 2",
  "Produkt": "Adobe Reader DC",
  "Version": "15.010.20060",
  "Angefordert": "none",
  "Verlauf": "",
  "Ausgef\u00fchrt": "update",
  "Ergebnis": "successful",
  "Zeitpunkt": "2016-03-14 09:42:27"
}, {
  "Client": "client-02.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 2",
  "Produkt": "Adobe FlashPlayer",
  "Version": "21.0.0.182",
  "Angefordert": "none",
  "Verlauf": "",
  "Ausgef\u00fchrt": "setup",
  "Ergebnis": "successful",
  "Zeitpunkt": "2016-03-14 09:25:12"
}, {
  "Client": "client-01.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 1",
  "Produkt": "Adobe FlashPlayer",
  "Version": "21.0.0.182",
  "Angefordert": "none",
  "Verlauf": "",
  "Ausgef\u00fchrt": "setup",
  "Ergebnis": "successful",
  "Zeitpunkt": "2016-03-14 09:25:12"
}, {
  "Client": "client-02.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 2",
  "Produkt": "Mozilla Firefox",
  "Version": "45.0",
  "Angefordert": "none",
  "Verlauf": "",
  "Ausgef\u00fchrt": "setup",
  "Ergebnis": "successful",
  "Zeitpunkt": "2016-03-14 09:36:04"
}];
var d_products_poc_pivot = [{
  "Client": "client-01.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 2",
  "firefox": "45.0",
  "flashplayer": "21.0.0.182",
  "reader-dc": "15.010.20060"
}, {
  "Client": "client-02.civitec.local",
  "Zuordnung": "",
  "Gruppe": "Test 2",
  "firefox":...