Datatables頭轉移

Question

嗨，我有一個數據表（jQuery）的問題，我無法解決我自己的問題。任何人都可以幫助我或給我一個提示嗎？

問題是我的數據表的頭部被移位，而且格式不正確，如下圖所示。

！[在這裏輸入的形象描述] [1]

，但是當我點擊爲了一個條目對它進行排序它改變了格式化，一切工作正常。

！[在這裏輸入的形象描述] [2]

我已經包括使用jQuery UI選項卡的jQuery用戶界面對話框中的數據表。我的代碼看起來像這樣。

<script> 
$(function() { 
    $("#rt").treeview(); 
    $("button").button({ 
     icons: {primary: "ui-icon-person"}}).click(function() { 
      var id = this.id;window.location="rightsmanagement?nutzerrechte_vergeben&show=3&refine="; 
      }); 
    }); 
    $.fn.tabbedDialog = function() { 
     this.tabs(); 
     var wWidth = $(window).width(); 
     var dWidth = wWidth * 0.8; 
     var dialogOptions = { 
     modal: true,width: dWidth,minHeight: 520}; 
     this.dialog(dialogOptions); 
     this.find('.ui-tab-dialog-close').append($('a.ui-dialog-titlebar-close')); 
     this.find('.ui-tab-dialog-close').css({'position':'absolute','right':'0', 'top':'13px'}); 
     this.find('.ui-tab-dialog-close > a').css({'float':'none','padding':'0'}); 
     var tabul = this.find('ul:first'); 
     this.parent().addClass('ui-tabs').prepend(tabul).draggable('option','handle',tabul); 
     this.siblings('.ui-dialog-titlebar').remove(); 
     tabul.addClass('ui-dialog-titlebar'); 
    } 

$(document).ready(function() { 
    $('#controllerTab').tabbedDialog(); 
    }); 

$(document).ready(function() { 
    $('#singleusertable').dataTable({ 
     "sScrollY": "280px", 
     "bPaginate": false, 
     "bAutoWidth": false, 
     "oLanguage": {"sUrl": "style/table/sprache.txt"}, 
     "aoColumnDefs": [ 
      { "bVisible": false, "aTargets": [ 0 ] }, 
      { "sTitle": "Benutzername", "aTargets": [ 1 ] }, 
      { "sTitle": "Vorname", "aTargets": [ 2 ] }, 
      { "sTitle": "Nachname", "aTargets": [ 3 ] }, 
      { "sTitle": "Personalnummer", "aTargets": [ 4 ] }, 
      { "sTitle": "Abteilung", "aTargets": [ 5 ] }, 
      { "bVisible": false, "aTargets": [ 6 ] }, 
      { "sWidth": "25%", "aTargets": [ 1] }, 
      ],"aaSorting": [[0, 'desc']] 
    }); 
}); 



</script> 

THX的提前提示..

Answer 1

你必須添加一個觸發器，當你點擊選項卡中單擊。在你的情況下，它會是這樣的：

首先添加數據表變量：

var oTable = $('#singleusertable').dataTable({ 
    .. 

}); 

，然後只需重新加載你的第二個選項卡被點擊之後。就像這樣：

$("a[href=#tabs-2]").click(function() 
{ 
    oTable.fnReloadAjax(); 
}); 

你最終腳本會是這樣的：

<script> 
var oTable = null; 
$(function() { 
    $("#rt").treeview(); 
    $("button").button({ 
     icons: {primary: "ui-icon-person"}}).click(function() { 
      var id = this.id;window.location="rightsmanagement?nutzerrechte_vergeben&show=3&refine="; 
      }); 
    }); 
    $.fn.tabbedDialog = function() { 
     this.tabs(); 
     var wWidth = $(window).width(); 
     var dWidth = wWidth * 0.8; 
     var dialogOptions = { 
     modal: true,width: dWidth,minHeight: 520}; 
     this.dialog(dialogOptions); 
     this.find('.ui-tab-dialog-close').append($('a.ui-dialog-titlebar-close')); 
     this.find('.ui-tab-dialog-close').css({'position':'absolute','right':'0', 'top':'13px'}); 
     this.find('.ui-tab-dialog-close > a').css({'float':'none','padding':'0'}); 
     var tabul = this.find('ul:first'); 
     this.parent().addClass('ui-tabs').prepend(tabul).draggable('option','handle',tabul); 
     this.siblings('.ui-dialog-titlebar').remove(); 
     tabul.addClass('ui-dialog-titlebar'); 
    } 

$(document).ready(function() { 
    $('#controllerTab').tabbedDialog(); 

    $("#controllerTab a[href=#tabs-2]").click(function() 
    { 
     oTable.fnDraw(); 
    });  
}); 

$(document).ready(function() { 
    oTable = $('#singleusertable').dataTable({ 
     "sScrollY": "280px", 
     "bPaginate": false, 
     "bAutoWidth": false, 
     "oLanguage": {"sUrl": "style/table/sprache.txt"}, 
     "aoColumnDefs": [ 
      { "bVisible": false, "aTargets": [ 0 ] }, 
      { "sTitle": "Benutzername", "aTargets": [ 1 ] }, 
      { "sTitle": "Vorname", "aTargets": [ 2 ] }, 
      { "sTitle": "Nachname", "aTargets": [ 3 ] }, 
      { "sTitle": "Personalnummer", "aTargets": [ 4 ] }, 
      { "sTitle": "Abteilung", "aTargets": [ 5 ] }, 
      { "bVisible": false, "aTargets": [ 6 ] }, 
      { "sWidth": "25%", "aTargets": [ 1] }, 
      ],"aaSorting": [[0, 'desc']] 
    }); 
});