Datatable+resp+colvis+NoMobile

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>
<div id="dimensions"></div>

<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> ...

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: {
            details: { 
                type: 'column', target: -1
            }
        },
        columnDefs: [ {
            className: 'control', orderable: false, targets:   -1
        } ],
        
        colReorder: true,
        dom: 'lfBtipr',
        buttons: [ {
        	extend: 'colvis', columns: '.shhide', text: 'Zobrazit/skrýt'
        }	]
    } );
} );


/*kilnout*/
var dtOptions = { responsive: true };
$(window).bind('resize', function () {
if($(window).width() < 701){
    $('#HAPdata').DataTable().destroy();
    $('#HAPdata').removeClass('dtr-inline collapsed');
}else{
    //$('#HAPdata').DataTable(dtOptions);
}
})


//jen zobrazené šířky
    window.onresize = displayWindowSize;
    window.onload = displayWindowSize;

    function displayWindowSize() {
        myWidth = window.innerWidth;
        myHeight = window.innerHeight;
        // your size calculation code here
        document.getElementById("dimensions").innerHTML = myWidth + "x" + myHeight;
    };