title: How can I use a select2 selectbox with dataTables?
body: <p>I want to use a select2 selectbox inside my bootstrap datatable. I need to use the <a href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js" rel="nofollow noreferrer">full select2 js</a> But it is not working and I am wondering why.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
      var table = $('#example').DataTable( {
          scrollY:        "300px",
          scrollX:        true,
          scrollCollapse: true,
          paging:         false,
          fixedColumns:   {
              leftColumns: 1,
              rightColumns: 1
          }
      } );
  } );
  
  $("#e1").select2();</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td, th{background-color:white;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;link href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet"/&gt;
  
  &lt;script src="https://code.jquery.com/jquery-1.12.4.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.datatables.net/fixedcolumns/3.2.2/js/dataTables.fixedColumns.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"&gt;&lt;/script&gt;
  
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.full.js"&gt;&lt;/script&gt;
  
  
  &lt;table id="example" class="stripe row-border order-column" width="100%" cellspacing="0"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;First name&lt;/th&gt;
                  &lt;th&gt;Last name&lt;/th&gt;
                  &lt;th&gt;Position&lt;/th&gt;
                  &lt;th&gt;Office&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
                  &lt;th&gt;Start date&lt;/th&gt;
                  &lt;th&gt;Salary&lt;/th&gt;
                  &lt;th&gt;Extn.&lt;/th&gt;
                  &lt;th&gt;E-mail&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;&lt;select  id="e1"&gt;
          &lt;option value="AL"&gt;Alabama&lt;/option&gt;
          &lt;option value="Am"&gt;Amalapuram&lt;/option&gt;
          &lt;option value="An"&gt;Anakapalli&lt;/option&gt;
          &lt;option value="Ak"&gt;Akkayapalem&lt;/option&gt;
          &lt;option value="WY"&gt;Wyoming&lt;/option&gt;
      &lt;/select&gt;&lt;/td&gt;
                  &lt;td&gt;Satou&lt;/td&gt;
                  &lt;td&gt;Accountant&lt;/td&gt;
                  &lt;td&gt;Tokyo&lt;/td&gt;
                  &lt;td&gt;33&lt;/td&gt;
                  &lt;td&gt;2008/11/28&lt;/td&gt;
                  &lt;td&gt;$162,700&lt;/td&gt;
                  &lt;td&gt;5407&lt;/td&gt;
                  &lt;td&gt;a.satou@datatables.net&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>