jQuery Datatables de débordement et d'habillage de texte des questions

Je me suis contenté de la limitation (pour certaines personnes un avantage) d'avoir mes lignes seulement une ligne de texte haut. Le CSS contiennent de longues chaînes 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 l'utilisation de mon propre code et d'abord à défaut, j'ai reconnu une deuxième exigence qui pourraient aider les gens. La table elle-même doit avoir une disposition fixe ou les cellules vont juste continuer à essayer de s'étendre à accueillir des contenus n'importe quoi. Si les styles de tables de données ou de vos propres styles n'est pas déjà le cas, vous devez le configurer:

table.someTableClass {
  table-layout: fixed
}

Maintenant que le texte est tronqué avec des points de suspension, pour "voir" le texte qui est potentiellement cachés, vous pouvez mettre en œuvre une info-bulle plugin ou un bouton ou quelque chose. Mais un rapide et sale solution est d'utiliser JavaScript pour chaque cellule de titre pour être identique à celle de 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);
    }
  });

Tables de données fournit également des rappels à la ligne et de la cellule de rendu niveaux, de sorte que vous pourriez fournir logique pour définir les titres à ce point au lieu de avec un jQuery.each itérateur. Mais si vous avez d'autres auditeurs que de modifier le texte de la cellule, vous pourriez être mieux de les frapper avec le jQuery.each à la fin.

Toute cette troncature méthode aura ÉGALEMENT une limitation, vous avez indiqué que vous n'êtes pas un fan d': par défaut, les colonnes ont la même largeur. Je identifier les colonnes qui vont être systématiquement large et cohérente à l'étroit, et de définir explicitement un pourcentage de la largeur sur eux (vous pouvez le faire dans votre balisage ou avec sWidth). Toutes les colonnes, sans obligation de largeur d'obtenir une distribution uniforme de l'espace restant.

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

Vous pouvez essayer le réglage de la word-wrap cependant il ne fonctionne pas dans tous les navigateurs encore.

Une autre méthode serait d'ajouter un élément à votre cellule de données comme ceci:

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

Puis ajouter un peu de css comme ceci:

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

Je suis en retard ici, mais après avoir lu @Greg Pettit réponse et un couple de blogs et d'autres questions je ne peux malheureusement pas me souvenir, j'ai décidé de faire juste un couple de tables de données des plugins pour faire face.

Je les ai mis sur bitbucket dans un Mercurial repo. Je follwed la fnSetFilteringDelay plugin et juste changé les commentaires et le code à l'intérieur, que je n'ai jamais fait un plugin pour quoi que ce soit avant. J'ai fait les 2, et n'hésitez pas à les utiliser, contribuer à, ou de fournir des suggestions.

• dataTables.TruncateCells - tronque la valeur de chaque cellule dans une colonne vers le bas pour un nombre défini de caractères, de remplacer les 3 dernières avec une ellipse, et met le plein de pré-texte tronqué dans la cellule intitulé attribué.

• dataTables.BreakCellText - tente d'insérer un caractère de saut de toutes les X, défini par l'utilisateur, les caractères de chaque cellule dans la colonne. Il y a des bizarreries concernant les cellules qui contiennent à la fois des espaces et des tirets, vous pouvez obtenir un peu bizarre à la recherche de résultats (comme un couple de personnages zigzaguant après la dernière inséré
  caractère). Peut-être quelqu'un peut la rendre plus robuste, ou vous pouvez juste jouer avec le breakPos pour la colonne pour le faire paraître très bien avec vos données.

Tout simplement le style css à l'aide white-space:nowrap fonctionne très bien pour éviter l'habillage du texte dans les cellules. Et bien sûr, vous pouvez utiliser le text-overflow:ellipsis et overflow:hidden pour tronquer du texte avec des points de suspension en effet.

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

Vous pouvez simplement utiliser le rendu et l'enveloppe de votre propre div ou span autour d'elle. La TD sont difficiles à style quand il s'agit de max-width, max-height, etc. Div et span est facile..

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

Je pense qu'une solution plus agréable de travailler avec des hacks CSS qui ne sont pas pris en charge multi-navigateur.