1

Estou montando uma tabela com o framework JS DataTables Eu processo os dados via Server-side através do JSON

na primeira coluna eu gostaria de exibir uma foto,o nome dessa foto vem via JSON.

Como fazer?

Exemplo de como estou testando:

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

A Coluna que vou exibir a foto é: Foto

O Javascript do DataTables é:

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

A Linha é essa: "defaultContent": ''

Resumo: Estou tentando recuperar o valor do JSON e colocar nesse script que inicializa o DataTables.net, o campo que estou tentando é o nome da foto tentei criar:

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

e chamar como data[8] //9ª registro do json, mas não funcionou

Uncaught TypeError: Cannot read property '8' of undefined

Se eu não faço isso, a grid aparece normalmente.Exemplo do que quero fazer, adicionar a imagem que vem pelo json

2
  • 1
    Se data está undefined, o JSON nem chega na datatable. Primeiro você precisa corrigir isto. Commented 19/10/2015 às 18:37
  • se eu removo essa tentativa de usar o json retornado no próprio DataTable ele exibe e grid corretamente. Acho que vou editar minha pergunta para ser mais objetiva
    – Dorath
    Commented 19/10/2015 às 18:45

2 Respostas 2

2

Olá, Segue mais uma solução. Buscando direto da pasta. Estou passando o nome da foto pela coluna do GridView, porém deixo ela oculta no Grid!

(DataTables.net MVC - imagens em colunas) inserir a descrição da imagem aqui

   $(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>';
             }
         }
    ]
});
});

1

Consegui fazer com um método não recomendado mas que funcionou

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

ficou:

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' },

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .