Jquery DataTable display PDF in a row

Question

Jquery DataTable display PDF in a row

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

Good I have used Jquery DataTable works perfectly but I've been looking for the solution if there is any way to add a <a> </a> element to the table rows. In another project I have something like that.

<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']);
 ?>

And in JqueryDataTable I am using 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>

I hope you have explained to me any doubt I will be reviewing the post, kind regards.

jquery php json datatables

asked by MoteCL 05.09.2017 в 14:52

source

2 answers

Show image of Storage as background How does this slider made in pure Javascript work?

score 1 · Answer 1

I found the solution was simple apparently.

<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>

I hope it serves you. Greetings

score 0 · Answer 2

You must return html from the server and then convert the response to an html object with the function aoColumnDefs specifying the index of the columns you want to convert to html.

For example, if the server response is this:

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

Then in aoColumnDefs we would specify that the index 2 of the array is the one that we want to convert to sType:html and in the callback fnRender we convert it:

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

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

   //...
});