javascript - thead - tabla con header fijo y scroll(horizontal y vertical)

Encabezado de datos de jQuery desalineado con desplazamiento vertical

Question

He publicado esto en los foros de datatables.net, pero después de una semana, todavía no hay respuesta. Espero poder encontrar ayuda aquí ...

Estoy usando la versión 1.8.1 de los datos y tengo pesadillas sobre la alineación del encabezado de columna con el desplazamiento vertical habilitado.

Con el código publicado a continuación, los encabezados se alinean correctamente en Firefox e IE8 e IE9, pero Chrome e IE7 están desactivados. Estoy usando muchos datos en este proyecto, y este es un problema con todos. Estoy desesperado por ayuda!

EDITAR: He descubierto que esto tiene algo que ver con establecer el ancho de la tabla. El datatable toma el ancho de su contenedor. Si no configuro el ancho, todo se alinea bien (pero la tabla es demasiado grande para lo que necesito en la página). Si le doy a la tabla div (o una división padre en algún lugar más arriba) un ancho, los encabezados no se alinean correctamente.

¡¡Gracias!!

Capturas de pantalla:

www.dennissheppard.net/firefox_alignment.png

www.dennissheppard.net/chrome_alignment.png

www.dennissheppard.net/ie7_alignment.png

otable = $(''#order_review_grid'').dataTable({                
    ''fnRowCallback'': function (nRow, strings, displayIndex, dataIndex) {
        return formatRow(nRow, dataIndex);
    },
    ''fnDrawCallback'':function()
    {
        checkIfOrderSubmitted(this);                    
    },
    ''aoColumnDefs'':
    [
        { ''bVisible'': false, ''aTargets'': [COL_PRODUCT] },
        { ''bSortable'': false, ''aTargets'': [COL_IMAGE, COL_DELETE] },
        { ''sClass'': ''right_align'', ''aTargets'': [COL_PRICE] },
        { ''sClass'': ''center_align'', ''aTargets'': [COL_BRAND,COL_PACK] },
        { ''sClass'': ''left_align'', ''aTargets'': [COL_DESCRIPTION] }
    ],
    ''sDom'': ''t'',
    ''sScrollY'':''405px'',
    ''bScrollCollapse'':true,
    ''aaSorting'':[]
});

<table id="order_review_grid" class="grid_table" cellpadding="0px" cellspacing="0px">                 
    <thead class="grid_column_header_row" id="order_review_grid_column_header_row">
        <tr>
            <td class="" id=''sequenceNumber''>SEQ #</td>
            <td class="grid_sc_header" id=''statusCode''>Sc</td>
            <td class="grid_sc_header" id=''onOrderGuide''>O.G.</td>
            <td class="grid_image_header" id=''image''>Image</td>                         
            <td class="grid_description_header" id=''description''>Description</td>                           
            <td class="grid_brand_header" id=''label''>Brand</td>
            <td class="grid_pack_header" id=''packSize''>Pack</td>
            <td class="grid_price_header" id=''price''>Price</td>
            <td class="grid_qtrfull_header" id=''caseQuantity''>Full</td>
            <td class="grid_qtrypart_header" id=''eachQuantity''>Partial</td>
            <td class="grid_refnum_header" id=''referenceNumber''>Ref #</td>
            <td class="grid_refnum_header">&nbsp;</td>
        </tr>
    </thead>
    <tbody class="">
        <!-- loaded data will go here -->
    </tbody>
</table>

Answer 1

Así es como me he deshecho de este problema:

Uso esto generalmente para ejecutar funciones después de que se haya completado una llamada Ajax

    WaAjaxHelper = {
    arr_execute_after_ajax: null,
    add_function_to_execute_after_ajax: function (fun) {

        if (typeof fun == ''function'') {
            if (!this.arr_execute_after_ajax) {
                this.arr_execute_after_ajax = [];
            }
            this.arr_execute_after_ajax.push(fun)
            return true;
        } else {
            alert(''ERROR: WaAjaxHelper.add_function_to_execute_after_ajax only functions possible'');
            return false;
        }
    },
    execute_after_ajax: function () {
        if (this.arr_execute_after_ajax) {
            $.each(this.arr_execute_after_ajax, function (index, value) {
                try {
                    value();

                } catch (e) {
                    console.log(e);
                }
            })
        }
        this.arr_execute_after_ajax = null;
    }
}


