2

こんにちは私はデータテーブル（jquery）に問題があります私は自分自身を解決することはできません。誰かが私を助けたり、私にヒントを与えることができますか？

問題は、下の写真にあるように、データテーブルのヘッダーがシフトしていて、適切にフォーマットされていないことです。

！[ここに画像の説明を入力してください] [1]

しかし、並べ替えるために1つのエントリをクリックすると、フォーマットが変更され、すべてが正常に機能します。

！[ここに画像の説明を入力してください] [2]

jqueryuiタブを使用して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>

ヒントについては事前にthx。

4

1 に答える 1

2

タブクリックをクリックしたときにトリガーを追加する必要があります。あなたの場合、それは次のようになります：

まず、データテーブルを変数に追加します。

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

});

2番目のタブをクリックした後、リロードします。このような：

$("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']]
    });
});
于 2012-11-11T15:59:23.710 に答える