manipulating Datatables.net data with Json [like manipulating json to display img in the column]

Asked

Viewed 609 times

1

I am mounting a table with the JS framework Datatables I process the data via Server-side through the JSON

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

How to do?

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 that I will 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 am trying to recover the value of JSON and put in this script that initializes Datatables.net, the field I am trying is the name of the photo I tried to create:

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

and call as date[8] //9th json record, but it didn’t work

Uncaught Typeerror: Cannot read Property '8' of Undefined

If I don’t do this, the grid appears normally.Exemplo do que quero fazer, adicionar a imagem que vem pelo json

c# asp.net json webforms
  • 1

    If date is undefined, JSON doesn’t even get to the datatable. First you need to fix this.

  • if I remove this attempt to use the returned json in the Datatable itself it displays and grid correctly. I think I’ll edit my question to be more objective

2 answers

2

Hello, Follow one more solution. Searching straight from the folder. I am passing the name of the photo through the column of Gridview, but I leave it hidden in the Grid!

(MVC Datatables.net - Column Images) 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


I managed to do it 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;"   />';
                     },

got:

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

Browser other questions tagged c# asp.net json webforms

You are not signed in. Login or sign up in order to post.