En-tête jQuery Datatables mal aligné avec le défilement vertical
J'ai posté ceci dans les forums datatables.net, mais après une semaine, toujours aucune réponse. J'espère que je peux trouver de l'aide ici ...
J'utilise la version 1.8.1 des tables de données et je fais des cauchemars sur l'alignement des en-têtes de colonne avec le défilement vertical activé.
Avec le code affiché ci-dessous, les en-têtes s'alignent correctement dans Firefox et IE8 et IE9, mais Chrome et IE7 sont désactivés. J'utilise un lot de tables de données sur ce projet, et c'est un problème avec tout le monde. Je cherche désespérément de l'aide!
EDIT: J'ai compris que cela avait quelque chose à voir avec le réglage de la largeur de la table. Le datatable prend la largeur de son conteneur. Si je ne définis aucune largeur, tout s'aligne bien (mais la table est trop grande) pour où j'en ai besoin sur la page.) Si je donne une largeur au div de la table (ou un div parent quelque part plus haut), les en-têtes ne s'alignent pas correctement.
Merci!!
Captures d'écran:
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"> </td>
</tr>
</thead>
<tbody class="">
<!-- loaded data will go here -->
</tbody>
</table>
J'ai eu le problème et cela s'est avéré être un effet secondaire avec mon CSS. Essayez de désactiver tous les CSS externes et voyez si le problème persiste.
J'ai le même problème ici. Cela fonctionne correctement (colonne parfaitement pixelisée alignée) dans Mozilla Firefox, Opera mais pas dans Chrome 21.
Solution:
Comme mentionné dans cet article http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
Fondamentalement, ce qui se passe, c'est que DataTables essaie de lire la largeur de la table, que le navigateur a dessinée, afin qu'il puisse faire correspondre l'en-tête. Le problème est que lorsque DataTables fait ce calcul sur votre page, le navigateur n'a pas montré la barre de défilement - et donc le calcul est légèrement faux! La raison pour laquelle je suggère qu'il s'agit d'un bogue Webkit est que, même après que DataTables a exécuté toute sa 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 avoir ajouté setTimeout et après son exécution, il y avait encore une colonne non alignée. Après avoir ajouté "sScrollX": "100%", "sScrollXInner": "100%" toutes les colonnes étaient alignées (pixel-perfect).
Solution pour Chrome/Chrome, travaux de source dans 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 débordement: auto
.dataTables_scroll
{
overflow:auto;
}
et ajoutez ce JS après votre initialisation dataTable
jQuery('.dataTable').wrap('<div class="dataTables_scroll" />');
N'utilisez pas sScrollX ou sScrollY, supprimez ensuite et ajoutez vous-même un wrapper div qui fait la même chose.
var table = $("#myTable").DataTable({
"sScrollY": "150px",
//"bAutoWidth": false // Disable the auto width calculation
});
$(window).resize( function () {
table.columns.adjust();
} );
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
Fonctionne parfaitement pour moi!
J'ai eu un problème similaire, mais le mien est redimensionné pour s'adapter après avoir recherché ou trié ou interagi avec la table de manière à provoquer un redessin, essayé la fonction redessiner ... mais aucune chance n'a dû improviser à la fin. La solution amusante que j'ai utilisée pour moi appelait oTable.fnFilter( "x",0 ) et oTable.fnFilter( "",0 ) dans le même ordre (recherche et recherche claire) ... cela fonctionne ... lol .. :)
cela pourrait vous aider (pas sûr mais je suppose que cela vaut la peine d'essayer)
ajouter ce code à la page
if ( $.browser.webkit ) {
setTimeout( function () {
oTable.fnAdjustColumnSizing();
}, 10 );
}
prises à partir d'ici problème de colonnes de largeur dans Chrome & Safari
En outre, je suppose que cela vaut la peine d'essayer de définir les colonnes dans le constructeur uniquement au lieu de les définir dans le (laisser la balise vide)
J'ai eu un problème où les données dans les colonnes étaient trop grandes pour tenir 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 débordement et un attribut title comme ceci:
<td style="width: 110px;max-width:200px;"><div style="overflow:hidden;" title="@item.NewValue" >@item.NewValue</div></td>
Cela a provoqué une stabilisation quasi complète de la table.
si vous utilisez le 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é ce qui suit et réussi.
J'ai essayé d'ajouter une étiquette d'étiquette avec la propriété float dans l'attribut style. Ensuite, cela a fonctionné.
Par exemple:
<td class="" id='sequenceNumber'><label style="float:left;">SEQ #</label></td>
Nous pouvons gérer cela en utilisant css et des modifications mineures dans sDom.
Ajoutez la classe suivante dans votre fichier css
.scrollDiv {
max-width:860px; //set width as per your requirement
overflow-x:scroll;
}
remplacez votre 't' dans l'attribut sDom de la table par <"scrollDiv" t> et supprimez l'attribut scrollX de la table
Économisez et profitez! :)
Moi aussi, j'ai été confronté au même problème. Je l'ai résolu en supprimant 'sScrollY':'405px' à partir de la propriété datatable et utilisé en-tête fixe .
Ayant le même problème dans Firefox, j'ai un peu changé 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";
Cela fonctionne même après le tri et le filtrage.
Voici comment je me suis débarrassé de ce problème:
Je l'utilise généralement pour exécuter des fonctions après la fin d'un appel 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();
}
dans la vue:
var tbl;
WaAjaxHelper.add_function_to_execute_after_ajax(function (){tbl.fnDraw()})
où tbl stocke l'objet datatable.
Je ne sais pas si j'ai eu exactement le même problème. J'avais affaire à un très grand tableau, plus de 40 colonnes, et j'utilisais le défilement horizontal et vertical. Cependant, si la fenêtre du navigateur était si grande que vous pouviez voir tout le tableau, les en-têtes de colonne étaient alignés à gauche et le contenu du tableau était au centre.
J'ai remarqué dans Firebug que la table avait obtenu une largeur de 1352 pixels via DataTables. Mettre cela à 100% a tout aligné!
J'ai trouvé que la largeur s'alignerait dans le premier défilement de la fenêtre, donc la solution est de, sur le premier défilement, demander uniquement un nouveau dessin de table.
const $table = $('#table').DataTable({ ... });
$(window).on('scroll', () => {
$(window).off('scroll');
$table.tables().draw();
});
Edit: Fonctionne également avec une fonction setTimeout. Cela dépend du moment où le désalignement se produit.
$table.tables().draw() est la clé ici.
Je sais que c'est un fil assez ancien, mais j'ai atterri ici lors de la recherche du problème d'alignement de l'en-tête. Il s'est avéré que j'avais besoin d'une solution différente, alors postez ici pour que quelqu'un la trouve utile.
Je viens d'ajouter le suivant dans mon bloc de style et cela a résolu le problème:
.table {table-layout:auto !important;}
Il semble que Datatables ajoute une disposition fixe, donc l'ajout de cette ligne a fait que mes en-têtes s'alignent correctement avec les données lors du défilement
JS
$('#<%=gridname.ClientID%>').dataTable( {
"paging": false
});
});
Puis au-dessus de votre grille, ajoutez 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>
J'utilise bootstrap et j'ai réussi avec ça
<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 remplissage gauche et droit sur mes éléments th et td que j'ai ajoutés après l'application du style bootstrap La suppression de mon rembourrage gauche et droit a résolu le problème dans mon cas.