数据表 - 显示/隐藏表格 - 标题闪烁

Question

我有一个包含多个表格的页面，它们都位于带有class="hide" 的 div 层后面。通过顶部的菜单，我更改了可见的表格。

<script>
            $(document).ready(function () {
                var data = {{ erstellte_tickets|raw }};

                var table = $('#ticketdata-erstelltetickets').DataTable({
                    data: data,
                    responsive: 'true',
                    columns: [
                        {
                            data: null,
                            sortable: false,
                            render: function (data, type, full, meta) {                                                            // /'+full.id+'/' + full.creator + '
                                return '<a class="btn btn-primary btn-sm btn-rounded pt-2 pb-2" href="{{ app.request.getBaseURL() }}/ticketdetail/' + full.id + '/"><i class="mdi mdi-open-in-new m-2"></i></a>'
                            },
                            width: '32px'
                        },
                        { data: "ticketid" },
                        { data: "title" },
                        {
                            data: "type",
                            name: "type",
                            className: "type",
                            render: {
                                display: function (data, type, full) {
                                    if (data == "error") {
                                        return '<span class="mdi mdi-close-octagon mdi-24px" style="color:red"></span>';
                                    } else if (data == "request") {
                                        return '<span class="mdi mdi-file-check mdi-24px" style="color:rgb(255, 180, 80)"></span>';
                                    } else {
                                        return '<span class="mdi mdi-lightbulb-on mdi-24px" style="color:#6e6ed0"></span>';
                                    }
                                }
                            },
                            width: '55px'
                        },
                        /* {
                            data: "creator",
                            name: "creator",
                        }, */
                        {
                            data: "assigned_to",
                            name: "assigned_to",
                            className: "assigned_to",
                        },
                        { 
                            data: "priority",
                            name: "priority",
                            className: "priority",
                            render: {
                                display: function (data, type, full) {
                                    if (data == "hoch") {
                                        return '<span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:red"></span>';
                                    } else if(data == "mittel") {
                                        return '<span class="mdi mdi-comment-alert mdi-24px" style="color:orange"></span><span class="mdi mdi-comment-alert mdi-24px" style="color:orange"></span>';
                                    } else {
                                        return '<span class="mdi mdi-comment-alert mdi-24px" style="color:green"></span>';
                                    }
                                }
                            },
                            width: '80px'
                        },
                        { 
                            data: "department",
                            name: "department",
                            className: "department"
                        },
                        {
                            data: "created_on",
                            render: function (d) {
                                //var date = moment(d).format("YYYY.MM.DD");
                                var time = moment(d);

                                var eventdate = moment(d);
                                var todaydate = moment();

                                var eventtime = moment(time);
                                var todaytime = moment();

                                if(todaydate.diff(eventdate, 'days') == "0"){

                                    if(todaytime.diff(eventtime, 'hours') == "0") {

                                        return todaytime.diff(eventtime, 'minutes') + " Min";

                                    } else {

                                        const min = todaytime.diff(eventtime, 'minutes') - (todaytime.diff(eventtime, 'hours') * 60);
                                        return todaytime.diff(eventtime, 'hours') + " Std " + min + " Min";
                                    }

                                } else if (todaydate.diff(eventdate, 'days') == "1") {

                                    return todaydate.diff(eventdate, 'days') + " Tag";     

                                } else {

                                    return todaydate.diff(eventdate, 'days') + " Tage";
                                }

                            },
                            width: '100px',
                        },
                        {
                            data: "status",
                            name: "status",
                            width: '95px',
                        },
                        { 
                            data: "fortschritt",
                            name: "fortschritt",
                            width: '90px', 
                        } 
                    ],
                    order: [[1, "asc"]],
                    language: {
                        "url": "/js/German.json"
                    },
                    "processing": true,
                    autoWidth: false,

                    orderCellsTop: true,
                    fixedHeader: true
                });

每次我在表格标题上方显示此表格时都会闪烁（并且经常停留在闪烁的位置）

闪烁：https://imgur.com/gFNDijt

这是我如何更改要隐藏的表的 jquery 代码：

$('#pills-erstelltetickets-tab').click(function() {

        $('.table-erstellteticktets').removeClass('hide');
        $('.table-bereichstickets').addClass('hide');
        $('.table-nichtzugewiesenetickets').addClass('hide');
        $('.table-alletickets').addClass('hide');
        $('.table-ideensammlung').addClass('hide');

    });

我该如何解决这个问题？

Answer 1

我发现了问题... omg...那是一段漫长的旅程.. ^^

在我使不同表可见的 jquery 内部.. 还应该有一个 table.columns.adjust()

这样：

$('#pills-erstelltetickets-tab').click(function() {
        var table = $('#ticketdata-erstelltetickets').DataTable();



        $('.table-erstellteticktets').removeClass('hide');
        $('.table-bereichstickets').addClass('hide');
        $('.table-nichtzugewiesenetickets').addClass('hide');
        $('.table-alletickets').addClass('hide');
        $('.table-ideensammlung').addClass('hide');

        table.columns.adjust();
    });