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 に答える