2

Datatables の行をクリックしてモーダル フォームを呼び出し、「CRUD」関数を作成したいと考えています。

コードの各ステップを何時間もトラバースしてきましたが、JQ-UI と Datatables の間で競合が発生しているようです。「ライブ」関数の Datatables の例など、いくつかの例を見つけました。ここでは、テーブルを初期化し、単純な jquery 関数を呼び出すことができます。

私は使用しています：

  • code.jquery.com/jquery-1.9.1.js
  • code.jquery.com/ui/1.10.2/jquery-ui.js
  • ../DataTables-1.9.4/media/js/jquery.dataTables.js

この例では、カーソルを表示し、テーブルをページ上で「ジャンプ」させます。誰かが私が実験できる実際の例やフィドルを持っていますか?

function openDialog() {
    $("#dialog-modal").dialog({
        height: 140,
        modal: true
    });
}

/* Init DataTables */
$('#example').dataTable();

/* Add events */
$('#example tbody tr').on('click', function () {

    $('#example tbody tr').css('cursor', 'pointer');
    var sTitle;
    var nTds = $('td', this);
    var sBrowser = $(nTds[1]).text();
    var sGrade = $(nTds[4]).text();
    /*
    if (sGrade == "A")
        sTitle = sBrowser + ' will provide a first class (A) level of CSS support.';
    else if (sGrade == "C")
        sTitle = sBrowser + ' will provide a core (C) level of CSS support.';
    else if (sGrade == "X")
        sTitle = sBrowser + ' does not provide CSS support or has a broken implementation. Block CSS.';
    else
        sTitle = sBrowser + ' will provide an undefined level of CSS support.';
     */
    openDialog();

    //alert( sTitle )
});
4

1 に答える 1

6

少し寝て、これをもう一度突き刺すと、少なくともDatatable Dialogの問題を解決するソリューションが得られました。私が抱えていた他の問題は、私が含めた他のアドインにあると想定する必要があります。だから私にはこれは解決されました。

この投稿での答えは 99%でした。素晴らしい実例を提供してくれた著者に感謝します。

リンク ソリューションを変更し、変数を使用した Datatables の「ライブ」ソリューションの例と組み合わせて、前のリンクで説明されているように、ページネーションで動作する作業ダイアログにデータを正常に渡すことができました。

このセットアップにより、JQuery-UI モーダル フォームを作成し、mySQL テーブル列から ID を渡し、必要なサーバー サイド PHP CRUD 関数を処理するフォームを実行できるようになります。

(これが機能することを確認するために費やされた時間を除いて、私はこれのどの部分についても信用することはできません)。

実際の例は、Datatables の「ライブ イベント」の例からそのまま引用されています。

  $('#example').dataTable( {
                "bProcessing": true,
                "bServerSide": true,
                "bJQueryUI": true,
                "bStateSave": true,
                "sPaginationType": "full_numbers",
                "sAjaxSource": " /*your data source page here*/ "           
            } );

             /* Add events */
            $("body").on("click", "#example tbody tr", function (e) {
                 e.preventDefault();                    

                var nTds = $('td', this);
                //example to show any cell data can be gathered, I used to get my ID from the first coumn in my final code
                var sBrowser = $(nTds[1]).text();
                var sGrade = $(nTds[4]).text();
                var dialogText="The info cell I need was in (col2) as:"+sBrowser+" and in (col5) as:"+sGrade+"" ;
                var targetUrl = $(this).attr("href");

                $('#table-dialog').dialog({
                  buttons: {
                    "Delete": function() {
                        window.location.href = targetUrl;
                    },
                    "Cancel": function() {
                      $(this).dialog("close");
                    }
                  }
                });                 
                //simple dialog example here
                $('#table-dialog').text(dialogText ).dialog("open");                
            });
于 2013-07-06T15:53:32.787 に答える