将超链接添加到 DataTables 中的列答案

【问题标题】：Add hyperlink to columns in DataTables将超链接添加到 DataTables 中的列
【发布时间】：2020-07-15 04:27:51
【问题描述】：

我是使用 DataTables 的新手，我创建了一个使用 DataTables 的网页客户端处理以加载数据。我想在我的列使用“columns.render”查看整行的详细信息，其中 ID/pk 的值对应于超链接文本，因此如果用户单击 ID 列中的 ID/超链接，他们将被重新路由到单独的页面，“VM/Details/(id/pk)”。我是如何解决这个问题的？

$(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"
        }
    ]
}

【问题讨论】：

向我们展示/api/vm/?format=datatables 的查看代码。问题是 data.id 未定义

标签： jquery django ajax datatables

【解决方案1】：

传递给列的render 函数的data 参数与单元格本身的数据有关（例如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

【讨论】：