Skip to main content
se añadieron 644 caracteres en el cuerpo
Origen Enlace
MoteCL
  • 862
  • 2
  • 16
  • 43
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Buttons DataTables -->
    <link rel="stylesheet" href="css/buttons.bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

</head>
<body>

    <div class="row">
        <div id="cuadro1" class="col-sm-12 col-md-12 col-lg-12">
            <div class="col-sm-offset-2 col-sm-8">
                <h3 class="text-center"> <small class="mensaje"></small></h3>
            </div>
            <div class="table-responsive col-sm-12">        
                <table id="dt_cliente" class="table table-bordered table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>                                
                            <th>N° Decreto</th>
                            <th>Fecha</th>
                            <th>Materia</th>
                            <th>PDF</th>
                            <th></th>                                           
                        </tr>
                    </thead>                    
                </table>
            </div>          
        </div>      
    </div>
    <div>
        
    </div>
    
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.js"></script>
    <!--botones DataTables-->   
    <script src="js/dataTables.buttons.min.js"></script>
    <script src="js/buttons.bootstrap.min.js"></script>
    <script src="js/vfs_fonts.js"></script>
    <!--Librerias para botones de exportación-->
   

    <script>        
        $(document).on("ready", function(){
            listar();
        });
        $("#btn_listar").on("click",function(){
                listar();
        });
        var listar = function(){
            var table = $("#dt_cliente").DataTable({
                "destroy": true,
                "ajax":{
                    "method": "POST",
                    "url" : "listar.php"
                },
                "columns":[
                    {"data":"decreto_id"},
                    {"data":"anno"},
                    {"data":"materia"},
   // Aqui Obtengo el nombre de archivo  pero deseo 
  //poder verlo obtenerlo para poder verlo.
                    {"data":"pdf"}
                    ],
          var listar = function(){
            var table = $("#dt_cliente").DataTable({
                "destroy": true,
                "ajax":{
                    "method": "POST",
                    "url" : "listar.php"
                },
                "columns":[
                    {"data":"decreto_id"},
                    {"data":"anno"},
                    {"data":"materia"},
                    {"data":"pdf"}
                    ],
                    "columnDefs":[{
                        "targets":+3,
                        "render" :function(data,type,row,method){
            //Aqui obtener el nombre del archivo PDF
                            return '<a>Link</a>'
                        }
                }],
                    "language": idioma_espanol
            });
        }
        var idioma_espanol = {
    "sProcessing":     "Procesando...",
    "sLengthMenu":     "Mostrar _MENU_ registros",
    "sZeroRecords":    "No se encontraron resultados",
    "sEmptyTable":     "Ningún dato disponible en esta tabla",
    "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
    "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
    "sInfoPostFix":    "",
    "sSearch":         "Buscar:",
    "sUrl":            "",
    "sInfoThousands":  ",",
    "sLoadingRecords": "Cargando...",
    "oPaginate": {
        "sFirst":    "Primero",
        "sLast":     "Último",
        "sNext":     "Siguiente",
        "sPrevious": "Anterior"
    },
    "oAria": {
        "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
    }
}
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Buttons DataTables -->
    <link rel="stylesheet" href="css/buttons.bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

</head>
<body>

    <div class="row">
        <div id="cuadro1" class="col-sm-12 col-md-12 col-lg-12">
            <div class="col-sm-offset-2 col-sm-8">
                <h3 class="text-center"> <small class="mensaje"></small></h3>
            </div>
            <div class="table-responsive col-sm-12">        
                <table id="dt_cliente" class="table table-bordered table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>                                
                            <th>N° Decreto</th>
                            <th>Fecha</th>
                            <th>Materia</th>
                            <th>PDF</th>
                            <th></th>                                           
                        </tr>
                    </thead>                    
                </table>
            </div>          
        </div>      
    </div>
    <div>
        
    </div>
    
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.js"></script>
    <!--botones DataTables-->   
    <script src="js/dataTables.buttons.min.js"></script>
    <script src="js/buttons.bootstrap.min.js"></script>
    <script src="js/vfs_fonts.js"></script>
    <!--Librerias para botones de exportación-->
   

    <script>        
        $(document).on("ready", function(){
            listar();
        });
        $("#btn_listar").on("click",function(){
                listar();
        });
        var listar = function(){
            var table = $("#dt_cliente").DataTable({
                "destroy": true,
                "ajax":{
                    "method": "POST",
                    "url" : "listar.php"
                },
                "columns":[
                    {"data":"decreto_id"},
                    {"data":"anno"},
                    {"data":"materia"},
   // Aqui Obtengo el nombre de archivo  pero deseo 
  //poder verlo obtenerlo para poder verlo.
                    {"data":"pdf"}
                    ],
                    "language": idioma_espanol
            });
        }
        var idioma_espanol = {
    "sProcessing":     "Procesando...",
    "sLengthMenu":     "Mostrar _MENU_ registros",
    "sZeroRecords":    "No se encontraron resultados",
    "sEmptyTable":     "Ningún dato disponible en esta tabla",
    "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
    "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
    "sInfoPostFix":    "",
    "sSearch":         "Buscar:",
    "sUrl":            "",
    "sInfoThousands":  ",",
    "sLoadingRecords": "Cargando...",
    "oPaginate": {
        "sFirst":    "Primero",
        "sLast":     "Último",
        "sNext":     "Siguiente",
        "sPrevious": "Anterior"
    },
    "oAria": {
        "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
    }
}
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Buttons DataTables -->
    <link rel="stylesheet" href="css/buttons.bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

</head>
<body>

    <div class="row">
        <div id="cuadro1" class="col-sm-12 col-md-12 col-lg-12">
            <div class="col-sm-offset-2 col-sm-8">
                <h3 class="text-center"> <small class="mensaje"></small></h3>
            </div>
            <div class="table-responsive col-sm-12">        
                <table id="dt_cliente" class="table table-bordered table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>                                
                            <th>N° Decreto</th>
                            <th>Fecha</th>
                            <th>Materia</th>
                            <th>PDF</th>
                            <th></th>                                           
                        </tr>
                    </thead>                    
                </table>
            </div>          
        </div>      
    </div>
    <div>
        
    </div>
    
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.js"></script>
    <!--botones DataTables-->   
    <script src="js/dataTables.buttons.min.js"></script>
    <script src="js/buttons.bootstrap.min.js"></script>
    <script src="js/vfs_fonts.js"></script>
    <!--Librerias para botones de exportación-->
   

    <script>        
        $(document).on("ready", function(){
            listar();
        });
        $("#btn_listar").on("click",function(){
                listar();
        });
        var listar = function(){
            var table = $("#dt_cliente").DataTable({
                "destroy": true,
                "ajax":{
                    "method": "POST",
                    "url" : "listar.php"
                },
                "columns":[
                    {"data":"decreto_id"},
                    {"data":"anno"},
                    {"data":"materia"},
   // Aqui Obtengo el nombre de archivo  pero deseo 
  //poder verlo obtenerlo para poder verlo.
                    {"data":"pdf"}
                    ],
          var listar = function(){
            var table = $("#dt_cliente").DataTable({
                "destroy": true,
                "ajax":{
                    "method": "POST",
                    "url" : "listar.php"
                },
                "columns":[
                    {"data":"decreto_id"},
                    {"data":"anno"},
                    {"data":"materia"},
                    {"data":"pdf"}
                    ],
                    "columnDefs":[{
                        "targets":+3,
                        "render" :function(data,type,row,method){
            //Aqui obtener el nombre del archivo PDF
                            return '<a>Link</a>'
                        }
                }],
                    "language": idioma_espanol
        }
        var idioma_espanol = {
    "sProcessing":     "Procesando...",
    "sLengthMenu":     "Mostrar _MENU_ registros",
    "sZeroRecords":    "No se encontraron resultados",
    "sEmptyTable":     "Ningún dato disponible en esta tabla",
    "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
    "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
    "sInfoPostFix":    "",
    "sSearch":         "Buscar:",
    "sUrl":            "",
    "sInfoThousands":  ",",
    "sLoadingRecords": "Cargando...",
    "oPaginate": {
        "sFirst":    "Primero",
        "sLast":     "Último",
        "sNext":     "Siguiente",
        "sPrevious": "Anterior"
    },
    "oAria": {
        "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
    }
}
    </script>
</body>
</html>
Origen Enlace
MoteCL
  • 862
  • 2
  • 16
  • 43

Jquery DataTable mostar PDF en fila

Buenas he utilizando Jquery DataTable funciona perfectamente pero de he estado buscando la solución si existe alguna forma de poder agregar un elemento <a> </a> a las fila de la tabla. En otro proyecto tengo algo así.

<td class="text-center"><a href="verpdf.php?archivo=<?php
        echo $row['archivo'] ?>" target="_blank"></a></td>

verpdf.php

<body>
<?php 
header('Content-Description: File Transfer');
header("Content-type: application/pdf");
readfile('file/'.$_GET['archivo']);
 ?>
 

Y en JqueryDataTable estoy utilizando JSON

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/dataTables.bootstrap.min.css">
    <link rel="stylesheet" href="css/estilos.css">
    <!-- Buttons DataTables -->
    <link rel="stylesheet" href="css/buttons.bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">

</head>
<body>

    <div class="row">
        <div id="cuadro1" class="col-sm-12 col-md-12 col-lg-12">
            <div class="col-sm-offset-2 col-sm-8">
                <h3 class="text-center"> <small class="mensaje"></small></h3>
            </div>
            <div class="table-responsive col-sm-12">        
                <table id="dt_cliente" class="table table-bordered table-hover" cellspacing="0" width="100%">
                    <thead>
                        <tr>                                
                            <th>N° Decreto</th>
                            <th>Fecha</th>
                            <th>Materia</th>
                            <th>PDF</th>
                            <th></th>                                           
                        </tr>
                    </thead>                    
                </table>
            </div>          
        </div>      
    </div>
    <div>
        
    </div>
    
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery.dataTables.min.js"></script>
    <script src="js/dataTables.bootstrap.js"></script>
    <!--botones DataTables-->   
    <script src="js/dataTables.buttons.min.js"></script>
    <script src="js/buttons.bootstrap.min.js"></script>
    <script src="js/vfs_fonts.js"></script>
    <!--Librerias para botones de exportación-->
   

    <script>        
        $(document).on("ready", function(){
            listar();
        });
        $("#btn_listar").on("click",function(){
                listar();
        });
        var listar = function(){
            var table = $("#dt_cliente").DataTable({
                "destroy": true,
                "ajax":{
                    "method": "POST",
                    "url" : "listar.php"
                },
                "columns":[
                    {"data":"decreto_id"},
                    {"data":"anno"},
                    {"data":"materia"},
   // Aqui Obtengo el nombre de archivo  pero deseo 
  //poder verlo obtenerlo para poder verlo.
                    {"data":"pdf"}
                    ],
                    "language": idioma_espanol
            });
        }
        var idioma_espanol = {
    "sProcessing":     "Procesando...",
    "sLengthMenu":     "Mostrar _MENU_ registros",
    "sZeroRecords":    "No se encontraron resultados",
    "sEmptyTable":     "Ningún dato disponible en esta tabla",
    "sInfo":           "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
    "sInfoEmpty":      "Mostrando registros del 0 al 0 de un total de 0 registros",
    "sInfoFiltered":   "(filtrado de un total de _MAX_ registros)",
    "sInfoPostFix":    "",
    "sSearch":         "Buscar:",
    "sUrl":            "",
    "sInfoThousands":  ",",
    "sLoadingRecords": "Cargando...",
    "oPaginate": {
        "sFirst":    "Primero",
        "sLast":     "Último",
        "sNext":     "Siguiente",
        "sPrevious": "Anterior"
    },
    "oAria": {
        "sSortAscending":  ": Activar para ordenar la columna de manera ascendente",
        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
    }
}
    </script>
</body>
</html>

Espero haberme explicado bien cualquier duda estaré revisando el post, saludos cordiales.