时间戳

首页 > 解决方案 > 我的 DataTable 的第一列与所有 DataTable 标题的宽度相同

ajax - 我的 DataTable 的第一列与所有 DataTable 标题的宽度相同

问题描述

我动态设置我的 DataTable 的标题

   for (i = 0; i < nvs; i++) {
        var id = i + 1;
        $("#headersgrid").append(
            '<th id="header' + id + '">header</th>'
        );
        parametros[i] = $("#vsdata" + id).text();
        $("#header" + id).text(parametros[i]);
    }

之后，我的 Ajax 请求得到了以下代码：

$("#spresultado-datatable").DataTable({
        responsive: true,
        destroy: true,
        "processing": true,
        "serverSide": false,
        "filter": true,
        "ordering": true,
        //"autoWidth": false,
        "language": {
            "processing": "Procesando...",
            "lengthMenu": "Mostrar _MENU_ registros por pagina",
            "zeroRecords": "No se encontraron resultados",
            "info": "Mostrando pagina _PAGE_ de _PAGES_",
            "infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
            "infoFiltered": "(filtrado de un total de _MAX_ registros)",
            "paginate": {
                "first": "Primero",
                "last": "Último",
                "next": "Siguiente",
                "previous": "Anterior"
            }
        },
        "ajax": {
            "url": "/Spconsumer/Ejecutar",
            "type": "POST",
            "data": DTO,
            "datatype": "json",
            "dataSrc": function (response) {
                
                var i = 0;
                var j = 0;

                for (j = 0; j < response.data.length; j++) {
                    columns = [];
                    $.each(response.data[j].parametro, function (key, value) {
                        var my_item = {};
                        var id = i + 1;
                        my_item.data = value;
                        my_item.name = parametros[i];
                        //my_item.autoWidth = true;
                        columns.push(value);
                        i++;
                    
                    });
                    data.push(columns);
                }
                
                return data;
            },
             "columnDefs": [
                 { "autoWidth": true , "targets": 0 }
            ]
        }
       
    });

我正确获取数据并将其传递给我的 Index.cshtml 以显示表格：

<div class="users-list-table" id="gridresultadosp">
                <div class="card">
                    <div class="card-header row">
                        <div class="col-12 col-sm-6 col-lg-8">
                            <h1 class="card-title">Spconsumer - Resultado Ejecucion SP</h1>
                        </div>
                    </div>
                    <div class="card-content">
                        <div class="card-body">
                            <!-- datatable start -->
                            <div class="table-responsive">
                                <table id="spresultado-datatable" class="table mb-0">
                                    <thead>
                                        <tr id="headersgrid">
                                            
                                        </tr>
                                    </thead>
                                    
                                </table>
                            </div>
                            <!-- datatable ends -->
                        </div>
                    </div>
                </div>
            </div>

我在我的 Html 中正确获取数据，但第一列有问题：

DataTable 数据移位

正如您在图像中看到的，数据加载正确，排序和过滤工作正常，但第一列的宽度跨越了数据表的整个标题的整个宽度。我尝试了一切，搜索互联网没有成功，请如果有人可以指导我如何解决它

标签： ajaxrazordatatableheaderwidth

解决方案

我设法解决了这个问题：我改变了：

for (i = 0; i < nvs; i++) {
        var id = i + 1;
        $("#headersgrid").append(
            '<th id="header' + id + '">header</th>'
        );
        parametros[i] = $("#vsdata" + id).text();
        $("#header" + id).text(parametros[i]);
    }

至

for (i = 0; i < nvs; i++) {
        var id = i + 1;
        parametros[i] = $("#vsdata" + id).text();
        $("#headersgrid").append(
            '<th>' + parametros[i]  + '</th>'
        );

    }

使用<th id="header' + id + '">header</th>是问题的根源

推荐阅读