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 class="shhide" data-priority="1">Kód</th>
  <th>Název</th>
  <th class="shhide">PN</th>
  <th class="shhide">Záruka</th>
  <th class="shhide">Status</th>
  <th class="shhide">Sklad</th>
  <th>Počet ks</th>
  <th class="shhide">Bez DPH a popl.</th>
  <th class="shhide">Vč. DPH a popl.</th>
  <th data-priority="3">Celkem s DPH</th>
  <th data-priority="2">Akce</th>
  <th></th>
</tr>
</thead>
<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>  <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>...

CSS

/* toto je jen pro demo, data-priority v html kodu určuje důležitost sloupců, podle ní se schovávají pokud dochází místo */
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: {
            details: { 
                type: 'column',
                target: -1 //takto nastavím zobrazení tlačítka do posledního sloupce, který je přidaný v html struktuře a je prázdý. Patří k tomu i columnDefs nastavení niže.
            }
        },
        columnDefs: [ {
            className: 'control', 
            orderable: false,
            targets:   -1
        } ],
        
        colReorder: true, // v košíku asi nebude třeba tento plugin na přetahování pořadí sloupců
        dom: 'lfBtipr',
        buttons: [ {
        	extend: 'colvis', // aktivuju plugin colvis - https://datatables.net/reference/button/colvis
          columns: '.shhide', // vyberu sloupce které umožním skrývat - https://datatables.net/reference/type/column-selector
        	text: 'Zobrazit / skrýt sloupce'
        }	]
    } );
} );