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
<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>
            <td>Ashton Cox</td>
            <td>Junior Technical...

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%;
}

JavaScript

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

$("#example").DataTable({
   dom: 'Bfrtip',
   "scrollY": "35vh",
   "scrollCollapse": true,
   "paging": false,
   initComplete: function() {

       this.api().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 = $('<select class="filterSelect"><option value=""></option></select>')
       var select = $(checklist)
         .appendTo($(column.header()))
         .on('change', function() {
           var val = $.fn.dataTable.util.escapeRegex($(this).val());

           column
             //.search(val ? '^' + val + '$' : '', true, false)
             .search('^Ashton Cox$|^Bruno Nash$', 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().css('z-index','9999');
    		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);
       });
     });

     $(".filterSelect").each(function(index, thisFilterSelect) {
       if ($(thisFilterSelect).parent().hasClass("notes")) {
         $(thisFilterSelect).hide();
       }

     });

   },
 });

/*
$("body").off(".myNS");
$( "body" ).on(...