Формирование таблицы с помощью DataTable

113

25 мая 2019, 23:50

Пишу небольшой проект на spring с выводом информации на jsp страницы. Данные отображаются с помощью следующего скрипта

<script>
$(document).ready(function () {
    $('#userTable').DataTable({
        "lengthMenu": [10, 15, 20, 25, 50],
        "sAjaxDataProp": "",
        "sAjaxSource": "/user/all",
        "order": [[0, "asc"]],
        "aoColumns": [
            {"mData": "id"},
            {"mData": "login"},
            {"mData": "role"}
        ]
    });
});
</script>

Теперь понадобилось добавить возможность по удалению и изменении информации. Т.к. в JS я еще понимаю не много, не могу сообразить, как модифицировать блок "aoColumns": [ ... ]. Вернее придумал нечто такое:

"aoColumns": [
            ...,
            {defaultContent: '<a href="" onclick="editUser(id)>Edit</a> / <a href="" onclick="deleteUser(id)" >Delete</a>'}
        ]

И с помощью JS вызывать соответствующий контроллер. Либо такое:

    "aoColumns": [
            ...,
            {defaultContent: '<a href="/user/edit/id" >Edit</a> / <a href="/user/delete/id"  >Delete</a>'}
        ]

Что бы напрямую обращаться к контроллеру. Но в любом случае в контроллер надо передать id записи.

Если бы данные заполнялись, скажем, через цикл, то в таком случае я написал бы, например, так:

<a href="/user/edit/${id}" >Edit</a> / <a href="/user/delete/${id}"  >Delete</a>

Но у меня таблица заполняется с помощью DataTables и я не понимаю как быть с id. Подскажите, как проще поступить в таком случае? Можно ли как то добавить уникальный id к тегу или подставить этот id в ссылку при формировании таблицы?

Answer 1

Методом тыка нашел решение, не уверен, что оно самое оптимальное, но, тем не менее, рабочее. Прикрепляю измененный скрипт, если кто-то столкнется с таким же вопросом

<script>
$(document).ready(function () {
    $('#userTable').DataTable({
        "lengthMenu": [10, 15, 20, 25, 50],
        "sAjaxDataProp": "",
        "sAjaxSource": "/user/all",
        "order": [[0, "asc"]],
        "aoColumns": [
            { data: "id"},
            { data: "login"},
            { data: "role"},
            { data: null, render: function ( data, type, row ) {
                    var id = data.id;
                    return "<a href =\"/user/edit/" + id + "\" >Edit</a> / <a href=\"/user/delete/" + id + "\" >Delete</a>";
                }
            }
        ]
    });
});
</script>