CODEWITHSUNDEEP
jquery-uidatatables
Chappex
Chappex

Reputation: 169

Applying datatables in jquery ui dialog

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
        });
    });
});

Upvotes: 3

Views: 11801

Answers (2)

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76870

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

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

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
    });
});

Upvotes: 1

carbontax
carbontax

Reputation: 2184

I use the same technologies as you do with heavy use of javascript. In such cases as you are describing the usual problem is that the DOM element does not exist at the time you initialized the plugin (datatables in this case).

Are loading the contents of the dialog via an AJAX call? It doesn't appear so, but you may be simplifying the code for us.

If so, then you need to use a custom event like this inside your ready() function

    $(document).on('datatable_loaded', function() {
        $('#custTable').dataTable({
            bJQueryUI: true
        });
    });

And in your AJAX success callback do this

    $(document).trigger('datatable_loaded');

In this example 'datatable_loaded' is an arbitrary string that you throw and catch yourself. If you are not using AJAX to load the dialog contents then this approach will not help you because the error is elsewhere.

Upvotes: 0

Related Questions