manipulating DataTables.net data with Json [how to manipulate json to display img in column]

Navigation
1

I'm putting together a table with the JS framework DataTables I process the data via Server-side through JSON

In the first column I would like to display a photo, the name of this photo comes via JSON.

How to do it?

Example of how I'm testing: 

        <table id="example" class="table table-striped table-bordered table-hover" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th></th>
                    <th>Foto</th>
                    <th>ID Historico</th>
                    <th>curValor</th>
                    <th>intid</th>
                    <th>CurValor</th>
                    <th>str_CIDADE</th>
                    <th>Bairro</th>
                    <th>Opção</th>
                </tr>
            </thead>
            <tbody>
                <tr role="row" class="odd">
                    <th></th>
                    <th>Foto</th>
                    <th>ID Historico</th>
                    <th>curValor</th>
                    <th>intid</th>
                    <th>CurValor</th>
                    <th>str_CIDADE</th>
                    <th>Bairro</th>
                    <th></th>
                </tr>
            </tbody>
        </table>

The column I'm going to display the photo is: Photo

The DataTables Javascript is: 

/// abreviação
     "processing": true,
                    "serverSide": false,
                    "ajax": {
                        "url": "grid3.ashx"
                    },
                    columns: [
                         {
                             "className": 'details-control',
                             "orderable": false,
                             "data": null,
                             "defaultContent": ''
                         },
                     {
                         "className": '',
                         "orderable": false,
                         "data": null,

                         "defaultContent": ' <img  class="img-thumbnail " src="http://imgteste.wmb.com.br//tb/"style="width:50px;"   />'
                     },
                     { data: 'IDHistorico' },
                     { data: 'curValor' },
                     { data: 'intid' },
                     { data: 'curValor' },
                     { data: 'str_CIDADE' },
                     { data: 'str_BAIRRO' }
///abreviação do código

The line is this: "defaultContent": ''

Summary: I'm trying to retrieve the JSON value and put this in the script that initializes DataTables.net, the field I'm trying is the name of the I tried to create: 

var data = table.row( $(this).parents('tr') ).data();

and call as date [8] // 9th json record, but did not work

Uncaught TypeError: Can not read property '8' of undefined

If I do not do this, the grid appears normally.

    
asked by anonymous 19.10.2015 / 20:29

2 answers

1

I was able to do with a method not recommended but that worked 

"render": function ( data, type, full, meta ) {
 return '<img  src="http://imgteste.wmb.com.br/"'+data.foto+'style="width:50px;"   />';
                     },

stayed: 

columns: [
                     {
                         "className": 'details-control',
                         "orderable": false,
                         "data": null,
                         "defaultContent": ''
                     },
                 {
                     "className": '',
                     "orderable": false,
                     "data": null,
                     "render": function ( data, type, full, meta ) {
                         return '<img  class="img-thumbnail " src="http://imgteste.wmb.com.br/'+data.foto+'" style="width:50px;"   />';
                     },
                 },
                 { data: 'IDHistorico' },
                 { data: 'curValor' },
                 { data: 'intid' },
                 { data: 'curValor' },
                 { data: 'str_CIDADE' },
                 { data: 'str_BAIRRO' },
    
19.10.2015 / 21:37
2

Hello, Here's one more solution. Searching straight from the folder. I'm passing the name of the photo through the GridView column, but I leave it hidden in the Grid!

(DataTables.net MVC - images in columns) 

   $(function () {
//MUDAR CAMINHO DA PASTA FOTO
var caminho = '/Content/fotos/PessoaFisica/';
var table = $('#GridView').DataTable({
    "aoColumns": [
        { "atargets": [0], "data": null, "defaultContent": '', "orderable": false, "searchable": false, sClass: "AlignCenter" },
        { "mDataProp": "Id", "aTargets": [1] },
    {
        "mData": null,
        "bSortable": false,
        "mRender": function (o, type, row) {
            return '<a' +'</a>' +'<img  src="' + caminho + o.foto + '" style="width:50px;"/>';
        }
    },
        { "mDataProp": "nome_completo", "aTargets": [2] },
        { "mDataProp": "cpf", "aTargets": [3] },
        { "mDataProp": "rg", "aTargets": [4] },
        { "mDataProp": "foto", "aTargets": [5], "visible": false },
         {
             "mData": null,
             "bSortable": false,
             //MUDAR NOME DO CONTROLLER 
             "mRender": function (o, type, row) {
                 return '<a href=PessoaFisica/Edit/' + o.Id + '>' + '<button type="button" class="glyphicon glyphicon-pencil"></button>' +
                        '</a> <a href=/PessoaFisica/Delete>' + '<button id="btnDelCrud" type="button" class="glyphicon glyphicon-remove"></button>' +
                        '</a>';
             }
         }
    ]
});
});
    
25.02.2016 / 20:18
Error changing static property value Fields Checkbox Coming from the database