title: How do I add a dropdown button on each row of a jquery datatable
body: <p>I am using <a href="http://datatables.net/" rel="nofollow">datatables</a> plugin to display data as a table in my application.</p>
  
  <p>I want to add the <a href="http://getbootstrap.com/components/#btn-dropdowns" rel="nofollow">Bootstrap Dropdown Buttons</a> or <a href="http://getbootstrap.com/javascript/#dropdowns" rel="nofollow">Javascript Dropdowns</a> on each row of my table. But the dropdown part goes hidden under the table rows, and I am not able to fix it. </p>
  
  <p>The html for the table would be:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;table id="swcmtable" cellspacing="0" width="100%"
         class="table table-striped table-hover dt-responsive" &gt;
    &lt;thead&gt;
      &lt;tr&gt;
        &lt;th&gt; ID&lt;/th&gt;  
        &lt;th&gt;Modifier&lt;/th&gt;  
        &lt;th&gt; Created Time&lt;/th&gt; 
        &lt;th&gt; Modified Time&lt;/th&gt; 
        &lt;th&gt; Edit&lt;/th&gt; 
        &lt;th&gt; Actions&lt;/th&gt;  
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;100&lt;/td&gt;
        &lt;td&gt;Admin&lt;/td&gt;
        &lt;td&gt;10/06/2014&lt;/td&gt;
        &lt;td&gt;11/02/2015&lt;/td&gt;
        &lt;td&gt;
          &lt;button type="button" class="btn btn-primary btn-sm"&gt;
            Edit
          &lt;/button&gt;
        &lt;/td&gt;
  
        &lt;td&gt;
          &lt;div class="dropdown"&gt;
            &lt;button id="dLabel" type="button" data-toggle="dropdown" 
                    aria-haspopup="true" aria-expanded="false"&gt;
              Dropdown trigger
              &lt;span class="caret"&gt;&lt;/span&gt;
            &lt;/button&gt;
            &lt;ul class="dropdown-menu" role="menu" aria-labelledby="dLabel"&gt;
              &lt;li&gt;&lt;a href="#"&gt;Action&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another action&lt;/a&gt;&lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/td&gt;
  
      &lt;/tr&gt;
  
    &lt;/tbody&gt;                        
  &lt;/table&gt;
  </code></pre>
  
  <p>I initialize the datatable as follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>$('#swcmtable').DataTable({
    "iDisplayLength" : 50,
    "aaSorting": []
  });
  </code></pre>
  
  <p>Is there any way to fix this?</p>