DataTables Bootstrap 和 jquery ui 对话框

Question

我正在尝试将DataTables Bootstrap 与 jQuery ui 一起使用。在我的表格单元格内部，我有打开对话框模式框的超链接，以编辑要发送到数据库的不同输入字段。在表加载时，此操作会正确触发，但如果使用表的排序或分页功能，则会中断，我会得到原始 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});
});

Answer 1

我会改变一些事情：

1. 考虑使用Bootstrap's built in modal 窗口而不是jQuery UI 对话窗口。我发现了一些 Bootstrap 和 jQuery UI 不能很好地协同工作的情况。如果你能移除 jQuery UI 依赖，那就更好了。

2. 将DataTable's mData property 与列定义中的函数一起使用，以动态创建触发模式窗口的链接/按钮。这样，当您的数据被排序/过滤时，它不会破坏启动窗口的触发器。

快速示例：

$(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();
  });
} );