TestingDropdownListFilter

by BeerusDev

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
          <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/ju/jq-3.6.0/dt-1.11.3/r-2.2.9/rg-1.1.4/datatables.min.css"/>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
      <!--Scripts-->
      <script type="text/javascript" src="https://cdn.datatables.net/v/ju/jq-3.6.0/dt-1.11.3/r-2.2.9/rg-1.1.4/datatables.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" referrerpolicy="no-referrer"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices.min.js" integrity="sha512-ojtbo+zixDfv2qGQUbFOz5jd6lXJrq8TZsX1yq7VljVMlVzoGx7q8U/ELYK6hGL4LGityzJgAq/T/eLjbyRQwQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js" integrity="sha512-Kef5sc7gfTacR7TZKelcrRs15ipf7+t+n7Zh6mKNJbmW+/RRdCW9nwfLn4YX0s2nO6Kv5Y2ChqgIakaC6PW09A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <!--Metadata-->
  </head>
  <body>
  <div class="container">
    
<select name="teamChoice" id="teamChoice">
  <option value=""></option>
  <option value="Team 1">Team 1</option>
  <option value="Team 2">Team 2</option>
</select>    
<table id="table" class="table table-striped table-bordered" style="width:60%">
  <thead>
   ...

JavaScript

var teamData = [
{
"Team" : "Team 1",
"Members" : [
	"Beerus",
  "Blank",
],
"Training" : "training 1",
"Frequency" : "1"
},
{
"Team" : "Team 2",
"Members" : [
	"Beerus",
  "Blank",
],
"Training" : "training 2",
"Frequency" : "1"
}
];


$(document).ready(function(){

  $.fn.dataTable.ext.search.push( //creating my own filter function for the table
        function(settings, searchData, index, rowData) { 
          $('#teamChoice').change(function(){
            var selectedVal = $(this).val();
            console.log(selectedVal);
          })
						var searchTeam = searchData[0];
            // Get Datatables API
            var api = $.fn.dataTable.Api('#myTable'); 
            if(selectedVal === searchTeam){
            return true;
            } else {
              return false;
           }
          
          return true;
        }
    );
var collapsedGroups = {};
var top = '';
var parent = '';

    var table = $("#table").DataTable({
    data: teamData,
        responsive: true,
        paging: false,
        "pageLength" : 500,
        "columns": [{
                "data": "Team",
                visible: false
            },
            {
                "data": "Training",
                orderable: false,
                "width" : "35%"
            },
            {
                "data": "Frequency",
                orderable: false,
                "width" : "15%"
            }
        ],
        columnDefs: [{
                "targets": "_all",
                "render": function(data, type, full, meta) {
                  var title = '';
                  if(full.Notes != null && full.Notes != undefined){
                    title = 'Notes: ' + full.Notes + '"';
                  }
                  return type === 'display' ? '<div title="' + title + '">' + data:data;
                }
            }
        ],
        dom: 'rt',
        order: [0, 'asc'],
        rowGroup: {
            dataSrc: 'Team',
            startRender: function(rows,...