title: How to append a select dropdown to a HTML DataTable?
body: <p>I have created a website mainly using HTML, CSS, PHP and MYSQL and I added a select dropdown with roles for to users to choose from. I need it to be on every row of users in the table. I have successfully gotten tabledit working on the site, but I am not sure how to append this dropdown to the Roles column.</p>
  <p>This is how the HTML is set up</p>
  <pre><code>&lt;body&gt;
      &lt;div class=&quot;panel panel-default&quot;&gt;
          &lt;!--        &lt;div class=&quot;panel-heading&quot;&gt;Sample Data&lt;/div&gt;--&gt;
          &lt;div class=&quot;panel-body&quot;&gt;
              &lt;div class=&quot;table-responsive&quot;&gt;
                  &lt;table id=&quot;sample_data&quot; class=&quot;table table-bordered table-striped&quot;&gt;
                      &lt;thead&gt;
                      &lt;tr&gt;
                          &lt;th&gt;ID&lt;/th&gt;
                          &lt;th&gt;First Name&lt;/th&gt;
                          &lt;th&gt;Last Name&lt;/th&gt;
                          &lt;th&gt;Email&lt;/th&gt;
                          &lt;th&gt;Approval&lt;/th&gt;
                          &lt;th&gt;Roles&lt;/th&gt;
                      &lt;/tr&gt;
                      &lt;/thead&gt;
                      &lt;tbody&gt;
                      &lt;/tbody&gt;
                  &lt;/table&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;!--SELECT DROPDOWN LIST--&gt;
  &lt;select id=&quot;test&quot;&gt;
      &lt;?php
      for ($a = 1; $a &lt;= $count ; $a++){
          ?&gt;
  
          &lt;option value=&quot;1&quot;&gt;&lt;?php echo($roles[($a-1)]);?&gt;&lt;/option&gt;
  
          &lt;?php
      }
      ?&gt;
  &lt;/select&gt;
  &lt;!--//////////////--&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
      $(document).ready(function(){
  
          var dataTable = $('#sample_data').DataTable({
              &quot;processing&quot; : true,
              &quot;serverSide&quot; : true,
              &quot;order&quot; : [],
              &quot;ajax&quot; : {
                  url:&quot;FetchUserTable.php&quot;,
                  type:&quot;POST&quot;
              }
          });
  
          $('#sample_data').on('draw.dt', function(){
              $('#sample_data').Tabledit({
                  url:'ActionUserTable.php',
                  dataType:'json',
                  columns:{
                      identifier : [0, 'user_id'],
                      editable:[
                          [1, 'first_name'],
                          [2, 'last_name'],
                          [3, 'email'],
                          [4, 'admin_approved', '{&quot;1&quot;:&quot;Approved&quot;,&quot;2&quot;:&quot;Disapproved&quot;}']
                          // [5, 'role_id']
                      ]
                  },
                  restoreButton:false,
                  onSuccess:function(data, textStatus, jqXHR)
                  {
                      if(data.action == 'delete')
                      {
                          $('#' + data.id).remove();
                          $('#sample_data').DataTable().ajax.reload();
                      }
                  }
              });
          });
  
      });
  </code></pre>