jQuery DataTables - добавить строку в таблицу

1244
04 января 2017, 04:16

Дано: MySQL, Java - сервлеты, jQuery DataTables.

Задача: Добавить строку или обновить строку в таблице при редактировании через JSON, который прилетает при успешном обновлении базы.

JSON: 
{
  "id":4354,
  "name":"ИмяПитомца",
  "animalClass":"КлассПитомца",
  "age":4,
  "cage":{
     "cageID":4,
     "number":4
  },
  "keeper":{
    "id":435,
    "name":"OLIVER",
    "surname":"DURAND",
    "nameSurname":"OLIVER DURAND"
  }
}

Результат: Получаю ошибку:
DataTables warning: table id=animals - Requested unknown parametr 'cage.number' for row 4294, column 3.

Код, который сейчас имеется на странице (если код страшен - бейте сильно, я учусь):

<html>
<head>
    <title>Zoo Management</title>
    <script type="text/javascript" charset="utf8" src="/js/datatable/jquery-3.1.1.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/datatable/jquery.dataTables.css">
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script type="text/javascript" charset="utf8" src="/js/datatable/jquery.dataTables.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
    $(document).ready(function () {
        var table = $('#animals').DataTable({
            ajax: {
                type: 'POST',
                url: '/management',
                dataSrc: ''
            },
            columnDefs: [
                {
                    "targets": 5,
                    "visible": false,
                    "searchable": false
                },
                {
                    "targets": 6,
                    "data": null,
                    "defaultContent": "<button id='edit'>Редактировать</button>"
                },
                {
                    "targets": 7,
                    "data": null,
                    "defaultContent": "<button id='delete'>Удалить</button>"
                }
            ],
            columns: [
                {data: 'name'},
                {data: 'age'},
                {data: 'animalClass'},
                {data: 'cage.number'}, //что-то видимо здесь не верно
                {data: 'keeper.nameSurname'}, //и тут
                {data: 'id'}
            ]
        });

        $(function () {
            $("#submit").click(function () {
                var sendData = $('#animalForm').serialize();
                $.post("/editanimal",
                        sendData,
                        function (data) { //сюда прилетел JSON
                            table.row.add({
                                'name': data.name,
                                'age': data.age,
                                'animalClass': data.animalClass,
                                'cage.number': data.cage.number, //Не добавляется
                                'keeper.nameSurname': data.keeper.nameSurname, //Не добавляется
                                'id': data.id
                            })
                                    .draw();
                        });
                return false;
            });
        });
    });
</script>
</head> 
<body>
    <table id="animals">
        <thead>
        <tr>
            <th>Питомец</th>
            <th>Возраст</th>
            <th>Класс</th>
            <th>№ Клетка</th>
            <th>Смотритель</th>
            <th>id</th>//СКРЫТ
            <th>Редактировать</th>
            <th>Удалить</th>
        </tr>
        </thead>
    </table>
</body>
//далее простая форма

При добавлении новой строки выскакивает alert с ошибкой описанной выше. Новая строка добавляется, но только с теми строками, которые были до ошибки.

Делал по этой ссылке и этой ссылке (первый example)

В чём моя ошибка? Спасибо.

Answer 1

Правильный JSON:

[{
   "id": 4298,
   "name": "ИмяПитомца",
   "animalClass": "Кошачьи",
   "age": 4,
   "cage": { "cageID": 1, "number": 1 },
   "keeper": { "id": 54, "name": "RAYMOND", "surname": "SPELLMAN" }
}]

Так всё работает.

READ ALSO
Помогите правильно написать события
javascript

Помогите правильно написать события

Имеется вот такой код

 673
Javascript: Записать значение в DOM
javascript

Javascript: Записать значение в DOM

Есть два блока:

 725
Повторение счетчика каждые 10 секунд
javascript

Повторение счетчика каждые 10 секунд

Как сделать так, что бы данный код повторялся по своему истечению (10 секунд), ну то есть зациклить надо его Пробовал через setInterval(startCountdown, 10000);...

 672
Автоматическое отображение видео на youtube в ускоренном режиме
javascript

Автоматическое отображение видео на youtube в ускоренном режиме

Подскажите скрипт либо расширение для Google Chrome для автоматического ускоренного воспроизведения видео на youtubeЯ хочу, что б все видео на ютубе...

 588