jquery datatable - 選択されたレコードの下にjquery UIモダルを配置します。

Question

私は以下の例に従っており、ユーザがjqueryデータテーブルの行をクリックするたびにjqueryuiモーダルを表示できます。

https://datatables.net/extensions/responsive/examples/display-types/jqueryui-modal.html

とにかくあり、私が選択した行の下にモーダルダイアログを配置することができますか？

期待：

マイコード：

私は下記のように位置を設定しようとしています。しかし、期待どおりに動作していません。選択したデータテーブルレコードの位置をjquery UIのモーダルダイアログにどのように渡し/割り当てる必要がありますか？

responsive: { 
      details: { 
       display: $.fn.dataTable.Responsive.display.modal({ 
        header: function() { 
         return 'View Record'; 
        }, 
        dialog: {       
         modal: true, 
         width: 800, 
         resizable: false, 
         position: { my: "left top", at: "left bottom", of: $(tableId) }, 
         create: function (event, ui) { 

         }, 
         open: function (event, ui) { 

         } 
        } 
       }), 

お勧め/お勧めします。

Answer 1

ドキュメントから少し不明ですが、rowがヘッダー機能に渡されているようです。私はあなたがダイアログのあなたの位置設定でこれを目標にしたいと思うでしょう。イベントオブジェクトにアクセスできるようには見えません。modalオブジェクトに渡すことができる変数にrowを渡すことができます。即ちrow()から結果 - 作用されている行に事前設定され、問題のテーブルのhttps://datatables.net/reference/option/responsive.details.display

のDataTableのAPIインスタンス：

$(document).ready(function() { 
    var myRow; 
    $('#example').DataTable({ 
     responsive: { 
      details: { 
       display: $.fn.dataTable.Responsive.display.modal({ 
        header: function (row) { 
         myRow = row; 
         console.log("My Row:", myRow); 
         return 'View Record'; 
        }, 
        modal: { 
         modal: true, 
         width: 800, 
         resizable: false, 
         position: { 
          my: "left top", 
          at: "left bottom", 
          of: $(myRow) 
         } 
        } 
       }) 
      } 
     } 
    }); 
}); 

もっと見ます。

myRowに渡されるオブジェクトまたはパラメータがわかったら、位置パラメータを調整する必要があります。