$(document).ready(function () {
    $.ajaxSetup({
        async: true,
        beforeSend: function (xhr) {
            xhr.setRequestHeader("Accept", "text/javascript");
            $(''.blockUI'').css(''cursor'', ''progress'');
        },
        complete: function (jqXHR, textStatus) {
            $(''body'').removeClass(''waiting'');
        },
        error: function (jqXHR, textStatus, errThrown) {
            alert("Ajax request failed with error: " + errThrown);
            ajax_stop();
        }
    });
    $(document).ajaxStart(ajax_start).ajaxStop(ajax_stop);
});


ajax_start = function () {
    // do something here
}
ajax_stop = function () {
   WaAjaxHelper.execute_after_ajax();
}

en la vista:

  var tbl;
  WaAjaxHelper.add_function_to_execute_after_ajax(function (){tbl.fnDraw()})

donde tbl almacena el objeto de datos.

Answer 2

Encontré que el ancho se desalinearía en el primer desplazamiento de la ventana, por lo que la solución es, en el primer desplazamiento solo solicitar un nuevo sorteo de tabla.

const $table = $(''#table'').DataTable({ ... });

$(window).on(''scroll'', () => {
  $(window).off(''scroll'');
  $table.tables().draw();
});

Editar : También funciona con una función setTimeout . Esto depende cuando suceda la desalineación.

$table.tables().draw() es la clave aquí.

Answer 3

Esto podría ayudarte (no estoy seguro, pero supongo que vale la pena intentarlo)

añadir este código a la página

if ( $.browser.webkit ) {
   setTimeout( function () {
       oTable.fnAdjustColumnSizing();
   }, 10 );
}

tomado de aquí http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

Además, creo que vale la pena intentar definir las columnas en el constructor solo en lugar de definirlas en (dejar la etiqueta vacía)

Answer 4

Estoy teniendo el mismo problema aquí. Funciona bien (columna de píxel perfecto alineada) en Mozilla Firefox, Opera pero no en Chrome 21.

Solución:

Como se menciona en esta publicación http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

Básicamente, lo que está sucediendo es que DataTables está tratando de leer el ancho de la tabla, que el navegador ha dibujado, para que pueda hacer coincidir el encabezado. El problema es que cuando DataTables realiza este cálculo en su página, el navegador no muestra la barra de desplazamiento, ¡y por lo tanto el cálculo es un poco incorrecto! La razón por la que sugiero que es un error del Webkit es que, incluso después de que DataTables haya ejecutado toda su lógica, la barra de desplazamiento aún no se ha mostrado. Si agregas el siguiente código puedes ver el efecto de esto:

console.log ($ (oTable.fnSettings (). nTable) .outerWidth ()); setTimeout (function () {console.log ($ (oTable.fnSettings (). nTable) .outerWidth ());}, 1);

La parte interesante es que después de agregar setTimeout y después de que se ejecutó todavía había una columna no alineada. Después de agregar "sScrollX": "100%", "sScrollXInner": "100%" todas las columnas se alinearon (píxeles perfectos).

Solución para Chrome / Chromium, trabajos de origen en FF, Opera, IE9:

$(document).ready(function()
{
  var oTable = $(''#mytable'').dataTable(
  {
    "sScrollY":  ( 0.6 * $(window).height() ),
    "bPaginate": false,
    "bJQueryUI": true,
    "bScrollCollapse": true,
    "bAutoWidth": true,
    "sScrollX": "100%",
    "sScrollXInner": "100%"
  });


  setTimeout(function ()
  {
    oTable.fnAdjustColumnSizing();
  }, 10 );

});

Answer 5

JS

$(''#<%=gridname.ClientID%>'').dataTable( {                   

           "paging":         false
            });        

        });

Luego, sobre su vista de cuadrícula, agregue un elemento div como se muestra abajo.

  <div style ="height:600px; overflow:auto;"> 
  <asp:GridView ID="id" runat="server" DataKeyNames="key" ClientIDMode="Static" HeaderStyle-BackColor="#99ccff"
        BorderStyle="Inset" BorderWidth="1px" CellPadding="4" HorizontalAlign="Center" AutoGenerateColumns="false" Width="98%"  >
etc..
</div>

Answer 6

