example - jquery datatable nowrap

jQuery datatable-el ancho del encabezado de la tabla no está alineado con el ancho del cuerpo

Question

Estoy usando datos de jQuery. Al ejecutar la aplicación, el ancho del encabezado no está alineado con el ancho del cuerpo. Pero cuando hago clic en el encabezado, se alinea con el ancho del cuerpo, pero incluso entonces hay un poco de desalineación leve. Este problema ocurre solo en IE.

JSFiddle

Así es como se ve cuando se carga la página:

Después de hacer clic en el encabezado:

Mi código de datos:

$("#rates").dataTable({
    "bPaginate": false,
    "sScrollY": "250px",
    "bAutoWidth": false,
    "bScrollCollapse": true,
    "bLengthChange": false,
    "bFilter": false,
    "sDom": ''<"top">rt<"bottom"flp><"clear">'',
    "aoColumns": [{
            "bSortable": false
        },
        null,
        null,
        null,
        null
    ]
});

rates es mi id de mesa
¿Podría alguien ayudarme con esto? Gracias por adelantado.

Answer 1

PORQUE

Lo más probable es que su tabla esté inicialmente oculta, lo que evita que jQuery DataTables calcule los anchos de columna.

SOLUCIÓN

• Si la tabla está en el elemento plegable, deberá ajustar los encabezados cuando el elemento plegable se haga visible.

  Por ejemplo, para el complemento Bootstrap Collapse:

  $(''#myCollapsible'').on(''shown.bs.collapse'', function () {
     $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
  });

• Si la tabla está en la pestaña, deberá ajustar los encabezados cuando la pestaña se haga visible.

  Por ejemplo, para el plugin Bootstrap Tab:

  $(''a[data-toggle="tab"]'').on(''shown.bs.tab'', function(e){
     $($.fn.dataTable.tables(true)).DataTable()
        .columns.adjust();
  });

El código anterior ajusta los anchos de columna para todas las tablas en la página. Consulte las columns().adjust() métodos de API para obtener más información.

EXTENSIONES RESPONSABLES, DESPLAZADORAS O COLORES FIJOS

Si está utilizando las extensiones Responsive, Scroller o FixedColumns, necesita usar métodos API adicionales para resolver este problema.

• Si está utilizando la extensión Responsive, debe llamar al método API responsive.recalc() además de a las columns().adjust() método API. Ver Extensión responsiva - Ejemplo de punto de interrupción incorrecto .

• Si está utilizando la extensión Scroller, debe llamar al método API scroller.measure() lugar de a las columns().adjust() . Ver extensión Scroller - Ancho de columna incorrecto o ejemplo de datos faltantes .

• Si está utilizando la extensión FixedColumns, debe llamar al método API de fixedColumns().relayout() además de a las columns().adjust() método API. Ver extensión FixedColumns - Ejemplo de ancho de columna incorrecto .

CAMPO DE GOLF

Consulte jQuery DataTables - Problemas de ancho de columna con las pestañas Bootstrap para encontrar soluciones a los problemas más comunes con las columnas en jQuery DataTables cuando la tabla está inicialmente oculta.

Answer 2

$ (''. DataTables_sort_wrapper''). Trigger ("click");

Answer 3

Al vincular la respuesta de Mike Ramsey, eventualmente descubrí que la tabla se estaba inicializando antes de que el DOM se hubiera cargado.

Para solucionar esto pongo la función de inicialización en la siguiente ubicación:

document.addEventListener(''DOMContentLoaded'', function() {
    InitTables();
}, false);

Answer 4

Algunos css simples en los encabezados deberían hacer esto por ti.

#rates_info, #rates_paginate
{
    float: left;
    width: 100%;
    text-align: center;
}

No puedo prometer que esto funcionará tal como está porque no he visto su html, pero inténtelo y si no lo hace, puede publicar su html y lo actualizaré.

Answer 5

Como dijo Gyrocode.com, "lo más probable es que su tabla esté inicialmente oculta, lo que evita que jQuery DataTables calcule los anchos de columna".

Yo también tuve este problema y lo resolví simplemente iniciando la tabla de datos después de mostrar el div

Por ejemplo

