Answers

• kthorngren Posts: 21,327Questions: 26Answers: 4,949

  July 2017

  Yes, I have a table displaying trace log events with different log levels. I setup checkboxes to filter which log levels are displayed. You will create a search plugin to build this. Here is a search plugin blog tutorial:
  https://datatables.net/blog/2014-08-26

  My code uses the legacy commands. I wrote it before I knew the difference You may want to use the current command versions. Since I wrote this early in my learning it may not be the best algorithm but it works.

  I store the checkbox state in the DB for each user then when the page is opened I get the saved checkbox values and build the HTML setting the checkboxes appropriately. Then I use the below search plugin to filter column 2 based on the checked items.

      $.fn.dataTableExt.afnFiltering.push(function(oSettings, aData, iDataIndex) {
          var checked = [];
          $('.filter-column').each(function () {   //filter-column class is assigned to the checkboxes
              var $this = $(this);
              if ($this.is(':checked')) checked.push($this);   //get all checked checkboxes
          });
          if (checked.length) {
              var returnValue = false;
              $.each(checked, function (i, $obj) {
                  //$obj..data('colnum') is 2 (the column i'm interested in) and aData[$obj.data('colnum')] is the data in column 2
                 //if the value in the column equals the value of the checkedbox ($obj.val()) set returnValue = true
                  if (aData[$obj.data('colnum')] == $obj.val()) {
                      returnValue = true;
                      return false; // exit loop early if match found
                  }
              });
  
              return returnValue;
          }
  
          if (!checked.length) return true;
  
          return false;
      });
  

  Hope this helps you get started.

  Kevin
• Jo0 Posts: 2Questions: 1Answers: 0

  July 2017 edited July 2017

  I ended up just running with the Select Filtering example and changing it to add a collection of checkboxes. Then using JS and css to hide and display the list of checkboxes on select.

  var expanded = false;
  function showCheckBoxes() {
      var checkboxes = document.getElementById('checkboxes');
      if (!expanded) {
          document.getElementById('selectbox').style.border = "1px #2C92F7 solid";        
          checkboxes.style.display = "block";
          expanded = true;
      }
      else {
          document.getElementById('selectbox').style.border = "";
          checkboxes.style.display = "none";
          expanded = false;
      }
  }
  
  

  $("#exampletfoot th").each(function (i) {
              if ($(this).text() == "Header2") {
                  var select = $('<div class="multiselect"><div id="selectbox" class="selectBox" onclick="showCheckBoxes()"><select><option value=""></option></select><div class="overSelect"></div></div>')
                   .appendTo($(this).empty());
  
                  var checkboxlist = "";
                  table.column(i).data().unique().sort().each(function (d, j) {
                      checkboxlist += '<label for="' + d +'"><input type="checkbox" value="' + d + '"checked>' + d + '</label>';
                  });
  
                  
                  select.append('<div id="checkboxes">' + checkboxlist + '</div></div>');
                  document.getElementById('checkboxes').style.display = 'none';             
  
              }
  
              if ($(this).text() == "Header4" || $(this).text() == "Header5") {
                  var select = $('<select><option value=""></option></select>')
                   .appendTo($(this).empty())
                   .on('change', function () {
                       var val = $(this).val();
  
                       table.column(i)
                             .search(val ? '^' + $(this).val() + '$' : val, true, false)
                             .draw();
                   });
  
                  table.column(i).data().unique().sort().each(function (d, j) {
                      select.append('<option value="' + d + '">' + d + '</option>');
                  });
              }
          });
  
  
  
  

  tfoot option {
      width: 100%;
      padding: 3px;
      box-sizing: border-box;
  }
  
  tfoot {
      display: table-header-group;
  }
  
  .multiselect {
      width: 140px;
  }
  
  .selectBox {
      position: relative;
      width: 140px;
  }
  
  .selectBox select {
      width: 140px;
  }
  
  .overSelect {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
  }
  
  #checkboxes {
      border: 1px #2C92F7 solid;   
      background-color: #ffffff;
  }
  
  #checkboxes label {
      font-family: Arial;
      font-size: 13px;
      font-weight:400;
      color: #676a6c;
      display: block;
  }
  
  #checkboxes label:hover {
      display: block;
      background-color: #2C92F7;
  }