0

Tengo una aplicación web, la cual cuenta con una sección para sacar reportes de las llamadas que se hacen en un call center. Mi sitio web está hecho con JSPs y estoy usando el plugin de Datatables para mostrar la información de los reportes, poder filtrarlos, paginarlos, ordenarlos y darle estilo a las tablas. El problema es que por la gran cantidad de llamadas que se tienen (entrantes: 70.000, salientes: 90.000, total: 160.000) mis tablas tardan demasiado en cargar.

Originalmente este era mi código (reportes.jsp):

<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="control.Llamadas"%>
<jsp:useBean id="recupera" scope="request" class="datos.Conexion"/>

<%
HttpSession objSesion = request.getSession();
objSesion.setMaxInactiveInterval(-1);

int tipoRep = 0;

ArrayList datos, datos2, datos3 = new ArrayList();

%>
<!DOCTYPE html>
<html>
<head>
    <title>Reportes</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
    <!--Estilo, paginación y buscador de las tablas -->
    <link href="../css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
    <script src="../js/jquery.dataTables.min.js" type="text/javascript"></script>
    <!--Estilos-->
    <link href="../css/generalstyle.css" rel="stylesheet" type="text/css"/>
    <link href="../css/menu.css" rel="stylesheet" type="text/css"/>
    <!-- Estilo responsivo con bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!--Buscador para selectores-->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
    <!--CSV -->
    <script src="../js/jquery.toCSV.js" type="text/javascript"></script>
    <script src="../js/jquery.toCSV.min.js" type="text/javascript"></script>
    <!-- Mis Scripts-->
    <script src="../js/scripts.js" type="text/javascript"></script>
    <script src="../js/ajax_tarificador.js" type="text/javascript"></script>
    <!--Mis iconos Fontawesome-->
    <script src="https://kit.fontawesome.com/58335b988c.js" crossorigin="anonymous"></script>
    
            
    <script>
        $(document).ready( function () {
            $('.mis-tablas').DataTable({
                order: [[5, 'desc']],
                //ordering: false
            });
        } );
    </script>   
</head>

