1

Tengo una tabla con distintas columnas en las que quiero exportar a Excel con DataTable Jquery, por ahora todo sin problema, hasta que quiero modificar un campo que tiene el signo de pesos $ para que cuando exporta el archivo no me tenga que preocupar por el signo. Me base en el ejemplo que se encuentra en la documentacion para el formateo de columnas, pero me regresa el texto en HTML tal cual se encuentra en el navegador, mientras que en el ejemplo no es así.

El código que use para formatear es el siguiente:

dom: 'Bfrtip',
buttons: [
    {
        extend: 'excelHtml5',
        text: 'Descargar en excel',
        exportOptions: {
            columns: [ 0, 1, 2, 5, 6, 7, 8, 11, 12 ],
            format: {
                body: function ( data, row, column, node ) {
                    return column === 5 ?
                        data.replace( /[$,]/g, '' ) :
                        data;
                }
            }
        }
    }
]  

Adjunto imagenes de los resultados:

Tabla en HTML: Tabla en HTML

Resultado sin formatear: Resultado sin formatear

Resultado despues de poner el código de formatear: Resultado despues de formatear

1 respuesta 1

0

Estuve probando tu código y detecté 2 cosas:

1.- Respecto al campo al que deseas removerle el signo $ (Precio de Renta), estás haciendo referencia a este con este código return column === 5, sin embargo, como estás filtrando las columnas que vas a exportar columns: [ 0, 1, 2, 5, 6, 7, 8, 11, 12 ], ahora la posición de tu columna dependerá de las columnas incluidas en tu arreglo. En este caso, la columna que nos interesa es la 5, que tiene la posición #3 en el arreglo de las columnas a exportar. Debido a esto, esa línea de código ahora quedaría así: return column === 3.

2.- Respecto a las columnas que están mostrando código HTML en el archivo de Excel, de manera predeterminada jQuery DataTable se debería encargar de esto, pero hay ocasiones (como tu caso), donde no lo hace correctamente. Para solucionar esto, debes incluir la opción orthogonal como parte de tus opciones de exportación (exportOptions) de la extensión Buttons. Por ejemplo:

exportOptions: {
    columns: [ 0, 1, 2, 5, 6, 7, 8, 11, 12 ],
    orthogonal: "myExport",
    format: {

Y al definir tu columna (por ejemplo la de Stauts) quedaría así:

{ 
    data: 'status',
    render: function(data, type, row, meta) {
        if(type = "myExport")
            return data;
        else
            return '<div class="botonActivo">' + data + '</div>';   
        }
},

Observa como el valor que definí en la opción orthogonal es el mismo que estoy ocupando en la función render cuando comparo el tipo if(type = "myExport").

Aquí te comparto un ejemplo funcional:

var jsonData = [
    {
      "id": "1",
      "status": "Activo",
      "uso": "Oficina",
      "colonia": "Los Callejones",
      "precio_venta": "$ 12,964,000.00",
      "precio_renta": "$ 118,836.67",
      "metro_construccion": "280.00",
      "metro_terreno": "0.00",
      "precio": "$ 46,300.00/m2",
      "latitud": "-25.741145", 
      "longitud": "-100.403737"
    },
    {
      "id": "2",
      "status": "Activo",
      "uso": "Oficina",
      "colonia": "Cumbres 2do Sector",
      "precio_venta": "$ 1,299,650.00",
      "precio_renta": "$ 11,913.46",
      "metro_construccion": "23.00",
      "metro_terreno": "0.00",
      "precio": "$ 56,506.52/m2",
      "latitud": "-25.741145", 
      "longitud": "-100.403737"
    },
    {
      "id": "3",
      "status": "Activo",
      "uso": "Oficina",
      "colonia": "Colinas de San Jeronimo",
      "precio_venta": "$ 1,850,000.00",
      "precio_renta": "$ 16,958.33",
      "metro_construccion": "23.00",
      "metro_terreno": "0.00",
      "precio": "$ 80,434.78/m2", 
      "latitud": "-25.741145", 
      "longitud": "-100.403737"
    }
  ];

$(document).ready(function() {
    var buttonCommon = {
        filename: "MiArchivo",
        exportOptions: {
            columns: [ 0, 1, 2, 5, 6, 7, 8, 11, 12 ],
            orthogonal: "myExport",
            format: {
                body: function ( data, row, column, node ) {
                    // Strip $ from salary column to make it numeric
                    return column === 3 ?
                        data.replace( /[$,]/g, '' ) :
                        data;
                }
            }
        }
    };
 
    $('#example').DataTable( {
        data: jsonData,
        columns: [
            { data: 'id' },
            { 
               data: 'status',
               render: function(data, type, row, meta) {
                   if(type = "myExport")
                      return data;
                   else
                      return '<div class="botonActivo">' + data + '</div>';   
               }
            },
            { 
                data: 'uso',
                render: function(data, type, row, meta) {
                   if(type = "myExport")
                      return data;
                   else
                      return '<span class="tipoedificio tipo11">' + data + '</span>';   
               }
            },
            { data: 'colonia' },
            { data: 'precio_venta' },
            { data: 'precio_renta' },
            { data: 'metro_construccion' },
            { data: 'metro_terreno' },
            { data: 'precio' },
            { 
               data: null,
               render: function(data, row, full, meta) {
                   return '<button>Ver</button>';   
               }
            },
            { 
               data: null,
               render: function(data, row, full, meta) {
                   return '<button>Cambiar</button>';   
               }
            },
            { data: 'latitud' },
            { data: 'longitud' }
        ],
        dom: 'Bfrtip',
        buttons: [
            $.extend( true, {}, buttonCommon, {
                extend: 'excelHtml5'
            })
        ]
    });
});
<link href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>

<table id="example" class="display" style="width:100%">
  <thead>
    <tr>
      <th>Id</th>
      <th>Status</th>
      <th>Uso</th>
      <th>Colonia</th>
      <th>Precio de Venta</th>
      <th>Precio de Renta</th>
      <th>M2 Construccion</th>
      <th>M2 Terreno</th>
      <th>Precio</th>
      <th>Opciones</th>
      <th></th>
      <th>Latitud</th>
      <th>Longitud</th>
    </tr>
  </thead>
</table>

Puedes encontrar mayor información respecto al uso de datos ortogonales aquí

2
  • Y como se podria hacer lo mismo, pero sin obtener los datos desde un JSON, ya que yo imprimo todas las celdas desde PHP cerrando PHP y abriendo HTML. el 23 sep. 2020 a las 16:26
  • Respecto a la primer modificación no tendría porqué afectarte hacerlo de la manera en que lo venias haciendo. Respecto a la segunda, crees que haya posibilidad de que obtengas los datos desde el Servidor vía Ajax? Podrías utilizar la funcionalidad Ajax que proveé el mismo jQuery DataTable.
    – Sagnalrac
    el 23 sep. 2020 a las 17:20

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.