0

Дано: 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)

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

1
  • покажи что генерирует файл /management
    – L. Vadim
    Commented 2 янв. 2017 в 15:58

2 ответа 2

0

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

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

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

6
  • Исправил JSON на Ваш вариант. Первая часть ошибки больше не появляется "DataTables warning". Осталась вторая часть ошибки. Uncaught TypeError: Cannot read property 'name' of undefined Через concole.log(data.name) - имя выводится.
    – CheshireK
    Commented 2 янв. 2017 в 16:20
  • покажите свой джейсон
    – L. Vadim
    Commented 2 янв. 2017 в 16:23
  • у меня этой ошибки просто нет
    – L. Vadim
    Commented 2 янв. 2017 в 16:24
  • [{"id":4298,"name":"ИмяПитомца","animalClass":"Кошачьи","age":4, "cage":{"cageID":1,"number":1}, "keeper":{"id":54,"name":"RAYMOND","surname":"SPELLMAN"} }]
    – CheshireK
    Commented 2 янв. 2017 в 16:25
  • Почти удалось прочитать данные, но застревает на вложенных данных "data.keeper.name" - name уже не читает - name of undefined. Это возникает там, где в вопросе указан коммент "//сюда прилетел JSON"
    – CheshireK
    Commented 2 янв. 2017 в 16:38
0

Проблема добавления новой строки была в следующих строках:

//прочее описание таблицы
columns: [
    { data: 'name'},
    { data: 'age'},
    { data: 'animalClass'},
    { data: 'cage.number'},        //ТУТ БЫЛА ПРОБЛЕМА
    { data: "keeper.nameSurname"}, //И ТУТ
    { data : 'id'}
]

...//ПРОЧЕЕ
//Добавление строки
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();

Решено так (временно, т.к. ошибку я не понял =) )


//Изменил описание таблицы

{ data: 'cage', render: function ( data, type, row ) {
    return data.number;
} },

{ data: 'keeper', render: function ( data, type, row ) {
    return data.nameSurname;
} },

//и само добавление строки

'cage': data.cage,
'keeper': data.keeper,

