Place URL in a datatable field

0

How could a url be placed in a specific field of a DataTable? Let's suppose for example that I have a table where I show the personal data of a person and I want the field with its address to be clickable and direct me to a specific link. For the time being I can get the information displayed and ordered in the following way:

$(document).ready(function() {

    $("tr:odd").css("background-color", "#fff"); // filas impares
    $("tr:even").css("background-color", "#dddddd"); // filas pares
    $('#mitabla').DataTable({

        "columns": [ //ANCHO
            {
                "width": "5%"
            }, //nombres
            {
                "width": "5%"
            }, //apellidos
            {
                "width": "5%"
            }, //cedula
            {
                "width": "5%"
            }, //telefono
            {
                "visible": false,
                "width": "11%"
            }, //ID
            {
                "width": "5%"
            }, //acciones
        ],

        "order": [
            [0, "asc"]
        ],
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "server_process.php",

        "dom": "<'row'<'col-sm-3'l><'col-sm-6 text-center'B><'col-sm-3'f>>" +
            "<'row'<'col-sm-12'tr>>" +
            "<'row'<'col-sm-5'i><'col-sm-7'p>>",

        "language": {

            "lengthMenu": "Mostrar _MENU_ registros por pagina",
            "info": "Mostrando pagina _PAGE_ de _PAGES_",
            "infoEmpty": "No hay registros disponibles",
            "infoFiltered": "(filtrada de _MAX_ registros)",
            "loadingRecords": "Cargando...",
            "processing": "Procesando...",
            "search": "Buscar:",
            "zeroRecords": "No se encontraron registros coincidentes",

            "buttons": {
                "colvis": "OCULTAR COLUMNAS",
            },


            "paginate": {
                "next": "Siguiente",
                "previous": "Anterior"
            }

        },

        buttons: [
            'colvis'
        ],

        columnDefs: [{
            visible: false
        }]
    });
});
    
asked by rodrigo2324 13.08.2017 в 05:34
source

1 answer

0

You can use the columnDefs parameter that allows you to set the properties with which you are going to initialize one or more columns in the table.

The property targets must be specified to indicate which columns are going to be apply what we define. Being able to take the arguments:

  • 0 or a positive integer: is the index of the column starting from the left
  • a negative integer: it is the index of the column starting from the right
  • a string: is the class that has the heading <th> of a column
  • the string _all : all columns (default)

Also the property render which is responsible for rendering (or formatting) the data that is use in the table. You can modify the source data through different operations, passing as an argument a function that will be executed and that will return the value to be used. The parameters of the function are:

  • data : cell data
  • type
  • row : the data in the row
  • meta : additional information about the cell (index of the row, index of the column, etc)

Example:

In this case a link is created using the data of the cell and it is applied to the second column (the first has index 0).

$('#tabla').dataTable( {
  "columnDefs": [ {
    "targets": +1,
    "data": "perfil",
    "render": function ( data, type, row, meta ) {
      return '<a href=/perfil/"' + data + '">Perfil</a>';
    }
  } ]
} );
    
answered by 13.08.2017 в 07:37