<body>
   
    <main class="col-md-12">
        
    <div class="col-md-12 titulos">
        <h1>Reportes</h1>
    </div>
    
    <br>
    
    <div class="col-md-12 form-group form-inline">
        <div class="col-md-4 form-inline">
            <input type="radio" name="operacion" value="1" onchange="muestraReportes(this.value);"/>
            <label>Todas</label>
        </div>
        <div class="col-md-4 form-inline">
            <input type="radio" name="operacion" value="2" onchange="muestraReportes(this.value);"/>
            <label>Entrantes</label>
        </div>
        <div class="col-md-4 form-inline">
            <input type="radio" name="operacion" value="3" onchange="muestraReportes(this.value);"/>
            <label>Salientes</label>
        </div>
    </div>
    
    <!-- TODAS -->
    <div id="todas" style="display: none">
        <%
            tipoRep = 1;

            recupera.conectar();
            datos = recupera.obtenReporte(tipoRep);
            recupera.desconectar();
        %>
        <table style="text-align: center" id="tabla_todas" class=" mis-tablas display table table-striped table-bordered table-hover col-md-12" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Registro</th>
                    <th>Id. Llamada</th>
                    <th>Origen</th>
                    <th>Destino</th>
                    <th>Duración en seg.</th>
                    <th>Fecha de Llamada</th>
                    <th>Costo</th>
                    <th>Tipo de llamada</th>
                    <th>Troncal</th>
                    <th>Persona</th>
                    <th>Departamento</th>
                </tr>
            </thead>
            <tbody>                                                                            
                <%
                    if(datos.size() > 0){
                        for (int i = 0; i < datos.size(); i++) {
                            Llamadas llam = (Llamadas) datos.get(i);
                            int registro = llam.getIdLlamada();
                            String iddellamada = llam.getIddellamada();
                            String origen = llam.getOrigen();
                            String destino = llam.getDestino();
                            int duracion = llam.getDuracionTotal();
                            String fechallamada = llam.getFechaLlamada();
                            double costo = llam.getCostoTotal();
                            String tipo = llam.getTipoLlamada();
                            
                            if(tipo == null){
                                tipo = "--";
                            }
                            
                            String troncal = llam.getNombreTroncal();
                            if (troncal == null){
                                troncal = "--";
                }
                            String persona = llam.getPersona();
                            if(persona == null){
                                persona = "--";
                            }
                            String dep = llam.getDepartamento();
                            if(dep == null){
                                dep = "--";  
                            }
                                    
                %>
                <tr>
                    <td><%=registro%></td>
                    <td><%=iddellamada%></td>
                    <td><%=origen%></td>
                    <td><%=destino%></td>
                    <td><%=duracion%></td>
                    <td><%=fechallamada%></td>
                    <td><%=costo%></td>
                    <td><%=tipo%></td>
                    <td><%=troncal%></td>
                    <td><%=persona%></td>
                    <td><%=dep%></td>
                </tr>
                <%
                        }
                %>
            </tbody>
        </table>
            
        <div class="col-md-12 text-center">
            <ul class="pagination pagination-lg pager" id="page"></ul>
        </div>
            
            
        <%
                    }else {
        %>

        <div class="alert alert-dismissible alert-info">
            <button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button>
            No hay informaci&oacute;n disponible para la consulta realizada.
        </div>

        <%
                    }
        %>
    </div>
    
    <!-- ENTRANTES -->
    <div id="entrantes" style="display: none">
        <%
            tipoRep = 2;

            recupera.conectar();
            datos2 = recupera.obtenReporte(tipoRep);
            recupera.desconectar();
        %>
        <table style="text-align: center" id="tabla_entrantes" class="mis-tablas display table table-striped table-bordered table-hover col-md-12" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Registro</th>
                    <th>Id. Llamada</th>
                    <th>Origen</th>
                    <th>Destino</th>
                    <th>Duración en seg.</th>
                    <th>Fecha de Llamada</th>
                    <th>Costo</th>
                    <th>Tipo de llamada</th>
                    <th>Troncal</th>
                    <th>Persona</th>
                    <th>Departamento</th>
                </tr>
            </thead>
            <tbody>                                                                            
                <%
                    if(datos2.size() > 0){
                        for (int i = 0; i < datos2.size(); i++) {
                            Llamadas llam = (Llamadas) datos2.get(i);
                            int registro = llam.getIdLlamada();
                            String iddellamada = llam.getIddellamada();
                            String origen = llam.getOrigen();
                            String destino = llam.getDestino();
                            int duracion = llam.getDuracionTotal();
                            String fechallamada = llam.getFechaLlamada();
                            double costo = llam.getCostoTotal();
                            String tipo = llam.getTipoLlamada();
                            
                            if(tipo == null){
                                tipo = "--";
                            }
                            
                            String troncal = llam.getNombreTroncal();
                            if (troncal == null){
                                troncal = "--";
                }
                            String persona = llam.getPersona();
                            if(persona == null){
                                persona = "--";
                            }
                            String dep = llam.getDepartamento();
                            if(dep == null){
                                dep = "--";  
                            }
                                    
                %>
                <tr>
                    <td><%=registro%></td>
                    <td><%=iddellamada%></td>
                    <td><%=origen%></td>
                    <td><%=destino%></td>
                    <td><%=duracion%></td>
                    <td><%=fechallamada%></td>
                    <td><%=costo%></td>
                    <td><%=tipo%></td>
                    <td><%=troncal%></td>
                    <td><%=persona%></td>
                    <td><%=dep%></td>
                </tr>
                <%
                        }
                %>
            </tbody>
        </table>
            
        <div class="col-md-12 text-center">
            <ul class="pagination pagination-lg pager" id="page"></ul>
        </div>
            
        <%
            }else {
        %>

        <div class="alert alert-dismissible alert-info">
            <button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button>
            No hay informaci&oacute;n disponible para la consulta realizada.
        </div>

        <%
            }
        %>
    </div>
    
    <!-- SALIENTES -->
    <div id="salientes" style="display: none">
        <%
            tipoRep = 3;

            recupera.conectar();
            datos3 = recupera.obtenReporte(tipoRep);
            recupera.desconectar();
        %>
        <table style="text-align: center" id="tabla_salientes" class="mis-tablas display table table-striped table-bordered table-hover col-md-12" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Registro</th>
                    <th>Id. Llamada</th>
                    <th>Origen</th>
                    <th>Destino</th>
                    <th>Duración en seg.</th>
                    <th>Fecha de Llamada</th>
                    <th>Costo</th>
                    <th>Tipo de llamada</th>
                    <th>Troncal</th>
                    <th>Persona</th>
                    <th>Departamento</th>
                </tr>
            </thead>
            <tbody>                                                                            
                <%
                    if(datos3.size() > 0){
                        for (int i = 0; i < datos3.size(); i++) {
                            Llamadas llam = (Llamadas) datos3.get(i);
                            int registro = llam.getIdLlamada();
                            String iddellamada = llam.getIddellamada();
                            String origen = llam.getOrigen();
                            String destino = llam.getDestino();
                            int duracion = llam.getDuracionTotal();
                            String fechallamada = llam.getFechaLlamada();
                            double costo = llam.getCostoTotal();
                            String tipo = llam.getTipoLlamada();
                            
                            if(tipo == null){
                                tipo = "--";
                            }
                            
                            String troncal = llam.getNombreTroncal();
                            if (troncal == null){
                                troncal = "--";
                }
                            String persona = llam.getPersona();
                            if(persona == null){
                                persona = "--";
                            }
                            String dep = llam.getDepartamento();
                            if(dep == null){
                                dep = "--";  
                            }
                                    
                %>
                <tr>
                    <td><%=registro%></td>
                    <td><%=iddellamada%></td>
                    <td><%=origen%></td>
                    <td><%=destino%></td>
                    <td><%=duracion%></td>
                    <td><%=fechallamada%></td>
                    <td><%=costo%></td>
                    <td><%=tipo%></td>
                    <td><%=troncal%></td>
                    <td><%=persona%></td>
                    <td><%=dep%></td>
                </tr>
                <%
                        }
                %>
            </tbody>
        </table>
            
        <div class="col-md-12 text-center">
            <ul class="pagination pagination-lg pager" id="page"></ul>
        </div>
            
        <%
                    }else {
        %>

        <div class="alert alert-dismissible alert-info">
            <button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button>
            No hay informaci&oacute;n disponible para la consulta realizada.
        </div>

        <%
                    }
        %>
    </div>
    </main>
    <script>
     function muestraReportes(opc) {
      if (opc === "1") {
       document.getElementById("todas").style.display = "block";
       document.getElementById("entrantes").style.display = "none";
       document.getElementById("salientes").style.display = "none";

      } else {
       if (opc === "2") {
        document.getElementById("todas").style.display = "none";
        document.getElementById("entrantes").style.display = "block";
        document.getElementById("salientes").style.display = "none";

       } else {
        if (opc === "3") {
            document.getElementById("todas").style.display = "none";
            document.getElementById("entrantes").style.display = "none";
            document.getElementById("salientes").style.display = "block";

        } else {
            document.getElementById("todas").style.display = "none";
            document.getElementById("entrantes").style.display = "none";
            document.getElementById("salientes").style.display = "none";
           
        }
        }
        }
        }
    </script>
