DataTables Filter

test

by Petr Haluza

HTML

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.1.0/js/dataTables.buttons.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/dataTables.bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<table id="HAPtable" class="table table-bordered"><thead><tr><th>			</th><th>	název/řada	</th><th>	kód	</th><th>	cena (Kč)	</th><th>	routing (Mbps)	</th><th>	počet rozhraní	</th><th>	cena za Mbps (Kč)	</th><th>	Hardware acceleration	</th><th>	Switch-Chip	</th><th>	Dude server	</th><th>	Wi-Fi	</th><th>	Max. Výstupní výkon (dBm)	</th><th>	PoE in	</th><th>	PoE out (počet)	</th></tr></thead><tbody>	

<tr>
<td><img src="https://www.img4.cz/www/img/imgthumb?code=NABMKR1064"></td>
<td>hEX lite</td>
<td><a href="https://www.i4wifi.cz/Podle-vyrobce/MIKROTIK/RB750r2-hEX-lite-64-MB-RAM-850-MHz-5x-LAN-vc-L4.html">RB750r2</a></td>
<td>814</td>
<td>111.5</td>
<td>5</td>
<td>1,46</td>
<td>ne</td>
<td>ano</td>
<td>ne</td>
<td>ne</td>
<td>-</td>
<td>passive (6-30V)</td>
<td>ne</td>
</tr>
<tr>
<td><img src="https://www.img4.cz/www/img/imgthumb?code=NABMKR1070"></td>
<td>hEX PoE lite</td>
<td><a href="https://www.i4wifi.cz/cs/210656-routerboard-mikrotik-hex-poe-lite">RB750UPr2</a></td>
<td>1158</td>
<td>102.8</td>
<td>5</td>
<td>2,25</td>
<td>ne</td>
<td>ano</td>
<td>ne</td>
<td>ne</td>
<td>-</td>
<td>passive (8-30V)</td>
<td>ne</td>
</tr>
<tr>
<td><img...

CSS

body {
  padding: 10px
}
table#HAPtable {max-width:1024px !important; margin:0 auto}
.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
    width: initial;
}
table#HAPtable tbody img {max-width:60px; padding-right:2px}

JavaScript

$('#HAPtable tr th').on("click", function(event) {
  if ($(event.target).is("button")) {
		table.column(5).orderable(false).draw();//vypne sort při kliku na filtr //nefachčí
  }
});

var table = $('#HAPtable').DataTable({
  paging: false,
  columnDefs: [ {
               'targets': [0,7,8,9,13], // column index (start from 0)
               'orderable': false, // set orderable false for selected columns
         }],
	order: [[1, 'asc']], // výchozí sloupec pdle čeho seřadíme
  initComplete: function() {
  
      this.api().columns([7]).every(function() {
      var column = this;
      var select = $('<select class="selectpicker" data-show-content="false" data-none-selected-text="HW akcelerace" multiple></select>')
        .appendTo($(column.header()).empty())
        .on('changed.bs.select', function(e) {
          var val = $(this).val();
          var fVal = val.join("|")
          column
            .search(fVal, true, false)
            .draw();
        }); //select
      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      }); //column.data
    }); //this.api
    
    this.api().columns([8]).every(function() {
      var column = this;
      var select = $('<select class="selectpicker" data-show-content="false" data-none-selected-text="Switch-Chip" multiple></select>')
        .appendTo($(column.header()).empty())
        .on('changed.bs.select', function(e) {
          var val = $(this).val();
          var fVal = val.join("|")
          column
            .search(fVal, true, false)
            .draw();
        }); //select
      column.data().unique().sort().each(function(d, j) {
        select.append('<option value="' + d + '">' + d + '</option>')
      }); //column.data
    }); //this.api
    
    this.api().columns([9]).every(function() {
      var column = this;
      var select = $('<select class="selectpicker" data-show-content="false" data-none-selected-text="Dude server"...