Pablo Tobar
Pablo Tobar

Reputation: 634

Add an extra defaulContent column depending on a if condition

Good afternoon, I have populated a datatable (table plugin for jQuery) with data retrieved from a wcf service and it has a column defaultContent which has a link and works good, but now I need to create and extra defaultContent column with another link depending on an if condition as show below

if (tipo_evento == 3213) { ... add a defaultContent...}

I have tried added the if to the code below but it is not possible, could you tell me how to add the extra column? this is the code of my table

function cargarTabla() {
            $('#myTable').DataTable({
                searching: false,
                paging: false,
                responsive: true,
                ordering: false,
                bInfo: true,
                bLengthChange: false,
                processing: true,
                info: true,
                deferRender: true,
                orderMulti: false,
                bAutoWidth: false,
                "ajax": {
                    "url": "/Home/CargarTabla?id=" + noDocumento + "&grupo=" + grupoDT,
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                        { "data": "nombres", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "18%" },
                        { "data": "apellidos", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "18%" },
                        { "data": "dui", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "5%" },
                        { "data": "numero_isss", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "5%" },
                        { "data": "cargo_participante", "autoWidth": false, "orderable": false, "sClass": "alignRight", "sWidth": "20%" },
                        { "data": "genero", "autoWidth": false, "orderable": false, "visible": false },
                        { "data": "nivel_puesto", "autoWidth": false, "orderable": false, "visible": false },
                        { "data": "grupo", "autoWidth": false, "orderable": false, "visible": false },
                        { "defaultContent": " <a href='#' id='select'>Sustituir</a>  ", "autoWidth": true, "orderable": false, "sClass": "alignRight", "sWidth": "5%" }
                ],
                "oLanguage": {
                    "sEmptyTable": "No hay registros disponibles",
                    "sInfo": " _TOTAL_ registros. Mostrando de (_START_ a _END_)",
                    "sLoadingRecords": "Por favor espera - Cargando...",
                    "sSearch": "Filtro:",
                    "sLengthMenu": "Mostrar _MENU_",
                    "oPaginate": {
                        "sLast": "Última página",
                        "sFirst": "Primera",
                        "sNext": "Siguiente",
                        "sPrevious": "Anterior"
                    },
                    "oAria": {
                        "sSortAscending": ": Activar para ordenar la columna de manera ascendente",
                        "sSortDescending": ": Activar para ordenar la columna de manera descendente"
                    }
                }
            });
        }

I just added this code from Gyrocode.com, andit works just fine but the column just added takes too much space in my table, how to add the "autoWidth": true, "orderable": false, "sClass": "alignRight", "sWidth": "5%" ?

"render": function (data, type, full, meta) {
                                if (type === 'display') {
                                    if (tipo_evento == 3213) {
                                        data = " <a href='#' id='Teliminar'>Eliminar</a> " +"|"+ " <a href='#' id='select'>Sustituir</a> ";
                                    } else {
                                        data = " <a href='#' id='select'>Sustituir</a> ";
                                    }
                                }
                                return data;

Upvotes: 0

Views: 774

Answers (1)

Gyrocode.com
Gyrocode.com

Reputation: 58880

Use columns.render option to produce content for a cell.

For example, to generate content based on value of tipo_evento variable:

{ 
    "render": function(data, type, full, meta){
       if(type === 'display'){
          if(tipo_evento == 3213){
             data = "";
          } else {
             data = " <a href='#' id='select'>Sustituir</a> ";
          }
       }

       return data;
    },
    // ... other options ...
    "autoWidth": true, 
    "orderable": false, 
    "sClass": "alignRight", 
    "sWidth": "5%" 
}

Upvotes: 1

Related Questions