datatables testing v

Combined js/css from datatables cdn

by Cyberjetx

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/ju/jq-3.6.0/jszip-2.5.0/dt-1.12.1/b-2.2.3/b-colvis-2.2.3/b-html5-2.2.3/b-print-2.2.3/cr-1.5.6/date-1.1.2/fc-4.1.0/fh-3.2.3/kt-2.7.0/r-2.3.0/rg-1.2.0/rr-1.2.8/sc-2.0.6/sb-1.3.3/sp-2.0.1/sl-1.4.0/sr-1.1.1/datatables.min.js"></script>

<h3 id="dtVersion">Datatables v...</h3> v42 is before multi-select 
<button class="applyFilter">Emulate column reorder event</button>
<table width="100%" class="display dataTable" id="example" style="width: 100%;" cellspacing="0">
    <thead>
        <tr role="row">
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tfoot style="display:none;">
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$162,700</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>2009/10/09</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
   ...

CSS

td { white-space: nowrap; }
th { white-space: nowrap; }

/*---------------------*/

.dropdown-check-list {
  display: inline-block;
  text-align:left;
}

.dropdown-check-list .anchor {
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 50px 5px 10px;
  border: 1px solid #ccc;
}

.dropdown-check-list .anchor:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 20%;
  transform: rotate(-135deg);
}

.dropdown-check-list .anchor:active:after {
  right: 8px;
  top: 21%;
}

.dropdown-check-list ul.items {
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
  position:absolute;
  background:white;
}

.dropdown-check-list ul.items li {
  list-style: none;
}

.dropdown-check-list.visible .anchor {
  color: #0094ff;
}

.dropdown-check-list.visible .items {
  display: block;
}

.applyFilter{
    width:100%;
}

.applyFilter{
    width:200px;
    margin-bottom:10px;
}

JavaScript

function BuildColumnSearch(dtable) {

  $(".dropdown-check-list").remove();
  dtable.columns().every(function() {

    let checklist = `<div id="list1" class="dropdown-check-list"><div><span class="anchor">Filter...</span><ul class="items" ></ul></div></div>`

    $(".casrep").hide();
    var column = this;
    var select = $(checklist)
      .appendTo($(column.header()))
      .on('change', function() {
        var val = ""; //$.fn.dataTable.util.escapeRegex($(this).val());
        let delim = "";

        $(this).find('input:checked').each(function(index, thisThisfinditemsli) {
          //console.log($(thisThisfinditemsli).parent().text());
          val += delim + '^' + $.fn.dataTable.util.escapeRegex($(thisThisfinditemsli).parent().text().trim()) + '$';
          delim = "|";
        });
        column
          //.search(val ? '^' + val + '$' : '', true, false)
          .search(val, true, false)
          .draw();
      })
      .on('click', function(e) {
        //Stop filter click from sorting 
        //console.log('th > select clicked!');
        e.stopPropagation();
      })
      .find('.anchor')
      .on('click', function() {
        $(this).parent().find(".items").toggle().focus();
        //console.log('click');
      })
      .parent();

    //add filter items 
    column.data().unique().sort().each(function(d, j) {
      //select.append('<option value="' + d + '">' + d + '</option>')
      select.find('.items').append('<li><input type="checkbox" />' + d + ' </li>')
      //console.log(d);
    });
  });
  // hide filter for select columns
  $(".dropdown-check-list").each(function(index, thisFilterSelect) {
    if ($(thisFilterSelect).parent().hasClass("notes")) {
      $(thisFilterSelect).hide();
    }

  });
}

var dtVer = $.fn.dataTable.version;
$("#dtVersion").html("Datatables v" + dtVer);

var dtable = $("#example").DataTable({
  dom: 'Bfrtip',
  //"scrollY": "35vh", //breaks dropdown filter 
  "fixedheader": true,
  "scrollCollapse": true,
...