Добавить гиперссылку на столбцы в DataTables

Question

Я новичок ie Используя DataTables, я создал веб-страницу, которая использует обработку на стороне клиента для загрузки данных. Я хочу добавить гиперссылку в мои столбцы, используя « columns.render », чтобы просмотреть подробности во всей строке, где значение ID / pk соответствует тексту с гиперссылкой, так что если пользователь нажимает Id / гиперссылку в столбцах идентификаторов, они будут перенаправлены на отдельную страницу: « VM / Details / (id / pk) ». Как я это исправил?

JS

$(document).ready(function() {
    var table = $('#vmtable').DataTable({
        "serverSide": false,
        "scrollX": true,
        "deferRender": true,
        "ajax": {
            "url": "/api/vm/?format=datatables",
            "type": "POST"
            },
        "columns": [
            {"data":"id",
            "render": function(data, type, row, meta){
                if(type === 'display'){
                    data = '<a href="VM/Details/' + data.id + '">' + data + '</a>';
                    }
                return data;
                }
            },
            {"data": "Activity_Id"},
            {"data":"NO"},
            {"data":"First_name"},
            {"data":"Last_name"}
        ]
    });

html

<table id="vmtable" class="table table-striped table-bordered" style="width:100%" data-server-side="false" data-ajax="/api/vm/?format=datatables">
                   <thead>
                        <tr>
                            <th>Id</th>
                            <th>Activity No</th>
                            <th>NO</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                        </tr>
                    </thead>
</table>

Путь, который я хочу перенаправить после нажатия гиперссылки

path('VM/Details/<int:pk>', vmDetails.as_view(), name='vm_details'),

Но я получил ошибку

Page not found (404)
Request Method: GET
Request URL:    http://127.0.0.1:8000/VM/Details/undefined

"/ api / vm /? format = datatables "

HTTP 200 OK
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Vary: Accept

{
    "count": 1,
    "next": null,
    "previous": null,
    "results": [
        {
            "id": 1,
            "Activity_Id": "VML2020-000001",
            "NO": "000001",
            "First_name": "Jason",
            "Last_name": "Smith"
        }
    ]
}

Answer 1

Параметр data, передаваемый в функцию render столбца, относится к данным самой ячейки (например, id). Если вам нужен доступ ко всем данным для этой строки, используйте row.

Другими словами, для этого столбца data == row.id

Применение к вашему коду

$(document).ready(function() {
        ...
        "columns": [
            {
            "data":"id",
            "render": function(data, type, row, meta){
                if(type === 'display'){
                    data = '<a href="VM/Details/' + data + '">' + row.Activity_Id + '</a>';
                    }
                return data;
                }
            },
            ...
        ]
    });

Источник: https://datatables.net/reference/option/columns.render