Невозможно связать данные Json с таблицей данных Jquery - PullRequest
Новая
       15

Невозможно связать данные Json с таблицей данных Jquery

0 голосов
/ 08 июля 2020

У меня есть данные ниже json, которые я получаю из вызова api. 

 {   "data": [
        {
            "Id": "123",
            "name": "fgfnnn",
            "postCode": "123-456",
            "Address": "test",
            "street": "test3"
        },
        {
            "Id": "456",
            "name": "gggcgh",
            "postCode": null,
            "Address": null,
            "street": null
        }
    ]
   
}

Я пытаюсь выполнить привязку к таблице tblHospital, как показано ниже, но получаю ошибку. 

jQuery('#tblHospital').DataTable({
                    data: JSON.parse(res),
                     columns: [
                       { "data": "name" }
                {
                    "data": "address",
                           
                   "render": function (data, type, full, meta) {
                       return data.Address +  data.street + data.postCode;
                    }
                },
                       ]
                });

Может ли кто-нибудь помочь? Ошибка похожа на предупреждение DataTables: table id = tblHospital - запрошенный неизвестный параметр 'name' для строки 0, столбца 0. Для получения дополнительных сведений об этой ошибке см. http://datatables.net/tn/4

Ответы [ 2 ]

0 голосов
/ 08 июля 2020

Добро пожаловать в StackOverflow.

У вас есть некоторые ошибки конфигурации в параметрах вашего Datatable.

Во-первых, ваш объект искажен. Вы не закрываете и не добавляете запятые в нужном месте.

Во-вторых, вы написали address, но ваш объект имеет заглавную A Address

В-третьих, вы не можете используйте data.Address в своей функции рендеринга, поскольку это всего лишь значение ячейки. Вам нужно получить значение строки (в вашем случае это должно быть full.Address)

Вы можете запустить приведенный ниже код, и вы увидите, что он работает. 

var data = [{
      "Id": "123",
      "name": "fgfnnn",
      "postCode": "123-456",
      "Address": "test",
      "street": "test3"
    },
    {
      "Id": "456",
      "name": "gggcgh",
      "postCode": null,
      "Address": null,
      "street": null
    }
  ];


$(document).ready(function() {
  $('#tblHospital').DataTable({
    data: data, //Here you'll have to keep JSON.parse(res). I had to change it since my values are in a variable above for this example to work.
    columns: [
    { "data": "name" }, 
    { "data": "Address", 
        "render": function ( data, type, row, meta ) {
        return row.Address + ' ' + row.street + ' ' + row.postCode;
        }
    }
    ]
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>

<table id="tblHospital" class="display">
    <thead>
        <tr>
            <th>Name</th>
            <th>Address</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
0 голосов
/ 08 июля 2020

Попробуйте использовать ajax вместо data. И сделайте вызов API в ajax. 

jQuery('#tblHospital').DataTable({
    "ajax": //API call here,
    "columns": [
        { "data": "name" },
        {
             "data": "address",             
             "render": function (data, type, full, meta) {
                           return data.Address +  data.street + data.postCode;
                       }
        },
    ]
});
...