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

我会改变一些事情：

考虑使用Bootstrap's built in modal窗口而不是jQuery UI对话框窗口。我发现了一些Bootstrap和jQuery UI无法很好地协同工作的情况。如果你可以删除jQuery UI依赖项，那就更好了。
将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();
  });
} );

DataTables Bootstrap和jquery ui对话框

1 个答案: