1

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"}
					],
          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>

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

2
  • data:pdf es donde esta el nombre el archivo pdf?
    – juliocpiro
    Commented el 5 sept. 2017 a las 14:03
  • @juliocpiro Así es, lo solucione de esta forma. "columnDefs":[{ "targets":+3, "data":"pdf", "render" :function(data,type,row,method){ return '<a href="ver.php?pdf='+data+'" target="_blank">VER</a>' } }],
    – MoteCL
    Commented el 5 sept. 2017 a las 14:11

2 respuestas 2

1

Encontré la solución era simple al parecer.

<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"},
					{"data":"pdf"}
					],
					"columnDefs":[{
						"targets":+3,
						"data":"pdf",
						"render" :function(data,type,row,method){
					return '<a href="ver.php?pdf='+data+'" target="_blank">VER</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>

Espero que les sirve. Saludos

0

Debes de retorna html desde el servidor y luego convertir la respuesta a un objeto html con la funcion aoColumnDefs especificandole el indice de la columnas que quieres convertir a html.

Por ejemplo, si la respuesta del servidor es esta:

[
  [
    "einer",
     "S.D., R.D.",
    "<a href='perfil.php'>Ver perfil</a>",
  ],
  //...
]

Entonces en aoColumnDefs especificariamos que el indice 2 del array es la que queremos convertir a sType:html y en el callback fnRender lo convertimos:

var table = $("#dt_cliente").DataTable({

    "aoColumnDefs": [ 
        { "aTargets": [2], 
          "sType": "html", 
          "fnRender": function(o, val) { 
              return $("<div/>").html(o.aData[2]).text();
          } 
        }
    ]

   //...
});
2
  • Gracias no entiendo la primera parte de la respuesta del servidor. Investigando encontré esto, pero no creo que pueda ser la solución. "columnDefs":[{ "targets":+3, "render" :function(data,type,row,method){ return '<a href="ver.php?pdf"> k</a>' } Gracias de toda formas intentare con tu codigo
    – MoteCL
    Commented el 5 sept. 2017 a las 13:33
  • La idea es que retornes retornes el link en la respuesta del ajax. Ahora bien, datatable no lo mostrara como html sino como html puro por lo que se utiliza la funcion aoColumnDef para convertir el html puro a html donde datatable pueda mostrarlo como un link.
    – Einer
    Commented el 5 sept. 2017 a las 13:39

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.