$(''#my_div'').show();
$(''#my_table'').DataTable();

Answer 6

Desafortunadamente, ninguna de esas soluciones funcionó para mí. Quizás, debido a la diferencia en la inicialización de nuestras tablas, tenemos diferentes resultados. Podría ser posible que una de esas soluciones funcione para alguien. De todos modos, quería compartir mi solución, en caso de que alguien todavía esté preocupado por este problema. Sin embargo, es un poco intrincado, pero funciona para mí, ya que no cambio el ancho de la tabla más adelante.

Después de cargar la página y hacer clic en el encabezado, para que se expanda y se muestre normalmente, inspecciono el encabezado de la tabla y registro el ancho de la div .dataTables_scrollHeadInner . En mi caso es 715px , por ejemplo. Luego agrega ese ancho a css:

.dataTables_scrollHeadInner
{
  width: 715px !important;
}

Answer 7

El problema es que se llama a la tabla de datos antes de que la tabla de datos se dibuje en DOM;

setTimeout(function(){ 
    var table = $(''#exampleSummary'').removeAttr(''width'').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         true,
        columnDefs: [
            { width: 200, targets: 0 }
        ],
        fixedColumns: false
    } );
}, 100);

Answer 8

Encontró la solución:

table-layout:fixed añadido table-layout:fixed a la tabla. Y abrió la aplicación en modo IE.

Answer 9

Estaba enfrentando el mismo problema. Agregué la propiedad scrollX: true para la tabla de datos y funcionó. No hay necesidad de cambiar el CSS por datatable

jQuery(''#myTable'').DataTable({
                            "fixedHeader":true,
                            "scrollY":"450px",
                            "scrollX":true,
                            "paging":   false,
                            "ordering": false,
                            "info":     false,
                            "searching": false,
                            "scrollCollapse": true
                            });

Answer 10

La respuesta al problema de Gyrocode.com fue totalmente correcta, pero su solución no funcionará en todos los casos. Un enfoque más general es agregar lo siguiente fuera de su función document.ready:

$(document).on( ''init.dt'', function ( e, settings ) {
    var api = new $.fn.dataTable.Api( settings );
    window.setTimeout(function () {
            api.table().columns.adjust().draw();
        },1);
} );

Answer 11

Lo arreglé, trabajo para mí.

