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

1163
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
Повторение счетчика каждые 10 секунд

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

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

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

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

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

515