将超链接添加到 DataTables 中的列

Posted 2023-05-09

【中文标题】将超链接添加到 DataTables 中的列

【英文标题】：Add hyperlink to columns in DataTables

【发布时间】：2020-07-15 04:27:51

【问题描述】：

我是使用 DataTables 的新手，我创建了一个使用 DataTables 的网页 客户端处理以加载数据。我想在我的 列使用“columns.render”查看整行的详细信息，其中 ID/pk 的值对应于超链接文本，因此如果 用户单击 ID 列中的 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"
        
    ]

【问题讨论】：

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

【参考方案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