Applying datatables in jquery ui dialog

Question

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?

the dialog html:

<div id="customerDialog">
  <input type="button" id="selectCustomer" name="selectCustomer" value="Select" /> 
  <table id="custTable">
     <thead>
      <tr>
        <th>Id</th>
        <th>First Name</th>
        <th>Last Name</th>
        <th>Email</th>
        <th>Mobile</th>
      </tr>
    </thead>
    <tbody>

      <tr>
        <td><input type="radio" id="custId" name="custId" value="0" /></td>
        <td>x</td>
        <td>ye</td>
        <td>[email protected]</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="1" /></td>
        <td>x</td>
        <td>ye</td>
        <td>[email protected]</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="2" /></td>
        <td>x</td>
        <td>ye</td>
        <td>[email protected]</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="3" /></td> 
        <td>x</td>
        <td>ye</td>
        <td>[email protected]</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="4" /></td>
        <td>x</td>
        <td>ye</td>
        <td>[email protected]</td>
        <td>000000000</td>
      </tr>

    </tbody>
  </table>
</div>

and my jquery 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
        });
    });
});

Solution

The OP's code is correct and in fact it works.

Solution:

http://jsfiddle.net/nicolapeluchetti/CuvkR/

$('#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
    });
});