Datatable Yadcf Select2 v1

Change class name on click in jQuery

by Paul Cap

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/yadcf/0.9.4/jquery.dataTables.yadcf.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>
<div>
  <span id="external_filter_container1">
  <!-- leave the wrapper contents empty -->
  </span>
</div>

<div>
  <span id="external_filter_container2">
  <!-- leave the wrapper contents empty -->
  </span>
</div>

<div>
<table class="mytable2 display table">
	<thead>
		<tr>
			<th>First name</th>
			<th>Last name</th>
			<th>Position</th>
			<th>Office</th>
			<th>Age</th>
			<th>Start date</th>
			<th>Salary</th>
			<th>Extn.</th>
			<th>E-mail</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Tiger</td>
			<td>Nixon</td>
			<td>System Architect</td>
			<td>Edinburgh</td>
			<td>61</td>
			<td>2011/04/25</td>
			<td>$320,800</td>
			<td>5421</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Garrett</td>
			<td>Winters</td>
			<td>Accountant</td>
			<td>Tokyo</td>
			<td>63</td>
			<td>2011/07/25</td>
			<td>$170,750</td>
			<td>8422</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Shad</td>
			<td>Decker</td>
			<td>Regional Director</td>
			<td>Edinburgh</td>
			<td>51</td>
			<td>2008/11/13</td>
			<td>$183,000</td>
			<td>6373</td>
			<td>[email protected]</td>
		</tr>
		<tr>
			<td>Michael</td>
			<td>Bruce</td>
			<td>Javascript...

CSS

body {
  background: #FFFFFF;
  
  padding: 20px;
  font-family: Helvetica;
}

JavaScript

var oTable;
jQuery( document ).ready( function($) {
  'use strict';

 // start datatable
oTable = $('.mytable2').DataTable( {
	pageLength: 10,
  scroller: false,
	searching: true
 });
// end datatable

// start yadcf
yadcf.init(oTable, 
 [
  {
   column_number : 0,
   filter_container_id: 'external_filter_container1',
   filter_reset_button_text: false,
   select_type: 'select2',
   filter_default_label: 'First'
   
   },
  {
   column_number : 1, 
   filter_container_id: 'external_filter_container2',
   filter_reset_button_text: false,
   //select_type: 'select2',
   filter_default_label: 'Last'
   }
  ]
 );
// end yadcf

}); // end ready function