title: Applying datatables in jquery ui dialog
body: <p>I have a page where i use jqueryui dialog with datatables. When a button is clicked, the dialog opens and shows the table contents. Without datatables, the dialog performs as expected. But I couldn't get the expected result when datatables is applied to the table. So my question is, what is the best way to do this?</p>
  
  <p>the dialog html:</p>
  
  <pre><code>&lt;div id="customerDialog"&gt;
    &lt;input type="button" id="selectCustomer" name="selectCustomer" value="Select" /&gt; 
    &lt;table id="custTable"&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;Mobile&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="radio" id="custId" name="custId" value="0" /&gt;&lt;/td&gt;
          &lt;td&gt;x&lt;/td&gt;
          &lt;td&gt;ye&lt;/td&gt;
          &lt;td&gt;z@x.y&lt;/td&gt;
          &lt;td&gt;000000000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="radio" id="custId" name="custId" value="1" /&gt;&lt;/td&gt;
          &lt;td&gt;x&lt;/td&gt;
          &lt;td&gt;ye&lt;/td&gt;
          &lt;td&gt;z@x.y&lt;/td&gt;
          &lt;td&gt;000000000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="radio" id="custId" name="custId" value="2" /&gt;&lt;/td&gt;
          &lt;td&gt;x&lt;/td&gt;
          &lt;td&gt;ye&lt;/td&gt;
          &lt;td&gt;z@x.y&lt;/td&gt;
          &lt;td&gt;000000000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="radio" id="custId" name="custId" value="3" /&gt;&lt;/td&gt; 
          &lt;td&gt;x&lt;/td&gt;
          &lt;td&gt;ye&lt;/td&gt;
          &lt;td&gt;z@x.y&lt;/td&gt;
          &lt;td&gt;000000000&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
          &lt;td&gt;&lt;input type="radio" id="custId" name="custId" value="4" /&gt;&lt;/td&gt;
          &lt;td&gt;x&lt;/td&gt;
          &lt;td&gt;ye&lt;/td&gt;
          &lt;td&gt;z@x.y&lt;/td&gt;
          &lt;td&gt;000000000&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my jquery code:</p>
  
  <pre><code>$(document).ready(function() {
      $('#customerDialog').dialog({
          autoOpen: false,
          title: "Customers",
          show: "blind",
          hide: "explode",
          modal: true,
          width: 500
      });
  
      $('#custTable').dataTable({
          bJQueryUI: true
      });
  
      $('#selectCustomer').click(function() {
          var target = $(this);
          $('#customerDialog').dialog("open");
          $('#customerDialog').dialog("widget").position({
              my: 'left top',
              at: 'left bottom',
              of: target
          });
      });
  });
  </code></pre>