</body>
</html>

De esta manera a veces muestra los registros después de 10 min o a veces sale el error net::ERR_INCOMPLETE_CHUNKED_ENCODING 200 (OK) porque carga los 320.000 registros al cargar la pagina. Pensando en resolver esto decidí usar Ajax para que cuando se seleccione el radioboton de las llamadas que se desean consultar (Todas, Entrantes, Salientes) se pase el valor de ese radioboton y unicamente se procese esa solicitud quedando el código de reportes.jsp así:

<%@page import="control.Persona"%>
<%@page import="control.Extensiones"%>
<%@page import="control.Departamento"%>
<%@page import="java.util.ArrayList"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="control.Llamadas"%>
<jsp:useBean id="recupera" scope="request" class="datos.Conexion" />
<%
    HttpSession objSesion = request.getSession();
    objSesion.setMaxInactiveInterval(-1);

    int tipoRep = 0;
    
    ArrayList datos, datos2, datos3 = new ArrayList();

%>
<!DOCTYPE html>
<html>
    <head>
        <title>Reportes</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>
        <!--Estilo, paginación y buscador de las tablas -->
        <link href="../css/jquery.dataTables.min.css" rel="stylesheet" type="text/css"/>
        <script src="../js/jquery.dataTables.min.js" type="text/javascript"></script>
        <!--Estilos-->
        <link href="../css/generalstyle.css" rel="stylesheet" type="text/css"/>
        <link href="../css/menu.css" rel="stylesheet" type="text/css"/>
        <!-- Estilo responsivo con bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <!--Buscador para selectores-->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
        <!--CSV -->
        <script src="../js/jquery.toCSV.js" type="text/javascript"></script>
        <script src="../js/jquery.toCSV.min.js" type="text/javascript"></script>
        <!-- Mis Scripts-->
        <script src="../js/scripts.js" type="text/javascript"></script>
        <script src="../js/ajax_tarificador.js" type="text/javascript"></script>
        <!--Mis iconos Fontawesome-->
        <script src="https://kit.fontawesome.com/58335b988c.js" crossorigin="anonymous"></script>
        
                
        <script>
            $(document).ready( function () {
                $('.mis-tablas').DataTable({
                    order: [[5, 'desc']],
                    //ordering: false
                });
            } );
        </script>   
    </head>
    
    <body>
       
        <main class="col-md-12">
            
        <div class="col-md-12 titulos">
            <h1>Reportes</h1>
        </div>
        
        <div class="col-md-12 form-group form-inline">
            <div class="col-md-4 form-inline">
                <input type="radio" name="operacion" value="1" onchange="obtenReportesTodas(this.value);"
                <label>Todas</label>
            </div>
            <div class="col-md-4 form-inline">
                <input type="radio" name="operacion" value="2" onchange="obtenReportesEntrantes(this.value);"/>
                <label>Entrantes</label>
            </div>
            <div class="col-md-4 form-inline">
                <input type="radio" name="operacion" value="3" onchange="obtenReportesSalientes(this.value);"/>
                <label>Salientes</label>
            </div>
        </div>
        
        <!-- TODAS -->
        <div id="todas"></div>
        
       <!-- ENTRANTES -->
        <div id="entrantes"></div>
        
        <!-- SALIENTES -->
        <div id="salientes"></div>
        
        </main>
        <script>
         function obtenReportesTodas(tipoReporte){
          xmlHttp = new XMLHttpRequest();

          var url = "ajax_reportes_todas.jsp";

          url = url + "?tipoReporte=" + tipoReporte;        

          xmlHttp.onreadystatechange = muestra_reporte_todas;
          xmlHttp.open("GET", url, true);
          xmlHttp.send(null);
         }

         function muestra_reporte_todas() {
           if (xmlHttp.readyState === 4) {
            document.getElementById("todas").innerHTML =  xmlHttp.responseText; 
           }
         }

         function obtenReportesEntrantes(tipoReporte){
           xmlHttp2 = new XMLHttpRequest();

           var url = "ajax_reportes_entrantes.jsp";

           url = url + "?tipoReporte=" + tipoReporte;        

           xmlHttp2.onreadystatechange = muestra_reporte_entrantes;
           xmlHttp2.open("GET", url, true);
           xmlHttp2.send(null);
          }

          function muestra_reporte_entrantes() {
            if (xmlHttp2.readyState === 4) {
             document.getElementById("entrantes").innerHTML = xmlHttp2.responseText; 
            }
          }

          function obtenReportesSalientes(tipoReporte){
            xmlHttp3 = new XMLHttpRequest();

            var url = "ajax_reportes_salientes.jsp";

            url = url + "?tipoReporte=" + tipoReporte;        

            xmlHttp3.onreadystatechange = muestra_reporte_salientes;
            xmlHttp3.open("GET", url, true);
            xmlHttp3.send(null);
          }

          function muestra_reporte_salientes() {
            if (xmlHttp3.readyState === 4) {
              document.getElementById("salientes").innerHTML = xmlHttp3.responseText; 
            }
          }
        </script>
    </body>
