javascript - 每次绘制数据表都会扩展

问题描述

每次绘制/渲染时，我的 DataTable 都会不断扩展。

它发生在我所有的服务器端处理数据表中。

数据表初始化

$('#t_contatos').DataTable({
            scrollY: '80vh',
            scrollCollapse: true,
            "processing": true,
            "serverSide": true,
            ajax: 'json/t_contatos',
            info: true,
            "order": [],
            "pageLength": 25,
            "lengthMenu": [10, 25, 50],
            dom: 'Brtilp',
            buttons: ["filter", "refresh", "columns"],
            "columns": [
                {
                    "data": "ACAO",
                    "render": function (data, type, row) {
                        return formatarCampo(data, type, row, 0);
                    },
                    "className": "dt-body-center t_d",
                    "orderable": false
                },
                {
                    "data": "TELEFONE",
                    "render": function (data, type, row) {
                        return formatarCampo(data, type, row, 2);
                    }, "className": "dt-body-center telefone",
                    "orderable": false
                },
                {
                    "data": "GRUPOS",
                    "render": function (data, type, row) {
                        return formatarCampo(data, type, row, 3);
                    }, "className": "dt-body-left grupos",
                    "orderable": false
                },
                {
                    "data": "NOME",
                    "render": function (data, type, row) {
                        return formatarCampo(data, type, row, 4);
                    }, "className": "dt-body-left nome",
                    "orderable": false
                },
                {
                    "data": "SITUACAO",
                    "render": function (data, type, row) {
                        return formatarCampo(data, type, row, 5);
                    }, "className": "dt-body-center status",
                    "orderable": false
                }
            ],
            "fnInitComplete": function (oSettings, json) {
                //Padronizando CSS dos botões
                $('.dt-button').each(function () {
                    $(this).removeClass('dt-button');
                });

                //Adicionando Botões Bloquear e Liberar
                $('#t_contatos_wrapper .dt-buttons').after('<button type="button" class="btn btn-default blue mt-ladda-btn ladda-button btn_dt btn_novo" onclick="abreModal(false)" data-style="expand-left" data-spinner-color="#333"><i class="fas fa-save"></i> Novo</button>');
                $('#t_contatos_wrapper .dt-buttons').after('<button type="button" class="btn btn-default green-meadow mt-ladda-btn ladda-button btn_dt btn_editar" onclick="abreModal(true)" data-style="expand-left" data-spinner-color="#333"><i class="fas fa-edit"></i> Editar</button>');
                $('#t_contatos_wrapper .dt-buttons').after('<div class="btn-group pull-right">' +
                    '<button class="btn blue  btn-outline dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Ações<i class="fa fa-angle-down"></i></button>' +
                    '<ul class="dropdown-menu pull-right">' +
                    '<li><a href="javascript:;" onclick="func_geral(\'ativar_options\')"><i class="fa fa-check"></i> Ativar </a></li>' +
                    '<li><a href="javascript:;" onclick="func_geral(\'desativar_options\')"><i class="fa fa-ban"></i> Desativar </a></li>' +
                    '<li><a href="javascript:;" onclick="func_geral(\'deletar_options\')"><i class="fa fa-close"></i> Deletar</a></li>' +
                    '</ul>' +
                    '</div>');

                $('.btn_filter').click();
            }
        });

表格的 HTML

<table class="table table-striped table-bordered table-hover" style="width:100%" id="t_contatos">
 <thead style="text-align-last: center">
  <tr>
   <th class="th-inner" style="vertical-align: middle">                     
    <input type="checkbox" name="check_all">
   </th>
   <th class="th-inner" width="15%" style="vertical-align: middle">Telefone</th>
   <th class="th-inner" width="30%" style="vertical-align: middle">Grupos</th>
   <th class="th-inner" width="30%" style="vertical-align: middle">Nome </th>
   <th class="th-inner" width="10%" style="vertical-align: middle">Situação </th>
   </tr>
 </thead>
 <tbody>
 </tbody>
</table>

它只发生在我的服务器端处理的数据表中，我试图以 px 定义宽度，但它在几次绘制后简单地破坏了表格

标签： javascriptdatatables

javascript - 每次绘制数据表都会扩展

问题描述

解决方案

推荐阅读