Put a link instead of a field

ClaudioGS

Hello good morning.
I have the following code:

 tblDocumentos = $('#tblDocumentos').DataTable({
    ajax: {
      url: base_url + "/Documentos/listar",
      dataSrc: ''
    },
    columns: [
      { 'data': 'fecha'},
      { 'data': 'numero' },
      { 'data': 'tipo' },
      { 'data': 'archivo' },
      {'data': null,
        render: function ( data, type, row ) {
        return row.nombre + ' -- (' + row.rut + ')';}},
      { 'data': 'estado'},
      { 'data': 'acciones'},
    ],
    language: {
      "url": "//cdn.datatables.net/plug-ins/1.10.11/i18n/Spanish.json"
    },
    dom,
    buttons
  }); 

Instead of the file field, I want to put an icon, with a link to the file.

Is it possible to do that?

A cordial greeting from Valparaíso - Chile````

kthorngren

There is a link code example in the columns.render docs. Also see this example.

Kevin

ClaudioGS

Gracias por la información, ya lo pude lograr

ClaudioGS

I already have part of what I need, my question now is, how can I make a conditional.
if (empty(file){ leave the field empty, do not put the icon with the link }

{ 'data': 'archivo', render: function (data){ return '<div class="text-center"><a href="/doctos2/Assets/uploads/' + data + '"><box-icon name="link" size="sm"></box-icon></a></div>' } },

kthorngren

Its hard to say specifically without understanding your data but use an if statement in the columns.render function. The key is to make sure to always return something. For example:

{ 'data': 'archivo',
        render: function (data){
          if (empty(file){
            return "";
          } else {
            return '<div class="text-center"><a href="/doctos2/Assets/uploads/' + data + '"><box-icon name="link" size="sm"></box-icon></a></div>'
          }
        }
       },

Replace empty(file) with whatever code checks your data for an empty file. Possibly use the row parameter to access another data point in the row.

Kevin

ClaudioGS

I did the following:
{ 'data': 'archivo', render: function (data){ if(data != ''){ return '<div class="text-center"><a href="/doctos2/Assets/uploads/' + data + '"><box-icon name="link" size="sm"></box-icon></a></div>' } } },

the following message appears:

When I press the "Accept" button twice, the data appears as I need it, that is, the records that do not have a file inserted, the icon does not appear, when I check the console there are no errors, nor on the network, therefore I do not know what it could be . reading the documentation of the link in the message, I can't find the reason.

Please can you help me.

kthorngren

That error is why I said you always need to return something. In my code snippet there is a return statement when the if is true and in the else clause. You need to do the same.

Kevin

ClaudioGS

I solved it by adding an else: leaving it as follows:
{ 'data': 'archivo', render: function (data){ if(data != ''){ return '<div class="text-center"><a href="/doctos2/Assets/uploads/' + data + '"><box-icon name="link" size="sm"></box-icon></a></div>' } else { return '<div class="text-center"><img src="/doctos2/Assets/uploads/default.png" width=70></div>' } } },