</html>

Donde cada uno de mis ajax jsp realizan la consulta correspondiente y arman la tabla que se mostrará en el div correspondiente del reportes.jsp

Agrego el código de uno de eso archivos:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@page import="java.util.ArrayList"%>
<%@page import="control.Llamadas"%>
<jsp:useBean id="recupera" scope="request" class="datos.Conexion" />
<%
    ArrayList datos = new ArrayList();
    int tipoRep = Integer.parseInt(request.getParameter("tipoReporte")); 

    recupera.conectar();
    datos = recupera.obtenReporte(tipoRep);
    recupera.desconectar();
%>
<table style="text-align: center" id="tabla_todas" class=" mis-tablas display table table-striped table-bordered table-hover col-md-12" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Registro</th>
            <th>Id. Llamada</th>
            <th>Origen</th>
            <th>Destino</th>
            <th>Duración en seg.</th>
            <th>Fecha de Llamada</th>
            <th>Costo</th>
            <th>Tipo de llamada</th>
            <th>Troncal</th>
            <th>Persona</th>
            <th>Departamento</th>
        </tr>
    </thead>
    <tbody>                                                                            
        <%
            if (datos.size() > 0) {
                for (int i = 0; i < datos.size(); i++) {
                    Llamadas llam = (Llamadas) datos.get(i);
                    int registro = llam.getIdLlamada();
                    String iddellamada = llam.getIddellamada();
                    String origen = llam.getOrigen();
                    String destino = llam.getDestino();
                    int duracion = llam.getDuracionTotal();
                    String fechallamada = llam.getFechaLlamada();
                    double costo = llam.getCostoTotal();
                    String tipo = llam.getTipoLlamada();

                    if (tipo == null) {
                        tipo = "--";
                    }

                    String troncal = llam.getNombreTroncal();
                    if (troncal == null) {
                        troncal = "--";
                    }
                    String persona = llam.getPersona();
                    if (persona == null) {
                        persona = "--";
                    }
                    String dep = llam.getDepartamento();
                    if (dep == null) {
                        dep = "--";
                    }

        %>
        <tr>
            <td><%=registro%></td>
            <td><%=iddellamada%></td>
            <td><%=origen%></td>
            <td><%=destino%></td>
            <td><%=duracion%></td>
            <td><%=fechallamada%></td>
            <td><%=costo%></td>
            <td><%=tipo%></td>
            <td><%=troncal%></td>
            <td><%=persona%></td>
            <td><%=dep%></td>
        </tr>
        <%
            }
        %>
    </tbody>
</table>

<div class="col-md-12 text-center">
    <ul class="pagination pagination-lg pager" id="page"></ul>
</div>


<%
} else {
%>

<div class="alert alert-dismissible alert-info">
    <button type="button" class="close" data-dismiss="alert"><i class="fa fa-remove"></i></button>
    No hay informaci&oacute;n disponible para la consulta realizada.
</div>

<%
    }
