Question

我有一个页面，我使用带有数据表的jqueryui对话框。单击按钮时，对话框将打开并显示表格内容。如果没有数据表，对话框将按预期执行。但是当数据表应用于表时，我无法获得预期的结果。所以我的问题是，最好的方法是什么？

对话框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>z@x.y</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="1" /></td>
        <td>x</td>
        <td>ye</td>
        <td>z@x.y</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="2" /></td>
        <td>x</td>
        <td>ye</td>
        <td>z@x.y</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="3" /></td> 
        <td>x</td>
        <td>ye</td>
        <td>z@x.y</td>
        <td>000000000</td>
      </tr>
      <tr>
        <td><input type="radio" id="custId" name="custId" value="4" /></td>
        <td>x</td>
        <td>ye</td>
        <td>z@x.y</td>
        <td>000000000</td>
      </tr>

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

和我的jquery代码：

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

Answer 1

OP的代码是正确的，事实上它是有效的。

解决方案：

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

Answer 2

我使用与大量使用javascript相同的技术。在这种情况下，您正在描述通常的问题是在初始化插件时DOM元素不存在（在这种情况下是数据表）。

是通过AJAX调用加载对话框的内容吗？它似乎不是这样，但您可能正在为我们简化代码。

如果是这样，那么你需要在ready（）函数

中使用这样的自定义事件

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

在你的AJAX成功回调中做这个

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

在这个例子中，'datatable_loaded'是你抛出并抓住自己的任意字符串。如果您没有使用AJAX加载对话框内容，那么这种方法对您没有帮助，因为错误发生在其他地方。

在jquery ui对话框中应用数据表

2 个答案: