Estoy creando una DataTable en Javascript, que tiene las siguientes propiedades:

var dtable = $('.ssdatatable').DataTable({
    "lengthMenu": [[10, 25, 50, 100, 500], [10, 25, 50, 100, 500]],
    "bProcessing": true,
    "sDom": "TBflrtip",
    "bServerSide": true,
    "sAjaxSource": ajSource,
    "iDisplayLength": 25,
    "bJqueryUI": false,
    "bAutoWidth": false,
    //"bAutoLength": false,
    //"bLengthChange": false,
    "recordsFiltered": 0,
    "sPaginationType": "full_numbers",
    "bPaginate": true,
    "sServerMethod": "POST",
    "responsive": true,
    "fixedHeader": true,
    "buttons": [
            'copy', 'excel', 'pdf'
    ],
    "aoColumns": [
        //columns
    ]
});

Una de las columnas particulares es una Descripción, que tiene MUCHO texto. El ancho de las columnas es fijo, sin embargo, debido a eso, la altura de mis filas está desproporcionada, haciendo que la página x10 tenga el tamaño deseado.

Mi pregunta es: ¿hay algo que pueda agregar dentro de las propiedades para que muestre solo N caracteres, y al alcanzar el límite sería algo así como:

|text textte...|
|     Show More|      

(Traté de comentar opciones, me sirvió de algo)

¿O necesitaría usar algún método o modificar css?

0
Vadzim Savenok 14 ene. 2017 a las 01:55

3 respuestas

La mejor respuesta

Datos dados:

var mydt = [{ a: 1, b: 2, c: 3, d: 4 }, { a: 5, b: 6, c: 7, d: 8 }, { a: 10, b: 12, c: 13, d: 14 }];


                    $("#tbl2").DataTable({
                        columnDefs: [{ targets:[0] }],
                        data: mydt, columns: [{ data: "a" }, { data: "b" }, { data: "c" }, { data: "d" }],
                        createdRow: function (row, data, c, d) {

                         // so for each row, I am pulling out the 2nd td
                         // and adding a title attribute from the 
                        // data object associated with the row.


                            $(row).children(":nth-child(2)").attr("title", data.b)


                        },



                  and the rest

Aquí hay uno que funciona en jfiddle https://jsfiddle.net/bindrid/wbpn7z57/7/ tenga en cuenta que este tiene datos en un formato diferente pero funciona (en la columna de nombre)

2
Bindrid 14 ene. 2017 a las 03:37

// DataTable creó el enlace createRow para permitir que el html de la fila se actualice después de su creación.

- fila es la fila actual que se está creando - datos es el objeto de datos asociado con la fila.

createdRow: function (row, data, c, d) {


  $(row) gets the tr in a jQuery object
  $(row).children() gets all of the td's in the row
 (":nth-child(2)") gets the 2nd td in the row. Note, this is 1 based value,not 0 based.

  .attr is the jquery command that adds the "title" attribute to the td.
  the "title" is missed name but too late now.

   data.b matches the data structured used to populate the table.
   The actual structure of this data structure is dependent on your data source   so you would actually have to check it.

Espero que esto :) ayude

0
Bindrid 18 ene. 2017 a las 22:44

Tuve el mismo problema: solo quería mostrar todo el texto cuando se exporta la tabla y, por lo tanto, solo limitar el texto cuando se muestra. Entonces, según este blog https://datatables.net/blog/2016-02-26, desarrollé aún más el código para permitir que se muestre todo el texto cuando se exporta la tabla.

Para hacerlo, modifiqué el código para que el texto> 50 caracteres no se elimine, sino que se envuelva en un intervalo que luego se oculta de CSS.

El código de función se ve así:

function(data, type, row) {
        if (type === 'display' && data != null) {
          data = data.replace(/<(?:.|\\n)*?>/gm, '');


  if(data.length > 50) {
        return '<span class=\"show-ellipsis\">' + data.substr(0, 50) + '</span><span class=\"no-show\">' + data.substr(50) + '</span>';
      } else {
        return data;
      }
    } else {
      return data;
    }
  }

Luego, desde el archivo CSS, puede agregar:

span.no-show{
    display: none;
}
span.show-ellipsis:after{
    content: "...";
}
1
Emil Lykke Jensen 10 sep. 2018 a las 06:31