en-tête jQuery Datatables mal aligné avec défilement Vertical

je vais avoir le même problème ici. Il fonctionne bien (Pixel-colonne parfaite alignée) dans Mozilla Firefox, Opera mais pas dans Chrome 21.

Solution:

comme mentionné dans ce post http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1

En Gros, ce qui se passe, C'est que DataTables essaye de lire la largeur de la table, que le navigateur a établi, de sorte qu'il peut faire la correspondance en tête. Le le problème est que lorsque DataTables fait ceci calcul sur votre page, le navigateur n'a pas montré le scrollbar-et le calcul est donc légèrement erroné! La raison je suggère que C'est un bug de Webkit, est-ce que, même après que DataTables du point de vue logique, la barre de défilement n'a toujours pas été affichée. Si vous ajoutez le code suivant vous pouvez voir l'effet de ceci:

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

la partie intéressante est qu'après que j'ai ajouté setTimeout et après qu'il ait exécuté il y avait encore une colonne non alignée. Après l'ajout de "sScrollX": "100%", "sScrollXInner":" 100% " Toutes les colonnes sont alignées (pixel-perfect).

Solution pour Chrome / Chrome, oeuvres de source 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 );

});

j'ai résolu ce problème en enveloppant la Table "dataTable" avec un div avec overflow: auto

.dataTables_scroll
{
    overflow:auto;
}

et ajouter ce JS après votre dataTable initialisation

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

N'utilisez pas sScrollX ou sScrollY, retirez alors et ajoutez un div wrapper vous-même qui fait la même chose.

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

Travaillé parfait pour moi!

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

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

j'ai eu un problème similaire, mais le mien redimensionne pour s'adapter après la recherche ou le tri ou l'interaction avec la table dans une manière de provoquer un nouveau dessin, essayé le nouveau dessin...fonction mais pas de chance a dû improviser à la fin. Le truc marrant que j'ai fait pour moi, c'était d'appeler!--0--> et oTable.fnFilter( "",0 ) dans le même ordre (recherche et recherche claire)... les travaux de cette...lol.. :)

ce qui pourrait vous aider (pas sûr, mais je crois que sa vaut la peine d'essayer)

ajouter ce code à la page

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

prise à partir d'ici problème de colonnes de largeur dans Chrome & Safari

Aussi, je suppose qu'il vaut la peine d'essayer de définir les colonnes du constructeur seulement, au lieu de les définir dans le (laisser balise vide)

si vous utilisez bootstrap:

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

j'ai aussi eu ce problème. Après de nombreux essais différents j'ai essayé ci-dessous et j'ai réussi.

j'ai essayé d'ajouter une étiquette avec la propriété float dans l'attribut style. Alors ça a marché find.

Par exemple:

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

C'est comment je me suis débarrassé de ce problème:

Je l'utilise généralement pour exécuter des fonctions après qu'un appel Ajax ait été effectué

    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();
}

dans la vue:

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

où tbl stocke l'objet datatable.

Avoir le même problème dans firefox, J'ai changé un peu le script jquery comme ceci (dans jquery.dataTables.js version 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";

Il fonctionne même après le tri et le filtrage.

j'ai eu un problème où les données dans les colonnes était trop volumineux et il n'y avait pas de place dans les données pour un saut de ligne. Ma solution était d'ajouter un div avec un overflow et un attribut de titre comme ceci:

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

cela a causé la table à se poser presque complètement.

j'utilise bootstrap et j'ai réussi avec cette

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

j'ai eu ce problème avec bootstrap 3 et le problème était lié au rembourrage gauche et droite sur mes éléments th et td que j'ai ajouté après l'application du style bootstrap. Enlever mon rembourrage gauche et droite a résolu le problème dans mon cas.

nous pouvons gérer cela en utilisant css et des changements mineurs dans sDom.

ajouter la classe suivante dans votre fichier css

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

remplacer votre attribut' t 'dans sDom de la table par < "scrollDiv"t> et supprimer l'attribut scrollX de la table

Save et Profitez-en ! :)

j'ai trouvé que la largeur serait mal alignée dans la première fenêtre de défilement, de sorte que la solution est de, sur la première défilement seulement demander un nouveau dessin de table.

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

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

Modifier: fonctionne Aussi avec un setTimeout fonction. Cela dépend du moment où le décalage se produit.

$table.tables().draw() est la clé ici.

moi aussi j'ai fait face au même problème. Je l'ai résolu en supprimant 'sScrollY':'405px' à partir de la datatable propriété et en-tête fixe.

JS

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

           "paging":         false
            });        

        });

Puis au-dessus de votre gridview ajouter un élément div comme ci-dessous.

  <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>

Je ne suis pas sûr d'avoir eu exactement le même problème. J'avais affaire à une très grande table, plus de 40 colonnes, et j'utilisais le défilement horizontal et vertical. Cependant, si la fenêtre du navigateur était placée si grande que vous pouviez voir la table entière, les titres des colonnes étaient alignés et le contenu de la table était au centre.

j'ai remarqué dans firebug que la table avait obtenu une largeur de 1352px à travers des DataTables. En réglant ça à 100%, tout s'est aligné!

je sais que c'est un vieux fil, mais j'ai atterri ici en cherchant le problème d'alignement de l'en-tête. Je besoin d'une solution différente, alors les poster ici pour que quelqu'un va trouver utile.

je viens d'ajouter ce qui suit dans mon bloc de style et il a résolu le problème:

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

semble que les Datatables ajoute la mise en page fixe, donc l'ajout de cette ligne a fait mes en-têtes alignent correctement avec les données lors du défilement