web-dev-qa-db-fra.com

débordement de texte jQuery DataTable et habillage du texte

J'ai le DataTable suivant (la classe css pleine largeur définit width = 100%)

<table class="datatable full-width">
    <thead>
        <th>LOB</th>
        <th>Creditor Line 1</th>
        <th>Creditor Line 2</th>
        <th>Address</th>
        <th>City</th>
        <th>State</th>
        <th>Zip</th>
        <th></th>
    </thead>
    <tbody>
        ...
    </tbody>
</table>

Javascript:

var profileTable =
            $(".datatable").dataTable({
                "iDisplayLength": 25,
                "bDestroy": true,
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "bAutoWidth": false
            });

Tout fonctionne correctement jusqu'à ce qu'il y ait un enregistrement avec une longue chaîne de texte ... Lorsqu'un enregistrement apparaît avec un texte très long, le tableau de données déborde à droite de la page. (Voir la capture d'écran ci-dessous, la ligne rouge correspond à l'endroit où la page doit se terminer) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

Quelqu'un peut-il me dire comment insérer le texte dans les cellules ou éviter ce problème de débordement?

J'ai essayé via 'table-layout: fixed' ... cela évite le débordement mais définit toutes les colonnes sur la même largeur.

Merci

jqueryhtmlcssasp.net-mvc-3datatables
35
thiag0

Je me suis contenté de la limitation (avantage pour certaines personnes) de ne placer qu'une rangée de texte sur mes lignes. Le CSS à contenir des chaînes longues devient alors:

.datatable td {
  overflow: hidden; /* this is what fixes the expansion */
  text-overflow: Ellipsis; /* not supported in all browsers, but I accepted the tradeoff */
  white-space: nowrap;
}

[modifier pour ajouter:] Après avoir utilisé mon propre code et avoir initialement échoué, j'ai reconnu une deuxième exigence susceptible d'aider les gens. La table elle-même doit avoir une mise en page fixe ou les cellules continueront simplement d'essayer de se développer pour s'adapter au contenu, quoi qu'il arrive. Si les styles DataTables ou vos propres styles ne le font pas déjà, vous devez le définir:

table.someTableClass {
  table-layout: fixed
}

Maintenant que le texte est tronqué avec des points de suspension, pour "voir" le texte potentiellement masqué, vous pouvez implémenter un plug-in d'info-bulle, un bouton de détail ou quelque chose d'autre. Mais une solution simple et rapide consiste à utiliser JavaScript pour que le titre de chaque cellule soit identique à son contenu. J'ai utilisé jQuery, mais vous n'avez pas à:

  $('.datatable tbody td').each(function(index){
    $this = $(this);
    var titleVal = $this.text();
    if (typeof titleVal === "string" && titleVal !== '') {
      $this.attr('title', titleVal);
    }
  });

DataTables fournit également des rappels aux niveaux de rendu des lignes et des cellules, de sorte que vous pouvez fournir une logique permettant de définir les titres à ce stade plutôt qu'avec un itérateur jQuery.each. Mais si d'autres auditeurs modifient le texte d'une cellule, il vaut peut-être mieux les frapper avec le jQuery.each à la fin.

Cette méthode de troncature complète aura également une limitation dont vous n'êtes pas fan: par défaut, les colonnes auront la même largeur. J'identifie les colonnes de largeur ou de largeur constantes et leur attribue explicitement une largeur en pourcentage (vous pouvez le faire dans votre balisage ou avec sWidth). Toute colonne sans largeur explicite obtient une distribution uniforme de l'espace restant.

Cela peut sembler beaucoup de compromis, mais le résultat final en valait la peine pour moi.

38
Greg Pettit

La déclaration CSS suivante fonctionne pour moi:

.td-limit {
    max-width: 70px;
    text-overflow: Ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
15
Mukesh Salaria

Vous pouvez essayer de définir le Word-wrap, mais cela ne fonctionne pas encore dans tous les navigateurs.

Une autre méthode consiste à ajouter un élément autour des données de votre cellule, comme ceci:

<td><span>...</span></td>

Ajoutez ensuite quelques css comme ceci:

.datatable td span{
    max-width: 400px;
    display: block;
    overflow: hidden;
}
10
David Gallagher

J'ai rencontré le même problème d'habillage de texte, résolu en modifiant le css de la classe de table dans DT_bootstrap.css .J'ai introduit les deux dernières lignes css table-layout et Word-break. 

   table.table {
    clear: both;
    margin-bottom: 6px !important;
    max-width: none !important;
    table-layout: fixed;
    Word-break: break-all;
   }
3
Harish Lalwani

Simplement, le style CSS utilisant white-space:nowrap fonctionne très bien pour éviter le retour à la ligne dans les cellules. Et bien sûr, vous pouvez utiliser les text-overflow:Ellipsis et overflow:hidden pour tronquer du texte avec un effet Ellipsis.

<td style="white-space:nowrap">Cell Value</td>
3
Lucky

Je suis bien en retard, mais après avoir lu la réponse de Greg Pettit et quelques blogs ou autres SO je ne me souviens malheureusement pas de cette décision, j'ai décidé de créer quelques plugins dataTables pour gérer cela.

Je les ai mis sur bitbucket dans un dépôt Mercurial. J'ai suivi le plug-in fnSetFilteringDelay et je viens de modifier les commentaires et le code qu'il contient, car je n'avais jamais créé de plugin auparavant. J'ai fait 2, et n'hésitez pas à les utiliser, à y contribuer ou à faire des suggestions. 

  • dataTables.TruncateCells - tronque chaque cellule d'une colonne jusqu'à un nombre défini de caractères, en remplaçant les 3 dernières par des ellipses et place le texte complet pré-tronqué dans le titre de la cellule. 

  • dataTables.BreakCellText - tente d'insérer un caractère de rupture tous les X, caractères définis par l'utilisateur, dans chaque cellule de la colonne. Il y a des bizarreries concernant les cellules contenant à la fois des espaces et des traits d'union. Vous pouvez obtenir des résultats étranges (comme quelques caractères qui traînent après la dernière insertion). 
    personnage). Peut-être que quelqu'un peut rendre cela plus robuste, ou vous pouvez simplement jouer avec le breakPos de la colonne pour que celle-ci ait l'air correcte avec vos données.

3
JustinP8

Le même problème et j'ai résolu de mettre la table entre le code

<div class = "table-responsive"> </ div>
2
César Augusto

Essayez d’ajouter td {Word-wrap: break-Word;} au fichier css et voyez s’il le corrige.

1
ScottS

Utiliser les classes "responsive nowrap" sur l'élément table devrait faire l'affaire.

0
Ryan

Vous pouvez simplement utiliser le rendu et envelopper votre propre div ou un environnement autour. Les disques durs sont difficiles à coiffer quand il s’agit de largeur maximale, hauteur maximale, etc.

Voir: https://datatables.net/examples/advanced_init/column_render.html

Je pense une solution plus agréable que de travailler avec des hacks CSS qui ne sont pas supportés par plusieurs navigateurs. 

0
user1281146