DataTables Bootstrap和jQuery UI對話框

我試圖用DataTables Bootstrap與jQuery ui一起使用。在我的表格單元格內部，我有超鏈接打開對話框模式框以編輯要發送到數據庫的不同輸入字段。在表格加載時，這些動作會正常觸發，但如果使用表格的排序或分頁功能，那麼這個動作就會中斷，並且我會得到原始的Html輸出。該表得到與初始化以下DataTables Bootstrap和jQuery UI對話框

/* 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}); 
});

來源

2012-12-19 fefe

我會改變一些東西：

考慮使用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(); 
    }); 
});

來源

2012-12-19 23:27:53

感謝您的反饋意見。我將開始重構我的代碼來嘗試一下你的建議。 – fefe

幾周後返回到這個問題我有以下問題。我可以得到source.id的值。這應該是每列的第一個單元格。如果我提醒洞穴來源，我會看到檢索到的數據 – fefe

DataTables Bootstrap和jQuery UI對話框

回答

相關問題