3

我有一个页面，我在其中使用带有数据表的 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
        });
    });
});
4

2 回答 2

1

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

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

解决方案：

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
    });
});
于 2012-07-08T17:28:59.403 回答
0

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

是否通过 AJAX 调用加载对话框的内容？看起来并非如此，但您可能正在为我们简化代码。

如果是这样，那么您需要在您的 ready() 函数中使用这样的自定义事件

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

在您的 AJAX 成功回调中执行此操作

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

在此示例中，“datatable_loaded”是您自己抛出并捕获的任意字符串。如果您没有使用 AJAX 加载对话框内容，那么这种方法对您没有帮助，因为错误在其他地方。

于 2012-07-09T12:54:32.730 回答