Jquery 数据表头移位

嗨，我有一个关于datatables（jquery）的问题，我自己无法解决。有人能帮我或给我一个提示吗

问题是，我的数据表的标题被移动了，并且没有像下图所示的那样格式化

!！[在此处输入图像描述][1]

但当我点击一个条目进行排序时，它会改变格式，一切正常

!！[在此处输入图像描述][2]

我已经使用jQueryUI选项卡将datatable包含在jQueryUI对话框中。我的代码看起来像这样

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

$（函数（）{
$（“#rt”）.treeview（）；
$（“按钮”）。按钮（{
图标：{primary:“ui图标人”}}。单击（函数（）{
var id=this.id；window.location=“rightsmanagement？nutzerrechte_vergeben&show=3&refine=”；
});
}); 
$.fn.tabbedDialog=函数（）{
这个.tabs（）；
var wWidth=$（window.width（）；
var dWidth=wWidth*0.8；
变量对话框选项={
模态：true，宽度：dWidth，最小高度：520}；
此对话框（dialogOptions）；
this.find（“.ui选项卡对话框关闭”）.append（$（'a.ui-dialog-titlebar-close'）；
this.find（“.ui选项卡对话框关闭”）.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.sides（'.ui对话框标题栏'）.remove（）；
tabul.addClass（'ui-dialog-titlebar'）；
}
$（文档）.ready（函数（）{
$（'#controllerTab'）.tabbedDialog（）；
});
$（文档）.ready（函数（）{
$（'#singleusertable'）。数据表({
“sScrollY”：“280px”，
“bPaginate”：错误，
“bAutoWidth”：假，
“oLanguage”：{“sUrl”：“style/table/sprache.txt”}，
“aoColumnDefs”：[
{“bVisible”：false，“aTargets”：[0]}，
{“sTitle”：“Benutzername”，“aTargets”：[1]}，
{“sTitle”：“Vorname”，“aTargets”：[2]}，
{“缝合”：“Nachname”，“aTargets”：[3]}，
{“缝合”：“Personalnummer”，“aTargets”：[4]}，
{“sTitle”：“Abteilung”，“aTargets”：[5]}，
{“bVisible”：false，“aTargets”：[6]}，
{“sWidth”：“25%”，“aTargets”：[1]}，
]，“aaSorting”：[[0，'说明']]
});
});

---

提前thx获取提示。

您必须在单击选项卡时添加触发器。在您的情况下，可能是这样的：

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

首先，将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']]
    });
});

var-oTable=null；
$（函数（）{
$（“#rt”）.treeview（）；
$（“按钮”）。按钮（{
图标：{primary:“ui图标人”}}。单击（函数（）{
var id=this.id；window.location=“rightsmanagement？nutzerrechte_vergeben&show=3&refine=”；
});
}); 
$.fn.tabbedDialog=函数（）{
这个.tabs（）；
var wWidth=$（window.width（）；
var dWidth=wWidth*0.8；
变量对话框选项={
模态：true，宽度：dWidth，最小高度：520}；
此对话框（dialogOptions）；
this.find（“.ui选项卡对话框关闭”）.append（$（'a.ui-dialog-titlebar-close'）；
this.find（“.ui选项卡对话框关闭”）.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.sides（'.ui对话框标题栏'）.remove（）；
tabul.addClass（'ui-dialog-titlebar'）；
}
$（文档）.ready（函数（）{
$（'#controllerTab'）.tabbedDialog（）；
$（“#控制器选项卡a[href=#选项卡-2]”。单击（函数（）
{
oTable.fnDraw（）；
});     
});
$（文档）.ready（函数（）{
oTable=$（'#singleusertable'）。数据表({
“sScrollY”：“280px”，
“bPaginate”：错误，
“bAutoWidth”：假，
“oLanguage”：{“sUrl”：“style/table/sprache.txt”}，
“aoColumnDefs”：[
{“bVisible”：false，“aTargets”：[0]}，
{“sTitle”：“Benutzername”，“aTargets”：[1]}，
{“sTitle”：“Vorname”，“aTargets”：[2]}，
{“缝合”：“Nachname”，“aTargets”：[3]}，
{“缝合”：“Personalnummer”，“aTargets”：[4]}，
{“sTitle”：“Abteilung”，“aTargets”：[5]}，
{“bVisible”：false，“aTargets”：[6]}，
{“sWidth”：“25%”，“aTargets”：[1]}，
]，“aaSorting”：[[0，'说明']]
});
});

你好，约翰尼·泰克斯，谢谢你的帮助。不幸的是，它不起作用。。知道为什么吗？我的数据表中没有ajax。它只呈现一个简单的html表…你的代码片段给了我所需的输入。我现在在click事件中使用oTable.fnDraw（）进行了尝试，结果成功了。谢谢你。有人能告诉我为什么在我点击一个标签时有必要重画它吗？我也更新了我的答案。事实上，问题是datatables试图计算列的宽度，如果它是隐藏的（在打开选项卡之前是隐藏的），则很难计算宽度，这就是为什么会发生这种情况。只有当表格在第一面隐藏时，才会发生这种情况。还可以考虑，在数据表中，页眉是一个与实体表不同的HTML表。