Load table with json using Datatables

Asked

Viewed 2,239 times

5

I am using jquery Datatables plugin version 1.10.7.

I am trying to load a table following the following structure:

JSON

{
    "d:" [
        {   "IdNotificacao":null,
            "Contrato":{
                "id":631,
                "serie":2210618,
                "dataAdesao":"29/04/2015",
                "diaVencimento":16,
                "contribuicaoMensal":0.9259
            },
            "PagamentoDoContrato":[{
                "$id":"6",
                "id":16072,
                "idContrato":631,
                "parcela":1,
                "valorBruto":328.70,
                "valorLiquido":323.77,
                "dataPagamento":"30/04/2015"                
            }],
            "Assembleia":{"$ref":"3"},
            "GrupoCota":{"$ref":"2"},
            "Cliente":{
                "$id":"9",
                "id":631,
                "cpf_cnpj":"1xx3xx1xx7x",
                "nome":"JESSICA ABDC",
                "renda":2500.00
            },          
            "TipoDaNotificacao":null,
            "CanalDeEnvio":"SMS",
            "DataEnvio":"10/06/2015 14:24:33",
            "DataRecebimento":"10/06/2015 14:25:21",
            "DataLeitura":"",
            "Recebida":"Recebida",
            "Lida":"Não Lida",
            "ObservacaoRecebimento":"",
            "ObservacaoLeitura":"",
            "DestinatarioEnvio":"319xx88xx6"
        }
    ]
}

**Json is received via Ajax*.

Table to be generated

<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<link href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<table class="table">
  <thead>
    <tr>
      <td>Contrato</td>
      <td>Serie</td>
      <td>Adesão</td>
      <td>Dia Vencimento</td>
      <td>Contribuição Mensal</td>
      <td>Parcela</td>
      <td>Valor Liquido</td>
      <td>Pagamento</td>
      <td>Documento</td>
      <td>Nome</td>
      <td>Renda</td>
      <td>Canal De Envio</td>
      <td>Envio</td>
      <td>Recebida</td>
      <td>Data</td>
      <td>Observação</td>
      <td>Destinatario</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>631</td>
      <td>2210618</td>
      <td>29/04/2015</td>
      <td>16</td>
      <td>0.9259%</td>
      <td>1</td>
      <td>R$ 323,77</td>
      <td>30/04/2015</td>
      <td>1xx.3xx.1xx-7x</td>
      <td>JESSICA ABDC</td>
      <td>R$ 2.500,00</td>
      <td>SMS</td>
      <td>10/06/2015 14:24:33</td>
      <td>Recebida</td>
      <td>10/06/2015 14:25:21</td>
      <td></td>
      <td>(31) 9xx8-8xx6</td>
    </tr>
  </tbody>
</table>

When there is no list in json, I do it as follows:

function(data) {
  var Dados = eval(data.d);
  
  $('#table_vencimento').dataTable({
    "bJQueryUI": true,
    "bLengthChange": false,
    "iDisplayLength": 10,
    "oLanguage": {
      "sUrl": "pt.txt"
    },
    data: Dados,
    columns: [{
      data: 'Cota'
    }, {
      data: 'CpfCliente'
    }, {
      data: 'NomeCliente'
    }, {
      data: 'DestinatarioEnvio'
    }, {
      data: 'DataEnvio'
    }, {
      data: 'Recebida'
    }, {
      data: 'DataRecebimento'
    }, {
      data: 'ObservacaoRecebimento'
    }, {
      data: 'Lida'
    }, {
      data: 'DataLeitura'
    }, {
      data: 'ObservacaoLeitura'
    }, {
      data: 'CanalDeEnvio'
    }, ]
  });
}

JSON

    {
    "d:" [
        {   "IdNotificacao":null,
            "TipoDaNotificacao":null,
            "CanalDeEnvio":"SMS",
            "DataEnvio":"10/06/2015 14:24:33",
            "DataRecebimento":"10/06/2015 14:25:21",
            "DataLeitura":"",
            "Recebida":"Recebida",
            "Lida":"Não Lida",
            "ObservacaoRecebimento":"",
            "ObservacaoLeitura":"",
            "DestinatarioEnvio":"319xx88xx6"
        }
    ]
}

This is a JSON "no list list".

MY PROBLEM

I am not able to properly load a table using the datatables, when JSON has multiple levels (or list list), as exemplified above.

json

  • Is it not possible to do that because I’ve already offered 50 points, and no comment if you want.

  • I didn’t quite understand your question. That phrase When there is no list in json, I do it as follows: got weird. Do you generate this JSON ? Is it a file . txt ? Sometimes you need to edit the question, put more information so we can help you.

  • I include an amendment to the question.

  • 1

    I still don’t understand what the problem is.

  • 1

    I am not able to properly load a table using the datatables, when JSON has multiple levels (or list list).

  • What is the purpose of the array var dtData = [];?

  • I was wearing it, but then I stopped using it, and it was like garbage.

  • What do you need is to fill the table as the example? This JSON may be this?

Show 3 more comments

1 answer

5


When the data is nested inside other objects (multiple levels) notation should be used with . (dot) as documented.

columns shall have the following value:

[
  {data: 'Contrato.id'},
  {data: 'Contrato.Serie'},
  {data: 'Contrato.dataAdesao'},
  {data: 'Contrato.diaVencimento'},
  {data: 'Contrato.contribuicaoMensal'},
  {data: 'PagamentoDoContrato.parcela'},
  {data: 'PagamentoDoContrato.valorLiquido'},
  {data: 'PagamentoDoContrato.dataPagamento'},
  {data: 'Cliente.cpf_cnpj'},
  {data: 'Cliente.nome'},
  {data: 'Cliente.renda'},
  {data: 'CanalDeEnvio'},
  {data: 'DataEnvio'},
  {data: 'Recebida'},
  {data: 'DataRecebimento'},
  {data: 'ObservacaoRecebimento'},
  {data: 'DestinatarioEnvio'}
]

Browser other questions tagged json

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