Datatables header shifted

Question

안녕하세요, 나는 내 자신을 해결할 수없는 datatables (jquery)에 문제가 있습니다. 아무도 나를 도울 수 없거나 나에게 힌트를 줄 수 있니?

문제는 아래 그림에서 볼 수 있듯이 내 데이터 테이블의 헤더가 이동되고 잘 포맷되지 않는다는 것입니다.

! [여기 이미지 설명을 입력합니다] [1]

을하지만 난이 서식 변경됩니다를 정렬하려면 한 항목을 클릭하고 모든 것이 잘 작동합니다.

! [여기서 화상 정보를 입력] [2]

제가 JQuery와 UI 탭을 사용 JQuery와 UI 대화 상자에서 데이터 테이블을 포함 하였다. 내 코드는 다음과 같습니다. 팁 사전에

<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> 

들으 ..

Answer 1

당신은 당신이 탭을 클릭 클릭 할 때 트리거를 추가해야합니다. 모든

먼저 변수에 datatables를 추가합니다 : 귀하의 경우는이 같은 것

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']] 
    }); 
});