Целиком JSP выглядит так (я с JS только знакомлюсь, поэтому буду рад критике):

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="false" %>
<html>
<head>
    <title>Zoo Management</title>

    <script type="text/javascript" charset="utf8" src="/js/datatable/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" charset="utf8" src="/js/datatable/jquery.dataTables.js"></script>
    <script type="text/javascript" charset="utf8" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    <link rel="stylesheet" type="text/css" href="/css/datatable/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <style>
        .ui-autocomplete {
            max-height: 100px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        * html .ui-autocomplete {
            height: 100px;
        }
    </style>
    <script>
        var rowId = ''; //Индекс редактируемой строки в таблице
        $(document).ready(function () {
            var table =  $('#animals').DataTable( {
                    //Получаем данные из сервлета через Ajax
                ajax: {
                    processing: true,
                    type: 'POST',
                    url: '/management',
                    dataSrc: ''
                },
                columnDefs: [
                    //скрытая колонка для хранения id сущности из базы
                    {
                        "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', render: function ( data, type, row ) {
                        return data.number;
                    } },
                    { data: 'keeper', render: function ( data, type, row ) {
                        return data.nameSurname;
                    } },
                    { data : 'id'} //данная колонка будет скрыта, но будет хранить id сущности
                ]
            });

            //По клику удаляем строку
            $('#animals tbody').on( 'click', '#delete', function () {
                var data = table.row( $(this).parents('tr') ).data();
                $.get( "/deleteanimal", {id: data.id}, function(data) {
                    alert( data ); //Делаем что-нибудь
                } );
                table
                        .row( $(this).parents('tr')  )
                        .remove()
                        .draw();
            } );


            //Для редактирования строки
            //По клику получаем "data" строки, не будем ходить в базу (не лучший вариант)
            $('#animals tbody').on( 'click', '#edit', function () {
                var data = table.row( $(this).parents('tr') ).data();
                //Сохраняем индекс редактируемой строки
                rowId = table.row( $(this).parents('tr') ).index();
                //Заполняем форму
                $("#name").val(data.name);
                $("#animalClass").val(data.animalClass);
                $("#age").val(data.age);
                $("#keeper").val(data.keeper.nameSurname);
                $("#cage").val(data.cage.number);
                $("#id").val(data.id);
            } );



            //Сама отправка данных в базу
            $(function() {
                $("#submit").click(function(){
                    var sendData = $('#animalForm').serialize();
                    $.post("/editanimal",
                            sendData,
                            function(data){
                                var table = $('#animals').DataTable();
                                //Если ранее не происходило клика по edit,
                                //значит сущность новая - значит row.add
                                if (rowId == '') {
                                    table.row.add({
                                        'name': data.name,
                                        'age': data.age,
                                        'animalClass': data.animalClass,
                                        'cage': data.cage,
                                        'keeper': data.keeper,
                                        'id': data.id
                                    })
                                            .draw();

                                    //Чистим форму
                                    jQuery('#animalForm').get(0).reset();
                                //Если (rowId != '') - значит имеется индекс строки
                                //Значит делаем update
                                } else {
                                    table.row(rowId).data(data).draw();

                                    rowId = '';
                                    jQuery('#animalForm').get(0).reset();
                                }
                            });
                    return false;
                });
            });
        });

    </script>
    //Автозаполнение строки из базы
    //jQuery AutoComplete
    <script>
        $(function () {
            $('#keeper').autocomplete({
                minLength: 2,
                source: function( request, response ) {
                    $.ajax( {
                        type: "POST",
                        url: "/search",
                        dataType: "json",
                        data: {
                            term: request.term
                        },
                        success: function( data ) {
                            response($.map(data, function(item){
                                return{
                                    label: item.name  + " " + item.surname,
                                    value: item.name  + " " + item.surname
                                }
                            }));
                        }
                    } );
                }
            })
        } );
    </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>

<hr/>
<form id="animalForm">
    <fieldset>
        <legend>
            Сохранить питомца
        </legend>

        <div>
            <label for="name">Питомец</label> <input type="text" name="name"
                                                     id="name" value="${animal.name}"/>
        </div>

        <div>
            <label for="animalClass">Класс</label> <input type="text" name="animalClass" id="animalClass"
                                                          value="${animal.animalClass}"/>
        </div>

        <div>
            <label for="age">Возраст</label> <input type="text" name="age" id="age"
                                                    value="${animal.age}"/>
        </div>

        <div class="ui-widget">
            <label for="keeper">Смотритель</label> <input type="text" name="keeper" id="keeper"
                                                          value="${animal.keeper}"/>
        </div>

        <div>
            <label for="cage">№ Клетки</label> <input type="text" name="cage" id="cage"
                                                      value="${animal.cage}"/>
        </div>

        <div>
            <label for="id">ID</label> <input type="text" name="id" id="id"
                                              value="${animal.id}" readonly/>
        </div>

    </fieldset>

    <div class="button-row">
        <input type="submit"  id="submit" value="submit" />
    </div>
</form>
</body>
</html>

JSON:

[{
    "id": 3349,
    "name": "SHERA",
    "animalClass": "Пауроподы",
    "age": 9,
    "cage": {
      "cageID": 75,
      "number": 335
    },
    "keeper": {
      "id": 335,
      "name": "TERRANCE",
      "surname": "BARFIELD",
      "nameSurname": "TERRANCE BARFIELD"
    }
  },
  {
    "id": 3350,
    "name": "SHAQUITA",
    "animalClass": "Аплакофоры",
    "age": 2,
    "cage": {
      "cageID": 39,
      "number": 83
    },
    "keeper": {
      "id": 335,
      "name": "TERRANCE",
      "surname": "BARFIELD",
      "nameSurname": "TERRANCE BARFIELD"
    }
  }]

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.