%>

Sin embargo, al hacerlo de esta manera no carga los carga las funciones de Datatables, no permite realizar filtrados y no pagina los registros, sólo le da un poco de estilo a la tabla y de todas maneras tarda en cargar como 5 minutos. Cabe mencionar que el query que obtiene los registros de la BD no es el problema ya que obtiene los resultados en 1,015 seg. El problema está al tratar de mostrarlos en la pagina web.

Me ayudaría mucho cualquier idea para la pagina cargue más rápido, es la primera vez que trabajo con tantos datos. Desafortunadamente limitar la cantidad de registros a mostrar no es una opción ya que se me pidió visualizar todos los registros de un año.

2
  • 1
    Estás armando todo el HTML de la tabla del lado del servidor. Podrías reducir drásticamente el tiempo si solo envías un objeto JSON para que DataTable se encargue de crear el HTML necesario en el navegador. Ejemplo: editor.datatables.net/examples/advanced/deepObjects.html
    – Triby
    el 17 feb. 2021 a las 22:14
  • 1
    Hola Nancy, aunque esta pregunta se ajusta a la temática del sitio, ha sido marcada para revisión por los moderadores por su extensión. No hace falta que cambies nada en esta publicación, pero para futuras preguntas, trata de limitar el código compartido al mínimo, para que sea más fácil ayudarte. Lee sobre cómo crear un ejemplo mínimo verificable en el centro de ayuda.
    – Alvaro Montoro
    el 18 feb. 2021 a las 4:22

