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

What do you mean by "the expected result"? Does the dialog not open? Or what? — carbontax
– carbontax, Commented Jul 8, 2012 at 11:21
yes, the dialog opens, but datatables is not applied and i see a plain html table — Chappex
– Chappex, Commented Jul 9, 2012 at 11:39

Binary Alchemist · Accepted Answer · 2013-12-18 19:58:51Z

1

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

edited Dec 18, 2013 at 19:58

Binary Alchemist

1,6201 gold badge14 silver badges29 bronze badges

answered Jul 8, 2012 at 17:28

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chappex Over a year ago

Yes you are right. It works in jsfiddle but it doesn't work in my app. Could it be some url / path mapping issue or something? I am using spring mvc with jsp and apache tiles.

carbontax · Accepted Answer · 2012-07-10 14:30:02Z

0

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.

edited Jul 10, 2012 at 14:30

answered Jul 9, 2012 at 12:54

carbontax

2,18424 silver badges38 bronze badges

2 Comments

Chappex Over a year ago

Thanks for the reply!! I am not using ajax to pull the data. When the page loads initially it comes with the data and the table is populated by then. Is there any other way to trigger the datatable_reloaded event??

carbontax Over a year ago

I edited my answer to make it clearer. There is no 'datatable_loaded' event in the datatable plugin. It is custom. It looks like your problem is elsewhere. Are you using Firebug to see if there are javascript errors?

Collectives™ on Stack Overflow

Applying datatables in jquery ui dialog

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related