0

jQuery ui と一緒にDataTables Bootstrapを使用しようとしています。テーブルセル内には、データベースに送信するさまざまな入力フィールドを編集するためのダイアログモーダルボックスを開くハイパーリンクがあります。テーブルの読み込みでは、このアクションは適切に実行されますが、テーブルのソートまたはページネーション機能を使用すると、これが壊れて、生の Html 出力が得られます。テーブルは次のように初期化されています 

/* Table initialisation */
$(document).ready(function() {
    $('#example').dataTable( {
        "sDom": "<'row'<'span8'l><'span12'f>r>t<'row'<'span6'i><'span6'p>>",
        "sPaginationType": "bootstrap",
        "oLanguage": {
            "sLengthMenu": "_MENU_ records per page"
        },

        "oTableTools": {
            "aButtons": [
                "copy",
                "print",
                {
                    "sExtends":    "collection",
                    "sButtonText": 'Save <span class="caret" />',
                    "aButtons":    [ "csv", "xls", "pdf" ]
                }
            ]
        }
    } );
} );

別のjsファイルよりもjquery uiイベントをキャッチしようとしています

$(document).ready(function() {
    var dialog = $('#tabs').tabs(
                    {

                        select: function(ev, ui) {

                            //Setup Buttons to each Tab
                            switch(ui.index) {
                            case 0:
                                $('.ui-dialog-buttonpane').find("button").show().filter(":contains('Email senden')").hide(); 
                            break;

                            case 1:
                                $('.ui-dialog-buttonpane').find("button").show().filter(":contains('Speichern')").hide(); 
                            break;

                            case 2:
                                $('.ui-dialog-buttonpane').find("button").hide(); 
                            break;

                        }

                      }        
                }).dialog({ //codes});
});
4

1 に答える 1

0

私はいくつかのことを変更します：

  1. jQuery UI ダイアログ ウィンドウの代わりに、Bootstrap の組み込みモーダルウィンドウを使用することを検討してください。Bootstrap と jQuery UI がうまく連携しない状況がいくつか見つかりました。jQuery UI の依存関係を取り除くことができれば、なおさらです。

  2. 列定義の関数でDataTable のmDataプロパティを使用して、モーダル ウィンドウをトリガーするリンク/ボタンを動的に作成します。このようにして、データが並べ替え/フィルター処理されても、ウィンドウを起動するトリガーが壊れることはありません。

簡単な例:

$(document).ready( function() {
  var oTable = $('#example').dataTable( {
    "aoColumnDefs": [ {
      "aTargets": [ 0 ],
      "mData": function ( source, type, val ) {
        return "<button data-id='" + source.my-id + "' class='edit-button btn'>Edit</button>";
      }
    } ]
  } );

  $(document).on('click', '.edit-button', function(e) {
    e.preventDefault();
    var id = $(e.target).data('id');
    $("#MyModal").modal();
  });
} );
于 2012-12-19T23:27:53.877 に答える