1 respuesta 1

0

Como menciona el compañero, te recomiendo trabajar con JSON. Ya que al hacer la siguiente iteración

if (datos.size() > 0) {
            for (int i = 0; i < datos.size(); i++) {
            ...
            <tr>/tr>
            ...

haces forzar al servidor recorriendo el array para crear HTML. Y cuando esto envié al lado cliente verás que tendrás un pequeño parón ya que está renderizando un gran bloque de HTML.

Si retornas JSON y le pasas al DataTable este se encarga de crear HTML y el renderizado en el cliente. El siguiente ejemplo simula 5k filas, utilicé el API de http://jsonplaceholder y el método fetch para traer la data.

En una parte verás render: function() {} esto te permite transformar la data, como crear un botón, imagen, etc. Hay muchas más métodos en la documentación ✅.

//Configuración de DataTable
function pintarDatatable(dataResult, columns) {
    $("#tabla_todas").DataTable({
        data: dataResult,
        columnDefs: columns,
        aaSorting: [],
        pageLength: 25
    })
}


async function datos() {
    const data = await fetch("https://jsonplaceholder.typicode.com/photos")
        .then(value => value.json())
        .then(value => value)

    //ESTRUCTURA JSON QUE DEVUELVE EL API.
    /*
    [
        {
          "albumId": 1,
          "id": 1,
          "title": "accusamus beatae ad facilis cum similique qui sunt",
          "url": "https://via.placeholder.com/600/92c952",
          "thumbnailUrl": "https://via.placeholder.com/150/92c952"
        },
    */

    //targets: position
    //Aquí data:"key". Ver arriba
    //En "render: callback " puedes tranformar la data.
    const columns = [{
            targets: 0,
            title: "Album Id",
            data: "albumId"
        },
        {
            targets: 1,
            title: "ID",
            data: "id",
            render : (data,type,r,m) => {
                return (type == "display") ? `<button class="btn btn-primary">${data}</button>` : data
            }
        },
        {
            targets: 2,
            title: "Titulo",
            data: "title",
            render : (data,type,r,m) => {
                return (type == "display") ? `<strong>${data}</strong>` : data
            }
        },
        {
            targets: 3,
            title: "URL",
            data: "url"
        },
        {
            targets: 4,
            title: "Image",
            data: "thumbnailUrl",
            render : (data,type,r,m) => {
                return (type == "display") ? `<img src="${data}"/>` : data
            }
        }
    ]
    pintarDatatable(data, columns)
}

datos()
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css" integrity="sha512-P5MgMn1jBN01asBgU0z60Qk4QxiXo86+wlFahKrsQf37c9cro517WzVSPPV1tDKzhku2iJ2FVgL67wG03SGnNA==" crossorigin="anonymous" />

<link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/css/dataTables.bootstrap4.min.css"
        integrity="sha512-PT0RvABaDhDQugEbpNMwgYBCnGCiTZMh9yOzUsJHDgl/dMhD9yjHAwoumnUk3JydV3QTcIkNDuN40CJxik5+WQ=="
        crossorigin="anonymous" />
        
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/jquery.dataTables.min.js"
        integrity="sha512-BkpSL20WETFylMrcirBahHfSnY++H2O1W+UnEEO4yNIl+jI2+zowyoGJpbtk6bx97fBXf++WJHSSK2MV4ghPcg=="
        crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.21/js/dataTables.bootstrap4.min.js" integrity="sha512-    OQlawZneA7zzfI6B1n1tjUuo3C5mtYuAWpQdg+iI9mkDoo7iFzTqnQHf+K5ThOWNJ9AbXL4+ZDwH7ykySPQc+A==" crossorigin="anonymous"></script>        


<table style="text-align: center" id="tabla_todas" class=" mis-tablas display table table-striped table-bordered table-hover col-md-12"  cellspacing="0"
 width="100%"></table>

Tu Respuesta

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

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