Datatable+resp+colvis++

by Petr Haluza

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/colreorder/1.5.1/css/colReorder.dataTables.min.css">
<script src="https://cdn.datatables.net/colreorder/1.5.1/js/dataTables.colReorder.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>


<table id="HAPdata" class="display" cellspacing="0" width="100%">
<thead>
<tr>
  <th data-priority="1">Kód</th>
  <th>Název</th>
  <th>PN</th>
  <th>Záruka</th>
  <th>Status</th>
  <th>Sklad</th>
  <th>Počet ks</th>
  <th>Bez DPH a popl.</th>
  <th>Vč. DPH a popl.</th>
  <th data-priority="3">Celkem s DPH</th>
  <th data-priority="2">Akce</th>
  <th></th>
</tr>
<!--tr>
  <th data-priority="1">Model</th>
  <th>Čip (MPix)</th>
  <th>Úhel záběru</th>
  <th>Změna úhlu záběru</th>
  <th>Stabilizace (digitální)</th>
  <th>Nahrávání při nabíjení</th>
  <th>Dálkové ovládání</th>
  <th>Wifi</th>
  <th>Bluetooth</th>
  <th>Streamování přes Wifi</th>
  <th data-priority="2">Typ baterie</th>
</tr-->
</thead>
<!--tfoot>
<tr>
<td>Model</td>
..
</tr>
</tfoot*-->

<tbody>

<tr>  <td>ACKAB12345</td>  <td class="wrap">Solární MPPT regulátor 12/24 V, XTRA 20A, vstup 100V (XTRA2210N) </td>  <td>XTRA2210N</td>  <td>26 měsíce (ů)</td>  <td>Novinka</td>  <td>Brno , ČB, Ova</td>  <td>2</td>  <td>1 890,00 Kč</td>  <td>2 190,00 Kč</td>  <td>2 890,00 Kč</td>  <td>X X X</td> <td></td></tr>

<tr>  <td>BCKAB12345</td> ...

CSS

th[data-priority="1"]  {background:orange;}
th[data-priority="2"]  {background:orange;}
th[data-priority="3"]  {background:yellow;}

body {font: 1em arial;}
th {font: 0.8em arial;}
td {white-space:nowrap;}
td.wrap {white-space:normal; min-width: 250px;}

/* overrajd responsive.datatables.css*/
table.dataTable.dtr-column > tbody > tr > td.control::before, table.dataTable.dtr-column > tbody > tr > th.control::before {top: 50%;
left: 3px;
height: 16px;
width: 33px;
margin-top: -10px;
margin-left: -10px;
display: block;
position: absolute;
color: white;
border: 2px solid white;
border-radius: 4px;
box-shadow: 0 0 3px #444;
box-sizing: content-box;
text-align: center;
text-indent: 0 !important;
font: 0.8em arial;
line-height: 16px;
content: '+ více';
background-color: #31b131;}

JavaScript

$(document).ready(function() {
    $('#HAPdata').DataTable( {
        //responsive: true,
        responsive: {
            details: { 
                type: 'column',
                target: -1 //takto nastavím zobrazení tlačítka do posledního sloupce, patří k tomu i columnDefs nastavení niže.
            }
        },
        columnDefs: [ {
            className: 'control', 
            orderable: false,
            targets:   -1
        } ],
        
        colReorder: true,
        dom: 'lfBtipr',
        //buttons: ['colvis' ]
        buttons: [ {
        	extend: 'colvis', // https://datatables.net/reference/button/colvis
        	columns: ':gt(0)', //https://datatables.net/reference/type/column-selector
        	text: 'Zobrazit / skrýt sloupce'
        }	]
    } );
} );