No estoy seguro si tuve exactamente el mismo problema. Estaba tratando con una tabla muy grande, más de 40 columnas, y estaba usando el desplazamiento horizontal y vertical. Sin embargo, si la ventana del navegador era tan grande que podía ver toda la tabla, los encabezados de las columnas quedaron alineados y el contenido de la tabla estaba en el centro.

Noté en Firebug que la tabla había alcanzado un ancho de 1352px a través de DataTables. Ponerlo al 100% hizo que todo se alineara!

Answer 7

Podemos manejar esto usando css y cambios menores en sDom.

Agregue la siguiente clase en su archivo css

.scrollDiv {
    max-width:860px; //set width as per your requirement
    overflow-x:scroll;  
}

reemplace su ''t'' en el atributo sDom de la tabla con <"scrollDiv" t> y elimine el atributo scrollX de la tabla

Guarda y disfruta! :)

Answer 8

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

.dataTables_scroll
{
    overflow:auto;
}

y agregue este JS después de la inicialización de su tabla de datos

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

No utilice sScrollX o sScrollY, elimine entonces y agregue un envoltorio div que haga lo mismo.

Answer 9

Sé que este es un tema bastante antiguo, pero llegué aquí cuando busqué el problema de alineación del encabezado. Resultó que necesitaba una solución diferente, por lo que publicar aquí para que alguien la encuentre útil.

Acabo de agregar el siguiente en mi bloque de estilo y resolvió el problema:

.table {table-layout:auto !important;}

Parece que Datatables agrega un diseño fijo, por lo que al agregar esta línea, mis encabezados se alinean correctamente con los datos al desplazarse

Answer 10

Teniendo el mismo problema en Firefox, cambié un poco el script jquery así (en jquery.dataTables.js versión 1.9.4):

line 3466 (v1.9.4) : nScrollHeadInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

line 3472 (v1.9.4) : nScrollFootInner.style.paddingRight = "0px"; //instead of bScrolling ? o.oScroll.iBarWidth + "px" : "0px";

Funciona incluso después de clasificar y filtrar.

Answer 11

Tuve el problema y resultó ser un efecto secundario con mi CSS. Intenta desactivar todos los css externos y ver si el problema persiste.

Answer 12

Tuve este problema con bootstrap 3 y el problema estaba relacionado con el relleno izquierdo y derecho de los elementos th y td que agregué después de que se aplicara el estilo de bootstrap. Eliminar mi relleno izquierdo y derecho solucionó el problema en mi caso.

Answer 13

Tuve un problema donde los datos en las columnas eran demasiado grandes para ajustarse y no había lugar en los datos para un salto de línea. Mi solución fue agregar un div con un desbordamiento y un atributo de título como este:

<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>

Esto causó que la mesa se asentara casi por completo.

Answer 14

Tuve un problema similar, pero el mío cambia de tamaño para que se ajuste después de buscar, clasificar o interactuar con la mesa de manera que se pueda volver a dibujar, se intentó la función de volver a dibujar ... pero no hubo suerte que improvisar al final. La solución divertida que funcionó para mí fue llamar oTable.fnFilter( "x",0 ) y oTable.fnFilter( "",0 ) en este mismo orden (buscar y borrar búsqueda) ... esto funciona ... jajaja. . :)

Answer 15

Yo también enfrenté el mismo problema. Lo resolví eliminando ''sScrollY'':''405px'' de la propiedad de datos y usé el encabezado fijo .

Answer 16

Yo también tuve este problema. Después de muchos intentos diferentes probé lo siguiente y lo logré.

Intenté agregar una etiqueta de etiqueta con la propiedad float en el atributo de estilo. Entonces funcionó encontrar.

Por ejemplo:

<td class="" id=''sequenceNumber''><label style="float:left;">SEQ #</label></td>

Answer 17

Yo uso bootstrap y me las arreglé con este

<table id="datatable_patients" class="table table-striped table-bordered table-hover table-responsive" width="100%">
     <thead></thead>
     <tbody></tbody>
</table>

Answer 18

si está utilizando bootstrap:

.table {
    width: 100%;
    max-width: none; // >= this is very important
}

Answer 19

var table = $("#myTable").DataTable({
            "sScrollY": "150px",
            //"bAutoWidth": false // Disable the auto width calculation 
        });

    $(window).resize( function () {
        table.columns.adjust();
    } );

Answer 20

if ( $.browser.webkit ) {
    setTimeout( function () {
        oTable.fnAdjustColumnSizing();
    }, 10 );
}

Funcionó perfecto para mí!