scrolly - Problemas de jQuery DataTable overflow y text-wrapping

personalizar datatable jquery

Question

Tengo el siguiente DataTable (ancho de clase completo css establece ancho = 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
            });

Todo funciona bien hasta que haya un registro con una cadena de texto larga ... cuando aparece un registro con texto muy largo, la tabla de datos se desborda a la derecha de la página. (Ver la captura de pantalla a continuación, la línea roja es donde debe terminar la página) http://i1109.photobucket.com/albums/h430/tbarbedo/overflow.jpg

¿Puede alguien decirme cómo envolver el texto en las celdas o evitar este problema de desbordamiento?

Lo he intentado a través de ''table-layout: fixed'' ... esto evita el desbordamiento pero establece todas las columnas con el mismo ancho.

Gracias

Answer 1

El mismo problema y lo solucioné poniendo la tabla entre el código

<div class = "table-responsive"> </ div>

Answer 2

Estoy muy tarde aquí, pero después de leer la respuesta de @Greg Pettit y un par de blogs u otras preguntas de SO que desafortunadamente no recuerdo, decidí simplemente hacer un par de plugins de tablas de datos para lidiar con esto.

Los puse en bitbucket en un repo de Mercurial. Seguí el complemento fnSetFilteringDelay y acabo de cambiar los comentarios y el código en el interior, ya que nunca antes había hecho un complemento para nada. Hice 2 y me siento libre de usarlos, contribuir con ellos o proporcionar sugerencias.

• dataTables.TruncateCells : trunca cada celda de una columna hasta un número determinado de caracteres, reemplaza los últimos 3 con un elipsis y coloca el texto completo truncado en el título de la celda atribuido.

• dataTables.BreakCellText - intenta insertar un carácter de dataTables.BreakCellText cada X, definido por el usuario, caracteres en cada celda de la columna. Hay peculiaridades con respecto a las celdas que contienen espacios y guiones, puedes obtener resultados de aspecto extraño (como un par de personajes desordenados después de la última inserción)
  personaje). Tal vez alguien puede hacerlo más robusto, o simplemente puede jugar con los puntos de interrupción de la columna para que se vea bien con sus datos.

Answer 3

Intente agregar td {word-wrap: break-word;} al CSS y vea si lo arregla.

Answer 4

La siguiente declaración de CSS funciona para mí:

.td-limit {
    max-width: 70px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

Answer 5

Me conformé con la limitación (para algunas personas, un beneficio) de tener mis filas con solo una línea de texto alta. El CSS para contener cadenas largas se convierte en:

.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;
}

[Editar para agregar:] Después de usar mi propio código e inicialmente fallar, reconocí un segundo requisito que podría ayudar a las personas. La tabla en sí necesita tener un diseño fijo o las celdas seguirán tratando de expandirse para acomodar los contenidos sin importar qué. Si los estilos de DataTables o sus propios estilos aún no lo hacen, debe configurarlo:

table.someTableClass {
  table-layout: fixed
}

Ahora que el texto está truncado con puntos suspensivos, para "ver" realmente el texto que está potencialmente oculto, puede implementar un complemento de información sobre herramientas o un botón de detalles o algo así. Pero una solución rápida y sucia es usar JavaScript para establecer que el título de cada celda sea idéntico a su contenido. Usé jQuery, pero no es necesario que:

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

DataTables también proporciona devoluciones de llamada en los niveles de representación de fila y celda, por lo que podría proporcionar lógica para establecer los títulos en ese punto en lugar de hacerlo con un iterador de jQuery.each . Pero si tiene otros oyentes que modifican el texto de la celda, es mejor que los golpee con jQuery.each al final.

Este método de truncamiento completo TAMBIÉN tendrá una limitación que usted ha indicado que no le gusta: por columnas predeterminadas tendrá el mismo ancho. Identifico columnas que van a ser consistentemente anchas o consistentemente estrechas, y explícitamente establezco un ancho basado en porcentaje sobre ellas (puede hacerlo en su marcado o con ancho). Cualquier columna sin un ancho explícito obtiene una distribución pareja del espacio restante.

Eso puede parecer un montón de compromisos, pero el resultado final valió la pena para mí.

Answer 6

Me enfrenté al mismo problema de envoltura de texto, lo resolví cambiando el CSS de la clase de tabla en DT_bootstrap.css. Introduje las últimas dos líneas CSS: diseño de tabla y salto de palabra.

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

Answer 7

Puede intentar configurar el ajuste de word-wrap sin embargo, todavía no funciona en todos los navegadores.

Otro método sería agregar un elemento alrededor de los datos de su celda de esta manera:

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

A continuación, agregue algunos css como este:

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

Answer 8

Simplemente el estilo CSS usando white-space:nowrap funciona muy bien para evitar el ajuste de texto en las celdas. Y, por supuesto, puede usar el text-overflow:ellipsis y overflow:hidden para truncar texto con efecto de elipsis.

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

Answer 9

Solo puede usar renderizar y ajustar su div o span propio a su alrededor. Los TD son difíciles de diseñar cuando se trata de ancho máximo, altura máxima, etc. Div y span son fáciles ...

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

Creo que una mejor solución que trabajar con CSS hacks que no son compatibles con el navegador cruzado.