var table = $(''#example'').DataTable();
$(''#container'').css( ''display'', ''block'' );
table.columns.adjust().draw();

O

var table = $(''#example'').DataTable();
table.columns.adjust().draw();

Referencia: https://datatables.net/reference/api/columns.adjust()

Answer 12

Mi solución fue agregar esto: ...

initComplete () {
      this.api (). columns (). header (). each ((el, i) => {
          $ (el) .attr (''style'', ''min-width: 160px;'')
      });
},

...

y se ve bien.

Answer 13

Ninguna de las soluciones anteriores funcionó para mí, así que publicaré mi solución: estaba cargando la tabla en un div oculto y luego mostré el div después de que se construyó la tabla. Cuando mostré / descolgué el div primero y luego construí la tabla mientras la tabla estaba visible, funcionó.

Por lo tanto, DataTables no puede ajustar el tamaño de las columnas en un div oculto, probablemente porque está obteniendo un ancho de columna de 0px en el backend cuando la tabla está oculta.

Answer 14

Ninguna de las soluciones anteriores funcionó para mí, pero finalmente encontré una solución que sí lo hizo.

Mi versión de este problema fue causada por un archivo CSS de terceros que estableció el ''tamaño de la caja'' en un valor diferente. Pude solucionar el problema sin afectar otros elementos con el siguiente código:

    $table.closest(".dataTables_wrapper").find("*").css("box-sizing","content-box").css("-moz-box-sizing","content-box");

¡Espero que esto ayude a alguien!

Answer 15

Resolví este problema envolviendo la tabla "dataTable" con un div con overflow:auto :

.dataTables_scroll
{
    overflow:auto;
}

y agregando este JS después de la inicialización de la dataTable :

jQuery(''.dataTable'').wrap(''<div class="dataTables_scroll" />'');

No use sScrollX o sScrollY , elimínelos y agregue un envoltorio div que haga lo mismo.

Answer 16

Sé que esto es viejo, pero acabo de encontrarme con el problema y no encontré una gran solución. Entonces, decidí usar algunos js para obtener la altura de scrollBody, en comparación con la altura de las tablas. Si el scrollBody es más pequeño que la tabla, aumente el ancho de las tablas en 15px para tener en cuenta la barra de desplazamiento. También configuré esto en el evento de cambio de tamaño, para que funcione cuando mi contenedor cambia de tamaño:

const tableHeight = $(''#'' + this.options.id).height();
const scrollBodyHeight = $(''#'' + this.options.id).closest(''.dataTables_scrollBody'').height();

if (tableHeight > scrollBodyHeight) {
    $(''#'' + this.options.id).closest(''.dataTables_scrollBody'').css({
        width: "calc(100% + 15px)",
    })
} else {
    $(''#'' + this.options.id).closest(''.dataTables_scrollBody'').css({
        width: "100%",
    })
}

Answer 17

Simplemente envuelva el elemento de etiqueta de tabla en un div con desbordamiento automático y posición relativa. Funcionará en cromo e IE8. He agregado la altura 400px para mantener el tamaño de la tabla fijo incluso después de recargar los datos.

table = $(''<table cellpadding="0" cellspacing="0" border="0" class="display" id="datat"></table>'').appendTo(''#candidati'').dataTable({
        //"sScrollY": "400px",//NO MORE REQUIRED - SEE wrap BELOW
        //"sScrollX": "100%",//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollCollapse": true,//NO MORE REQUIRED - SEE wrap BELOW
        //"bScrollAutoCss": true,//NO MORE REQUIRED - SEE wrap BELOW
        "sAjaxSource": "datass.php",
        "aoColumns": colf,
        "bJQueryUI": true,
        "sPaginationType": "two_button",
        "bProcessing": true,
        "bJQueryUI":true,
        "bPaginate": true,
        "table-layout": "fixed",
        "fnServerData": function(sSource, aoData, fnCallback, oSettings) {
            aoData.push({"name": "filters", "value": $.toJSON(getSearchFilters())});//inserisce i filtri
            oSettings.jqXHR = $.ajax({
                "dataType": ''JSON'',
                "type": "POST",
                "url": sSource,
                "data": aoData,
                "success": fnCallback
            });
        },
        "fnRowCallback": function(nRow, aData, iDisplayIndex) {
            $(nRow).click(function() {
                $(".row_selected").removeClass("row_selected");
                $(this).addClass("row_selected");
                //mostra il detaglio
                showDetail(aData.CandidateID);
            });
        },
        "fnDrawCallback": function(oSettings) {

        },
        "aaSorting": [[1, ''asc'']]
}).wrap("<div style=''position:relative;overflow:auto;height:400px;''/>"); //correzione per il disallineamento dello header

Answer 18

Tuve un problema similar Me gustaría crear tablas en paneles expandibles / plegables. Mientras las tablas fueran visibles, no hay problema. Pero si colapsó un panel, redimensionó el navegador y luego lo expandió, el problema estaba allí. Lo arreglé colocando lo siguiente en la función de clic para el encabezado del panel, siempre que esta función expandiera el panel:

            // recalculate column widths, because they aren''t recalculated when the table is hidden''
            $(''.homeTable'').DataTable()
                .columns.adjust()
                .responsive.recalc();

Answer 19

Use esto: Reemplace su nombre modal, borre su datatable y cargue

$(''#modalCandidateAssessmentDetail'').on(''shown.bs.modal'', function (e) {

});

Answer 20

Ver esta solución . Se puede resolver con un evento de desplazamiento de ventana que se activa una sola vez.

Answer 21

añadir a su script en la página:

$( window ).resize(function() {
    var table = $(''#tableId'').DataTable();
    $(''#container'').css( ''display'', ''block'' );
    table.columns.adjust().draw();
});

Answer 22

asegúrese de que el ancho de la mesa es del 100%

Entonces "autoWidth": verdadero

Answer 23

Añadir ancho fijo para mesa contenedor

JS:

otableCorreo = $("#indexTablaEnvios").DataTable({                
    "fnInitComplete": function (oSettings, json) {
        $(otableCorreo.table().container()).addClass("tablaChildren");
    },
});

CSS:

.tablaChildren {
    width: 97%;
}

Answer 24

$("#rates").dataTable({
"bPaginate": false,
"sScrollY": "250px",
"bAutoWidth": false,
"bScrollCollapse": true,
"bLengthChange": false,
"bFilter": false,
"sDom": ''<"top">rt<"bottom"flp><"clear">'',
"aoColumns": [{
        "bSortable": false
    },
    null,
    null,
    null,
    null
]}).fnAdjustColumnSizing( false );

Intente llamar a fnAdjustColumSizing (false) al final de su llamada de datos. código modificado arriba.

Discusión sobre el problema de tamaño de columna