如何在DataTable中添加带ID参数的href跳转路由

我基于DataTable实现了数据表格，已从数据库获取数据并完成展示。现在需要为表格每行添加跳转至详情页的路由，要求路由携带对应行的ID参数。当前代码中href的参数为固定值1，需要替换为每行对应的实际ID。

原代码 #

<script>
        $(function() {
            $("#start_date").datepicker({
                "dateFormat": "yy-mm-dd"
            });
            $("#end_date").datepicker({
                "dateFormat": "yy-mm-dd"
            });
        });

        // Fetch records
        function fetch(start_date, end_date,zone_id,status_id,sector_id) {
            $.ajax({
                  url: "{{ route('ProjectFilterdate/records') }}",
                type: "GET",
                data: {
                    start_date: start_date,
                    end_date: end_date,
                    zone_id:zone_id,
                    status_id:status_id,
                    sector_id:sector_id
                },
                dataType: "json",
                success: function(data) {
                    // Datatables
                    var i = 1;
                    $('#records').DataTable({
                        "data": data.ptojects,
                        // buttons
                        "dom": "<'row'<'col-sm-12 col-md-4'l><'col-sm-12 col-md-4'B><'col-sm-12 col-md-4'f>>" +
                            "<'row'<'col-sm-12'tr>>" +
                            "<'row'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
                        "buttons": [
                            'copy','excel', 'pdf', 'print'
                        ],
                        // responsive
                        "responsive": true,
                        "columns": [{
                                "data": "id",
                                "render": function(data, type, row, meta) {
                                    return i++;
                                }
                            },
                             {
                                "data": "code"
                            },
                            {
                                "data": "name"
                            },
                            {
                                "data": "proposal_date"
                            },
                            {
                                "data": "proposal_value"
                            },
                            {
                                "data": "contractor"
                            },
                            {
                                "data": "subcontractor"
                            },
                             
                            {
                            render: function ( data, type, row) {
                              return '<a href="{{route('projects.show','1')}}">test</a>';
                            }
                        },
                    

                        ]
                    });
                }
            });
        }
</script>

当前跳转代码片段 #

{
     render: function ( data, type, row) {
     return '<a href="{{route('projects.show','1')}}">test</a>';
}

解决方案 #

因为Laravel的route()函数是后端渲染的，无法直接在前端动态替换参数，所以我们可以先生成一个带占位符的路由模板，再在前端用每行的ID替换占位符：

• 首先将后端路由生成改为带占位符的形式：{{ route('projects.show', '{id}') }}，这会生成类似/projects/{id}的URL模板。
• 在DataTable的render函数中，用当前行的row.id替换模板中的{id}占位符。

修改后的跳转列代码如下：

{
    render: function (data, type, row) {
        // 获取带占位符的路由模板
        var routeTemplate = "{{ route('projects.show', '{id}') }}";
        // 替换占位符为当前行的ID
        var detailUrl = routeTemplate.replace('{id}', row.id);
        return '<a href="' + detailUrl + '">test</a>';
    }
}

或者用ES6模板字符串简化写法：

{
    render: function (data, type, row) {
        var detailUrl = "{{ route('projects.show', '{id}') }}".replace('{id}', row.id);
        return `<a href="${detailUrl}">test</a>`;
    }
}

这样每行的跳转链接就会自动带上当前行对应的ID参数了。

内容的提问来源于stack exchange，提问作者abubeker ahmed